add: footnote (#77)

* add: footnote * style: canvis proposats per en @marcfranquesa Co-authored-by: marcfranquesa <marc.franquesam@gmail.com> * style: smaller text in footer --------- Co-authored-by: marcfranquesa <marc.franquesam@gmail.com>
data-students · Mar 24, 2024 · 9228816 · 9228816
1 parent d34a9c4
commit 9228816
Show file tree

Hide file tree

Showing 3 changed files with 131 additions and 8 deletions.
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
@@ -2,6 +2,7 @@ import { cn } from "@/lib/utils"
 import "@/styles/globals.css"
 import { Inter } from "next/font/google"
 import Navbar from "@/components/Navbar"
+import Footer from "@/components/Footer"
 import { Toaster } from "@/components/ui/Toaster"
 import Providers from "@/components/Providers"
 
@@ -13,7 +14,7 @@ export const metadata = {
 
 const inter = Inter({ subsets: ["latin"] }) // TODO: Fer servir la font de l'AED
 
-function RootLayout({
+export default async function RootLayout({
  children,
  authModal,
 }: {
@@ -30,20 +31,22 @@ function RootLayout({
  >
  <body className="min-h-screen pt-12 bg-slate-50 antialiased">
  <Providers>
- {/* @ts-expect-error server component */}
- <Navbar />
-
  {authModal}
 
- <div className="container max-w-7xl mx-auto h-full pt-12">
- {children}
+ <div className="min-h-screen">
+ {/* @ts-expect-error server component */}
+ <Navbar />
+ <div className="container max-w-7xl mx-auto h-full pt-12">
+ {children}
+ </div>
  </div>
 
  <Toaster />
+
+ {/* @ts-expect-error server component */}
+ <Footer />
  </Providers>
  </body>
  </html>
  )
 }
-
-export default RootLayout
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
@@ -0,0 +1,114 @@
+import Link from "next/link"
+import { Icons } from "@/components/Icons"
+import { db } from "@/lib/db"
+
+const Footer = async () => {
+ const subjects = await db.subject.findMany({
+ select: {
+ acronym: true,
+ semester: true,
+ },
+ orderBy: {
+ semester: "asc",
+ },
+ })
+
+ const unique_semesters = Array.from(
+ new Set(subjects.map((subject) => subject.semester)),
+ )
+
+ return (
+ <footer className="bg-zinc-900 text-zinc-100">
+ <div className="grid grid-cols-1 md:grid-cols-3 gap-y-4 md:gap-x-4 p-6">
+ <div className="overflow-hidden h-full mb-4 col-span-1">
+ <Link
+ href="https://github.com/data-students/apunts-dades/"
+ className="flex items-center h-fit rounded-lg border border-gray-200 hover:bg-zinc-800 active:scale-95 transition-colors focus:outline-none focus:ring-2 focus:ring-slate-400 focus:ring-offset-2 disabled:opacity-50 dark:focus:ring-slate-400 disabled:pointer-events-none dark:focus:ring-offset-slate-900"
+ >
+ <Icons.github className="w-16 h-16 px-2" />
+ <h1 className="font-extrabold text-2xl md:text-4xl">
+ Contribueix!
+ </h1>
+ </Link>
+ <Link
+ href="https://aed.cat/"
+ className="text-zinc-100 flex items-center h-fit mt-4"
+ >
+ <Icons.logo className="ml-2 w-8 h-8 bg-zinc-100 rounded-full" />
+ <p className="ml-2 font-medium text-m md:text-l">
+ Visita la nostra web
+ </p>
+ </Link>
+ <div className="mx-2">
+ <p className="font-medium text-m md:text-l mt-1">
+ I comparteix les nostres xarxes socials
+ </p>
+ <div className="flex items-center h-fit mt-1">
+ <Link
+ href="https://twitter.com/datastudents?lang=ca"
+ className="text-zinc-100 ml-4"
+ >
+ <Icons.twitter className="w-6 h-6" />
+ </Link>
+ <Link
+ href="https://www.linkedin.com/company/data-students/"
+ className="text-zinc-100 ml-4"
+ >
+ <Icons.linkedin className="w-6 h-6" />
+ </Link>
+ <Link
+ href="https://www.instagram.com/datastudents/"
+ className="text-zinc-100 ml-4"
+ >
+ <Icons.instagram className="w-6 h-6" />
+ </Link>
+ <Link
+ href="https://www.youtube.com/@datastudents"
+ className="text-zinc-100 ml-4"
+ >
+ <Icons.youtube className="w-6 h-6" />
+ </Link>
+ </div>
+ </div>
+ </div>
+ <div className="overflow-hidden h-fit col-span-2">
+ <div className="grid grid-cols-2 md:grid-cols-8 gap-y-4 md:gap-x-4">
+ {unique_semesters.map((semester, index) => {
+ return (
+ <div
+ key={index}
+ className="overflow-hidden h-fit mb-2 px-2 divide-y"
+ >
+ <div>
+ <p className="font-black text-m md:text-l">{semester}</p>
+ </div>
+ <div>
+ {subjects
+ .filter(
+ (subject): boolean => subject.semester === semester,
+ )
+ .map((subject, index) => {
+ return (
+ <Link
+ key={index}
+ href={`/${subject.acronym}`}
+ className="text-zinc-100"
+ >
+ <p className="font-medium text-s md:text-m">
+ {subject.acronym}
+ </p>
+ </Link>
+ )
+ })}
+ </div>
+ </div>
+ )
+ })}
+ </div>
+ </div>
+ </div>
+ </footer>
+ )
+}
+
+export default Footer
diff --git a/src/components/Icons.tsx b/src/components/Icons.tsx
@@ -1,4 +1,5 @@
 import { LucideProps, MessageSquare, User } from "lucide-react"
+import { Twitter, Linkedin, Youtube, Github, Instagram } from "lucide-react"
 
 export const Icons = {
  user: User,
@@ -101,5 +102,10 @@ z"
  <path d="M1 1h22v22H1z" fill="none" />
  </svg>
  ),
+ twitter: Twitter,
+ linkedin: Linkedin,
+ youtube: Youtube,
+ github: Github,
+ instagram: Instagram,
  commentReply: MessageSquare,
 }