chore: added custom brand icons and documentation

README.md

@@ -9,11 +9,17 @@ Here is a list of documentation to help you get started:
 - [Lucide](https://lucide.dev/icons/) - Icons library
 - [Next-intl](https://next-intl-docs.vercel.app/) - Internationalization library
 
+## Icons
+
+- When using custom icons that are not provided by lucide, make sure to add them as SVGs to the `components/assets/icons` folder. This improves performance since the icons are handled as vectors and not as images.
+
 ## Quirks to keep in mind
 
 - When you want to link to a new internal page use the `<Link>` component from `@/lib/navigation` instead of the normal anchortag `<a>`. This will ensure that the page is loaded with the correct locale. If you want to link to external resources or other media, use the built-in `<Link>` component from Next.js. Remember to add `prefetch={false}` to the `<Link>` component if the page is not visited often.
 
-## Developmen`
+## Development setup
+
+Make sure you have Node.js installed on your machine. If you don't have it, you can download it [here](https://nodejs.org/en/download/).
 
 First, install dependencies:
 

messages/en.json

@@ -14,6 +14,7 @@
     "system": "System",
     "profile": "Profile",
     "signIn": "Sign in",
-    "links": "Links"
+    "links": "Links",
+    "socialMedia": "Social media"
   }
 }

messages/no.json

@@ -14,6 +14,7 @@
     "system": "System",
     "profile": "Profil",
     "signIn": "Logg inn",
-    "links": "Lenker"
+    "links": "Lenker",
+    "socialMedia": "Sosiale medier"
   }
 }

src/components/assets/icons/Facebook.tsx

@@ -0,0 +1,22 @@
+function Facebook({ className, ...rest }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      {...rest}
+    >
+      <path d='M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z' />
+    </svg>
+  );
+}
+
+export { Facebook };

src/components/assets/icons/Github.tsx

@@ -0,0 +1,23 @@
+function Github({ className, ...rest }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      {...rest}
+    >
+      <path d='M15 22v-4a4.8 4.8 0 0 0-1-3.5c3 0 6-2 6-5.5.08-1.25-.27-2.48-1-3.5.28-1.15.28-2.35 0-3.5 0 0-1 0-3 1.5-2.64-.5-5.36-.5-8 0C6 2 5 2 5 2c-.3 1.15-.3 2.35 0 3.5A5.403 5.403 0 0 0 4 9c0 3.5 3 5.5 6 5.5-.39.49-.68 1.05-.85 1.65-.17.6-.22 1.23-.15 1.85v4' />
+      <path d='M9 18c-4.51 2-5-2-7-2' />
+    </svg>
+  );
+}
+
+export { Github };

src/components/assets/icons/Instagram.tsx

@@ -0,0 +1,24 @@
+function Instagram({ className, ...rest }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      {...rest}
+    >
+      <rect width='20' height='20' x='2' y='2' rx='5' ry='5' />
+      <path d='M16 11.37A4 4 0 1 1 12.63 8 4 4 0 0 1 16 11.37z' />
+      <line x1='17.5' x2='17.51' y1='6.5' y2='6.5' />
+    </svg>
+  );
+}
+
+export { Instagram };

src/components/assets/icons/Slack.tsx

@@ -0,0 +1,29 @@
+function Slack({ className, ...rest }: { className?: string }) {
+  return (
+    <svg
+      className={className}
+      xmlns='http://www.w3.org/2000/svg'
+      width='24'
+      height='24'
+      viewBox='0 0 24 24'
+      fill='none'
+      stroke='currentColor'
+      stroke-width='2'
+      stroke-linecap='round'
+      stroke-linejoin='round'
+      aria-hidden='true'
+      {...rest}
+    >
+      <rect width='3' height='8' x='13' y='2' rx='1.5' />
+      <path d='M19 8.5V10h1.5A1.5 1.5 0 1 0 19 8.5' />
+      <rect width='3' height='8' x='8' y='14' rx='1.5' />
+      <path d='M5 15.5V14H3.5A1.5 1.5 0 1 0 5 15.5' />
+      <rect width='8' height='3' x='14' y='13' rx='1.5' />
+      <path d='M15.5 19H14v1.5a1.5 1.5 0 1 0 1.5-1.5' />
+      <rect width='8' height='3' x='2' y='8' rx='1.5' />
+      <path d='M8.5 5H10V3.5A1.5 1.5 0 1 0 8.5 5' />
+    </svg>
+  );
+}
+
+export { Slack };

src/components/layout/Footer.tsx

@@ -51,6 +51,17 @@ function Footer() {
               </ul>
             </nav>
           </div>
+          <div>
+            <h4>{t('socialMedia')}</h4>
+            <ul>
+              <li>
+                <Button asChild variant='ghost' size='icon'>
+                  <ExternalLink href='https://hackerspace-ntnu.slack.com/'></ExternalLink>
+                </Button>
+              </li>
+              <li></li>
+            </ul>
+          </div>
         </div>
       </div>
     </footer>