feat: finished footer

hackerspace-ntnu · Jan 20, 2024 · b18c270 · b18c270
1 parent 98372da
commit b18c270
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 50 deletions.
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -7,5 +7,6 @@
     ["cx\\(([^)]*)\\)", "(?:'|\"|`)([^']*)(?:'|\"|`)"]
   ],
   "i18n-ally.localesPaths": ["messages"],
-  "i18n-ally.keystyle": "nested"
+  "i18n-ally.keystyle": "nested",
+  "codeQL.githubDatabase.download": "never"
 }
diff --git a/messages/en.json b/messages/en.json
@@ -15,11 +15,17 @@
     "profile": "Profile",
     "signIn": "Sign in",
     "links": "Links",
+    "utilities": "Utilities",
+    "haveYouFoundA": "Have you found a",
+    "utilitiesDescription": "Feel free to send a <MailLink></MailLink> to DevOps or use the #dev-public channel on <SlackLink>Slack</SlackLink>! You can also report errors or suggest improvements on <GithubLink>GitHub</GithubLink>.",
+    "openingHours": "Opening hours",
+    "allWeekdays": "Mon-Fri",
     "socialMedia": "Social media",
-    "visitOurSlack": "Visit our Slack",
-    "visitOurFacebook": "Visit our Facebook",
-    "visitOurGithub": "Visit our Github",
-    "visitOurInstagram": "Visit our Instagram",
+    "sendAnEmail": "Send an email",
+    "visitSlack": "Visit Slack",
+    "visitFacebook": "Visit Facebook",
+    "visitGithub": "Visit Github",
+    "visitInstagram": "Visit our Instagram",
     "NTNUIDI": "NTNU Department of Computer Science",
     "NTNUIDIURL": "https://www.ntnu.edu/idi",
     "NTNUKiD": "The working life network KID",

diff --git a/messages/no.json b/messages/no.json
@@ -15,11 +15,17 @@
     "profile": "Profil",
     "signIn": "Logg inn",
     "links": "Lenker",
+    "utilities": "Verktøy",
+    "haveYouFoundA": "Har du funnet en",
+    "utilitiesDescription": "Send gjerne en <MailLink></MailLink> til DevOps eller bruk #dev-public kanalen på <SlackLink>Slack</SlackLink>! Du kan også rapportere feil eller gi oss forslag til forbedringer på <GithubLink>GitHub</GithubLink>.",
+    "openingHours": "Åpningstider",
+    "allWeekdays": "Mandag - Fredag",
     "socialMedia": "Sosiale medier",
-    "visitOurSlack": "Besøk vår Slack",
-    "visitOurFacebook": "Besøk vår Facebook",
-    "visitOurGithub": "Besøk vår Github",
-    "visitOurInstagram": "Besøk vår Instagram",
+    "sendAnEmail": "Send en e-post",
+    "visitSlack": "Besøk Slack",
+    "visitFacebook": "Besøk Facebook",
+    "visitGithub": "Besøk Github",
+    "visitInstagram": "Besøk Instagram",
     "NTNUIDI": "NTNU Institutt for datateknologi og informatikk",
     "NTNUIDIURL": "https://www.ntnu.no/idi",
     "copyright": "Opphavsrett",

diff --git a/src/components/layout/Footer.tsx b/src/components/layout/Footer.tsx
@@ -1,3 +1,4 @@
+import { Bug, Mail } from 'lucide-react';
 import { useTranslations } from 'next-intl';
 import ExternalLink from 'next/link';
 
