conf: Install lucide and apply some initial styles

package-lock.json

@@ -8,6 +8,7 @@
       "name": "givs-website-react",
       "version": "0.0.0",
       "dependencies": {
+        "pnpm": "^9.15.3",
         "react": "^18.3.1",
         "react-dom": "^18.3.1"
       },
@@ -810,9 +811,9 @@
       }
     },
     "node_modules/@eslint/plugin-kit": {
-      "version": "0.2.0",
+      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.0.tgz",
+      "resolved": "https://registry.npmjs.org/@eslint/plugin-kit/-/plugin-kit-0.2.4.tgz",
-      "integrity": "sha512-vH9PiIMMwvhCx31Af3HiGzsVNULDbyVkHXwlemn/B0TFj/00ho3y55efXrUZTfQipxoHC5u4xq6zblww1zm1Ig==",
+      "integrity": "sha512-zSkKow6H5Kdm0ZUQUB2kV5JIXqoG0+uH5YADhaEHswm664N9Db8dXSi0nMJpacpMf+MyyglF1vnZohpEg5yUtg==",
       "dev": true,
       "dependencies": {
         "levn": "^0.4.1"
@@ -1673,9 +1674,9 @@
       "dev": true
     },
     "node_modules/cross-spawn": {
-      "version": "7.0.3",
+      "version": "7.0.6",
-      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz",
+      "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.6.tgz",
-      "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==",
+      "integrity": "sha512-uV2QOWP2nWzsy2aMp8aRibhi9dlzF5Hgh5SHaB9OiTGEyDTiJJyx0uy51QXdyWbtAHNua4XJzUKca3OzKUd3vA==",
       "dev": true,
       "dependencies": {
         "path-key": "^3.1.0",
@@ -2436,9 +2437,9 @@
       "dev": true
     },
     "node_modules/nanoid": {
-      "version": "3.3.7",
+      "version": "3.3.8",
-      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.7.tgz",
+      "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.8.tgz",
-      "integrity": "sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==",
+      "integrity": "sha512-WNLf5Sd8oZxOm+TzppcYk8gVOgP+l58xNy58D0nbUnOxOWRWvlcCV4kUF7ltmI6PsrLl/BgKEyS4mqsGChFN0w==",
       "dev": true,
       "funding": [
         {
@@ -2560,6 +2561,21 @@
         "url": "https://github.com/sponsors/jonschlinkert"
       }
     },
+    "node_modules/pnpm": {
+      "version": "9.15.3",
+      "resolved": "https://registry.npmjs.org/pnpm/-/pnpm-9.15.3.tgz",
+      "integrity": "sha512-H3m8JFpm6wsHxdTYMTEkB3RkLKqobvfQQ0q0fA0W9msE4h4MCG62HmLHfvxNf37Aca+tN5avZIkvrmZQkXOJOg==",
+      "bin": {
+        "pnpm": "bin/pnpm.cjs",
+        "pnpx": "bin/pnpx.cjs"
+      },
+      "engines": {
+        "node": ">=18.12"
+      },
+      "funding": {
+        "url": "https://opencollective.com/pnpm"
+      }
+    },
     "node_modules/postcss": {
       "version": "8.4.47",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.47.tgz",

package.json

@@ -10,8 +10,11 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "lucide-react": "^0.469.0",
+    "pnpm": "^9.15.3",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "styled-components": "^6.1.14"
   },
   "devDependencies": {
     "@eslint/js": "^9.11.1",

src/App.tsx

@@ -1,11 +1,16 @@
+import { ThemeProvider } from 'styled-components';
 import Header from './components/Header'
-import './global.css'
+import { defaultTheme } from './styles/themes/default';
+import { GlobalStyle } from './styles/global';
 
 function App() {
 
   return (
+    <ThemeProvider theme={defaultTheme}>
+      <GlobalStyle />
       <Header>
       </Header>
+    </ThemeProvider>
   )
 }
 

src/components/Header/index.tsx

@@ -1,3 +1,12 @@
+import { HeaderContainer } from "./styles";
+
 export default function Header(){
-    return <h1>Header</h1>
+    return(
+        <HeaderContainer>
+            <p>I'm Giv!</p>
+            <a>About me</a>
+            <a>Contact</a>
+            <a>Projects</a>
+        </HeaderContainer>
+    )
 }

src/components/Header/styles.ts

@@ -0,0 +1,11 @@
+import styled from "styled-components";
+
+export const HeaderContainer = styled.div`
+    border-radius: 8px;
+    width: 100%;
+    height: 70px;
+    background-color: ${props => props.theme["green-500"]};
+    a{
+        font-size: 30px,
+    }
+`

src/styles/global.ts

@@ -0,0 +1,26 @@
+import { createGlobalStyle } from "styled-components";
+
+export const GlobalStyle = createGlobalStyle`
+
+*{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+
+:focus{
+    outline: 0;
+    box-shadow: 0 0 0 2px ${props => props.theme['green-500']}
+}
+
+body{
+    background-color: ${props => props.theme["gray-800"]};
+    color: ${props => props.theme.white};
+    -webkit-font-smoothing: antialised;
+}
+
+body, input, textarea, button{
+    font: 400 1rem Roboto, sans-serif;
+}
+
+`

src/styles/themes/default.ts

@@ -0,0 +1,21 @@
+export const defaultTheme = {
+    white: '#FFF',
+    black: '#000',
+
+    'green-100': '#34E0CC',
+    'green-200': '#3CB4A6',
+    'green-300': '#458A82',
+    'green-400': '#3F5F5B',
+    'green-500': '#2C3534',
+    'green-600': '#080A0A',
+
+    'gray-100': '#E1E1E6',
+    'gray-300': '#C4C4CC',
+    'gray-400': '#8D8D99',
+    'gray-500': '#7C7C8A',
+    'gray-600': '#323238',
+    'gray-700': '#29292E',
+    'gray-800': '#202024',
+    'gray-900': '#121214',
+
+}