@@ -22,10 +23,17 @@ function Footer() {
           <div>
             <LogoLink className='justify-start' />
             <p className='ml-2 leading-tight'>
+              <strong>{t('openingHours')}:</strong>
+              <br />
+              <span>{t('allWeekdays')}, 10:15-18:00</span>
+              <br />
+              <br />
               <Button asChild variant='link' size='none'>
                 <ExternalLink
                   href='https://use.mazemap.com/#v=1&zlevel=2&center=10.404406,63.415418&zoom=18&sharepoitype=poi&sharepoi=1000391296&campusid=1'
                   prefetch={false}
+                  target='_blank'
+                  rel='noopener noreferrer'
                 >
                   Realfagbygget, A-blokka
                 </ExternalLink>
@@ -35,37 +43,27 @@ function Footer() {
               7034 Trondheim
             </p>
           </div>
-          <div>
-            <h4>{t('links')}</h4>
-            <nav>
-              <ul>
-                <li>
-                  <Button asChild variant='nav' size='none'>
-                    <Link href='/news'>{t('news')}</Link>
-                  </Button>
-                </li>
-                <li>
-                  <Button asChild variant='nav' size='none'>
-                    <Link href='/events'>{t('events')}</Link>
-                  </Button>
-                </li>
-                <li>
-                  <Button asChild variant='nav' size='none'>
-                    <Link href='/about'>{t('about')}</Link>
-                  </Button>
-                </li>
-              </ul>
-            </nav>
-          </div>
           <div>
             <h4>{t('socialMedia')}</h4>
-            <ul className='flex flex-row text-foreground/80'>
+            <ul className='grid-cols-2-auto sm:grid-cols-3-auto grid grid-flow-row justify-start text-foreground/80 xl:grid-flow-col xl:grid-cols-none'>
+              <li>
+                <Button asChild variant='ghost' size='sm-icon'>
+                  <ExternalLink
+                    href='mailto:[email protected]'
+                    aria-label={t('sendAnEmail')}
+                  >
+                    <Mail className='h-4 w-4' />
+                  </ExternalLink>
+                </Button>
+              </li>
               <li>
                 <Button asChild variant='ghost' size='sm-icon'>
                   <ExternalLink
                     href='https://hackerspace-ntnu.slack.com/'
                     prefetch={false}
-                    aria-label={t('visitOurSlack')}
+                    aria-label={t('visitSlack')}
+                    target='_blank'
+                    rel='noopener noreferrer'
                   >
                     <Slack className='h-4 w-4' />
                   </ExternalLink>
@@ -76,7 +74,9 @@ function Footer() {
                   <ExternalLink
                     href='https://www.facebook.com/hackerspacentnu'
                     prefetch={false}
-                    aria-label={t('visitOurFacebook')}
+                    aria-label={t('visitFacebook')}
+                    target='_blank'
+                    rel='noopener noreferrer'
                   >
                     <Facebook className='h-4 w-4' />
                   </ExternalLink>
@@ -87,7 +87,9 @@ function Footer() {
                   <ExternalLink
                     href='https://github.com/hackerspace-ntnu/'
                     prefetch={false}
-                    aria-label={t('visitOurGithub')}
+                    aria-label={t('visitGithub')}
+                    target='_blank'
+                    rel='noopener noreferrer'
                   >
                     <Github className='h-4 w-4' />
                   </ExternalLink>
@@ -98,26 +100,113 @@ function Footer() {
                   <ExternalLink
                     href='https://www.instagram.com/hackerspacentnu/'
                     prefetch={false}
-                    aria-label={t('visitOurInstagram')}
+                    aria-label={t('visitInstagram')}
+                    target='_blank'
+                    rel='noopener noreferrer'
                   >
                     <Instagram className='h-4 w-4' />
                   </ExternalLink>
                 </Button>
               </li>
             </ul>
           </div>
+          <div>
+            <h4>{t('links')}</h4>
+            <nav>
+              <ul className='mt-2 space-y-1.5'>
+                <li>
+                  <Button asChild variant='nav' size='none'>
+                    <Link href='/news'>{t('news')}</Link>
+                  </Button>
+                </li>
+                <li>
+                  <Button asChild variant='nav' size='none'>
+                    <Link href='/events'>{t('events')}</Link>
+                  </Button>
+                </li>
+                <li>
+                  <Button asChild variant='nav' size='none'>
+                    <Link href='/about'>{t('about')}</Link>
+                  </Button>
+                </li>
+              </ul>
+            </nav>
+          </div>
+          <div>
+            <h4>{t('utilities')}</h4>
+            <p className='[&:not(:first-child)]:mt-0'>
+              <Button asChild variant='link' size='none'>
+                <Link href='/'>{t('signIn')}</Link>
+              </Button>
+              <br />
+              {t('haveYouFoundA')} <Bug className='inline h-4 w-4' />?
+              <br />
+              {t.rich('utilitiesDescription', {
+                MailLink: () => (
+                  <Button className='inline' asChild variant='link' size='none'>
+                    <ExternalLink
+                      href='mailto:[email protected]'
+                      aria-label={t('sendAnEmail')}
+                    >
+                      <Mail className='inline h-4 w-4' />
+                    </ExternalLink>
+                  </Button>
+                ),
+                SlackLink: (children) => (
+                  <Button asChild variant='link' size='none'>
+                    <ExternalLink
+                      href='https://hackerspace-ntnu.slack.com/archives/CDK99FYTY'
+                      prefetch={false}
+                      aria-label={t('visitSlack')}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    >
+                      {children}
+                    </ExternalLink>
+                  </Button>
+                ),
+                GithubLink: (children) => (
+                  <Button asChild variant='link' size='none'>
+                    <ExternalLink
+                      href='https://github.com/hackerspace-ntnu/website-frontend/issues'
+                      prefetch={false}
+                      aria-label={t('visitGithub')}
+                      target='_blank'
+                      rel='noopener noreferrer'
+                    >
+                      {children}
+                    </ExternalLink>
+                  </Button>
+                ),
+              })}
+            </p>
+          </div>
         </div>
         <nav className='py-20'>
           <ul className='flex flex-col justify-center gap-6 sm:flex-row md:gap-10 lg:gap-20 xl:gap-40'>
             <li>
-              <ExternalLink href={t('NTNUIDIURL')} prefetch={false}>
-                <IDILogo className='p-6' title={t('NTNUIDI')} />
-              </ExternalLink>
+              <Button asChild variant='none' size='none'>
+                <ExternalLink
+                  href={t('NTNUIDIURL')}
+                  prefetch={false}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  <IDILogo className='p-6' title={t('NTNUIDI')} />
+                </ExternalLink>
+              </Button>
             </li>
             <li>
-              <ExternalLink href='https://www.ntnu.no/ie/kid/' prefetch={false}>
-                <KiDLogo className='p-6' title={t('NTNUKiD')} />
-              </ExternalLink>
+              <Button asChild variant='none' size='none'>
+                <ExternalLink
+                  href='https://www.ntnu.no/ie/kid/'
+                  prefetch={false}
+                  target='_blank'
+                  rel='noopener noreferrer'
+                >
+                  <KiDLogo className='p-6' title={t('NTNUKiD')} />
+                </ExternalLink>
+              </Button>
             </li>
           </ul>
         </nav>

diff --git a/src/components/layout/LogoLink.tsx b/src/components/layout/LogoLink.tsx
@@ -22,8 +22,8 @@ function LogoLink({
       size='none'
     >
       <Link href='/' aria-label={t('home')} onClick={onClick}>
-        <Logo className='h-6 w-6 md:h-8 md:w-8 lg:h-10 lg:w-10' />
-        <span className='text-md font-montserrat font-bold md:text-lg lg:text-2xl'>
+        <Logo className='h-6 w-6 md:h-8 md:w-8 xl:h-10 xl:w-10' />
+        <span className='text-md font-montserrat font-bold md:text-lg xl:text-2xl'>
           HACKERSPACE
         </span>
       </Link>

diff --git a/src/components/layout/Main.tsx b/src/components/layout/Main.tsx
@@ -11,7 +11,10 @@ type Props = {
 function Main({ children, mainClassName, className }: Props) {
   return (
     <main
-      className={cx('flex h-full w-full flex-1 justify-center', mainClassName)}
+      className={cx(
+        'flex h-full w-full flex-grow justify-center',
+        mainClassName,
+      )}
     >
       <div
         className={cx(

diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
@@ -1,4 +1,5 @@
 import { Slot } from '@radix-ui/react-slot';
+
 import * as React from 'react';
 
 import { type VariantProps, cva } from '@/lib/utils';

diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -10,11 +10,9 @@ export default {
         inter: ['var(--font-inter)', ...fontFamily.sans],
         montserrat: ['var(--font-montserrat)', ...fontFamily.sans],
       },
-      container: {
-        screens: {
-          xs: '480px',
-          '2xl': '1400px',
-        },
+      screens: {
+        xs: '480px',
+        '2xl': '1400px',
       },
       colors: {
         border: 'hsl(var(--border))',
@@ -56,6 +54,10 @@ export default {
         md: 'calc(var(--radius) - 2px)',
         sm: 'calc(var(--radius) - 4px)',
       },
+      gridTemplateColumns: {
+        '3-auto': 'repeat(3, auto)',
+        '2-auto': 'repeat(2, auto)',
+      },
     },
   },
   plugins: [