feat: members page

.gitignore

@@ -5,6 +5,9 @@
 /.next/
 next-env.d.ts
 
+# vscode
+.vscode/
+
 # misc
 .DS_Store
 

messages/en.json

@@ -29,6 +29,7 @@
     "events": "Events",
     "storage": "Storage",
     "about": "About",
+    "members": "Members",
     "changeLocale": "Change language",
     "toggleTheme": "Toggle theme",
     "light": "Light",
@@ -47,7 +48,9 @@
     "visitSlack": "Visit Slack",
     "visitFacebook": "Visit Facebook",
     "visitGithub": "Visit Github",
+    "visitLinkedin": "Visit Linkedin",
     "visitInstagram": "Visit our Instagram",
+    "discordTag": "Copy the discord tag",
     "NTNUIDI": "NTNU Department of Computer Science",
     "NTNUIDIURL": "https://www.ntnu.edu/idi",
     "NTNUKiD": "The working life network KID",
@@ -61,6 +64,21 @@
     "readTime": "{count, plural, =0 {less than a minute} one {# minute} other {# minutes}} read",
     "views": "Views"
   },
+  "members": {
+    "title": "Members",
+    "internalMember": "This is an internal member",
+    "backToMember": "Back to members",
+    "searchPlaceholder": "Search for a member...",
+    "skills": {
+      "arduinoMicrocontrollers": "Arduino and microcontrollers",
+      "rasberryPi": "Rasberry Pi",
+      "linuxTerminal": "Linux/Terminal",
+      "workshop": "Workshop",
+      "3dPrinting": "3D printing",
+      "solderingSmallElectronics": "Soldering and small electronics",
+      "laserCutting": "Laser cutting"
+    }
+  },
   "storage": {
     "title": "Storage",
     "searchPlaceholder": "Search for product...",

messages/no.json

@@ -29,6 +29,7 @@
     "events": "Hendelser",
     "storage": "Lager",
     "about": "Om oss",
+    "members": "Medlemmer",
     "changeLocale": "Bytt språk",
     "toggleTheme": "Bytt tema",
     "light": "Lys",
@@ -47,7 +48,9 @@
     "visitSlack": "Besøk Slack",
     "visitFacebook": "Besøk Facebook",
     "visitGithub": "Besøk Github",
+    "visitLinkedin": "Besøk Linkedin",
     "visitInstagram": "Besøk Instagram",
+    "dicordTag": "Kopier Discordtaggen",
     "NTNUIDI": "NTNU Institutt for datateknologi og informatikk",
     "NTNUIDIURL": "https://www.ntnu.no/idi",
     "NTNUKiD": "Arbeidslivsnettverket KID",
@@ -61,6 +64,21 @@
     "readTime": "{count, plural, =0 {mindre enn ett minutt} one {# minutt} other {# minutter}} lesing",
     "views": "Visninger"
   },
+  "members": {
+    "title": "Medlemmer",
+    "internalMember": "Dette er et internt medlem",
+    "backToMember": "Tilbake til medlemmer",
+    "searchPlaceholder": "Søk etter et medlem...",
+    "skills": {
+      "arduinoMicrocontrollers": "Arduino og mikrokontrollere",
+      "rasberryPi": "Rasberry Pi",
+      "linuxTerminal": "Linux/Terminal",
+      "workshop": "Verksted",
+      "3dPrinting": "3D printing",
+      "solderingSmallElectronics": "Lodding og småelektronikk",
+      "laserCutting": "Laserkutting"
+    }
+  },
   "storage": {
     "title": "Lager",
     "searchPlaceholder": "Søk etter produkt...",

package.json

@@ -19,63 +19,65 @@
     "s3:start": "docker-compose up s3"
   },
   "dependencies": {
-    "@aws-sdk/client-s3": "^3.637.0",
+    "@aws-sdk/client-s3": "^3.679.0",
     "@hookform/resolvers": "^3.9.0",
     "@lucia-auth/adapter-drizzle": "^1.1.0",
-    "@radix-ui/react-avatar": "^1.1.0",
-    "@radix-ui/react-dialog": "^1.1.1",
-    "@radix-ui/react-dropdown-menu": "^2.1.1",
+    "@radix-ui/react-avatar": "^1.1.1",
+    "@radix-ui/react-dialog": "^1.1.2",
+    "@radix-ui/react-dropdown-menu": "^2.1.2",
     "@radix-ui/react-label": "^2.1.0",
-    "@radix-ui/react-popover": "^1.1.1",
-    "@radix-ui/react-select": "^2.1.1",
+    "@radix-ui/react-popover": "^1.1.2",
+    "@radix-ui/react-select": "^2.1.2",
     "@radix-ui/react-separator": "^1.1.0",
     "@radix-ui/react-slot": "^1.1.0",
-    "@radix-ui/react-tooltip": "^1.1.1",
+    "@radix-ui/react-tooltip": "^1.1.3",
     "@t3-oss/env-nextjs": "^0.10.1",
-    "@tanstack/react-query": "^5.53.1",
-    "@trpc/client": "^11.0.0-rc.490",
-    "@trpc/react-query": "^11.0.0-rc.490",
-    "@trpc/server": "^11.0.0-rc.490",
-    "autoprefixer": "^10.4.19",
+    "@tanstack/react-query": "^5.59.16",
+    "@trpc/client": "^11.0.0-rc.593",
+    "@trpc/react-query": "^11.0.0-rc.593",
+    "@trpc/server": "^11.0.0-rc.593",
+    "autoprefixer": "^10.4.20",
     "client-only": "^0.0.1",
     "cmdk": "1.0.0",
-    "country-flag-icons": "^1.5.12",
+    "country-flag-icons": "^1.5.13",
     "cva": "^1.0.0-beta.1",
     "date-fns": "^4.1.0",
     "drizzle-orm": "^0.33.0",
-    "lucia": "^3.2.0",
+    "lucia": "^3.2.2",
     "lucide-react": "^0.396.0",
-    "next": "^14.2.10",
-    "next-intl": "^3.18.1",
+    "next": "^14.2.16",
+    "next-intl": "^3.23.5",
     "next-sitemap": "^4.2.3",
     "next-themes": "^0.3.0",
-    "nuqs": "^1.17.4",
-    "postgres": "^3.4.4",
+    "nuqs": "^1.20.0",
+    "postgres": "^3.4.5",
     "react": "^18.3.1",
     "react-day-picker": "8.10.1",
     "react-dom": "^18.3.1",
-    "react-hook-form": "^7.53.0",
+    "react-hook-form": "^7.53.1",
     "reading-time": "^1.5.0",
     "server-only": "^0.0.1",
-    "sharp": "^0.33.4",
+    "sharp": "^0.33.5",
+    "sonner": "^1.5.0",
     "superjson": "^2.2.1",
-    "tailwind-merge": "^2.5.2",
+    "tailwind-merge": "^2.5.4",
+    "website-next": "file:",
     "zod": "^3.23.8"
   },
   "devDependencies": {
     "@biomejs/biome": "1.8.3",
     "@fluid-tailwind/tailwind-merge": "^0.0.2",
-    "@types/node": "^20.14.8",
-    "@types/react": "^18.3.3",
-    "@types/react-dom": "^18.3.0",
-    "drizzle-kit": "^0.24.1",
+    "@types/node": "^20.17.1",
+    "@types/react": "^18.3.12",
+    "@types/react-dom": "^18.3.1",
+    "drizzle-kit": "^0.24.2",
     "fluid-tailwind": "^1.0.3",
-    "lefthook": "^1.7.14",
-    "postcss": "^8.4.38",
+    "lefthook": "^1.8.1",
+    "postcss": "^8.4.47",
     "tailwind-scrollbar": "^3.1.0",
-    "tailwindcss": "^3.4.4",
+    "tailwindcss": "^3.4.14",
     "tailwindcss-animate": "^1.0.7",
-    "typescript": "^5.5.0"
+    "typescript": "^5.6.3"
   },
   "packageManager": "[email protected]"
 }

src/app/[locale]/(default)/members/(header)/layout.tsx

@@ -0,0 +1,28 @@
+import { useTranslations } from "next-intl";
+import { unstable_setRequestLocale } from "next-intl/server";
+import { SearchBar } from "@/components/composites/SearchBar";
+
+type MemberHeaderLayoutProps = {
+  children: React.ReactNode;
+  params: { locale: string };
+};
+
+export default function MemberHeaderLayout({
+  children,
+  params: { locale },
+}: MemberHeaderLayoutProps) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations("members");
+  return (
+    <>
+      <h1 className="my-4 text-center">{t("title")}</h1>
+      <div className="my-4 flex flex-col justify-center gap-2 lg:flex-row">
+        <SearchBar
+          className="lg:max-w-2xl"
+          placeholder={t("searchPlaceholder")}
+        />
+      </div>
+      {children}
+    </>
+  );
+}

src/app/[locale]/(default)/members/(header)/loading.tsx

@@ -0,0 +1,15 @@
+import { PaginationCarouselSkeleton } from '@/components/composites/PaginationCarouselSkeleton';
+import { CardGridSkeleton } from '@/components/news/CardGridSkeleton';
+import { ItemGridSkeleton } from '@/components/news/ItemGridSkeleton';
+import { Separator } from '@/components/ui/Separator';
+
+export default function NewsSkeleton() {
+  return (
+    <>
+      <CardGridSkeleton />
+      <Separator className='my-6' />
+      <ItemGridSkeleton />
+      <PaginationCarouselSkeleton className='my-6' />
+    </>
+  );
+}

src/app/[locale]/(default)/members/(header)/page.tsx

@@ -0,0 +1,51 @@
+import { memberMockData as memberData } from '@/mock-data/member';
+import { useTranslations } from 'next-intl';
+import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
+import { createSearchParamsCache, parseAsInteger } from 'nuqs/parsers';
+import { Suspense } from 'react';
+
+import { PaginationCarousel } from '@/components/composites/PaginationCarousel';
+import { ItemGrid } from '@/components/members/ItemGrid';
+import { ItemGridSkeleton } from '@/components/members/ItemGridSkeleton';
+import { Separator } from '@/components/ui/Separator';
+
+export async function generateMetadata({
+  params: { locale },
+}: {
+  params: { locale: string };
+}) {
+  const t = await getTranslations({ locale, namespace: 'layout' });
+
+  return {
+    title: t('members'),
+  };
+}
+
+export default function MembersPage({
+  params: { locale },
+  searchParams,
+}: {
+  params: { locale: string };
+  searchParams: Record<string, string | string[] | undefined>;
+}) {
+  unstable_setRequestLocale(locale);
+  const t = useTranslations('ui');
+  const searchParamsCache = createSearchParamsCache({
+    [t('page')]: parseAsInteger.withDefault(1),
+  });
+
+  const { [t('page')]: page = 1 } = searchParamsCache.parse(searchParams);
+  // TODO: Button to create new article should only be visible when logged in
+  return (
+    <>
+      <Separator className='my-6' />
+      <Suspense key={page} fallback={<ItemGridSkeleton />}>
+        <ItemGrid page={page} />
+      </Suspense>
+      <PaginationCarousel
+        className='my-6'
+        totalPages={Math.ceil(memberData.length / 12)}
+      />
+    </>
+  );
+}

src/app/[locale]/(default)/members/[member]/page.tsx

@@ -0,0 +1,90 @@
+import { memberMockData as memberData } from '@/mock-data/member';
+import { unstable_setRequestLocale } from 'next-intl/server';
+import { notFound } from 'next/navigation';
+import { ArrowLeftIcon } from 'lucide-react';
+//import { useRouter } from 'next/navigation';
+import { MemberViewCard } from '@/components/members/MemberViewCard';
+import { SkillCard } from '@/components/members/SkillCard';
+import { Link } from '@/lib/locale/navigation';
+import { Button } from '@/components/ui/Button';
+import { useTranslations } from 'next-intl';
+
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { member: string };
+}) {
+  const member = memberData.find(
+    (member) => member.id === Number(params.member),
+  );
+
+  return {
+    title: member?.name,
+  };
+}
+
+export default function memberPage({
+  params,
+}: {
+  params: { locale: string; member: string };
+}) {
+  unstable_setRequestLocale(params.locale);
+  const t = useTranslations('members');
+
+  const member = memberData.find(
+    (member) => member.id === Number(params.member),
+  );
+  if (!member) {
+    return notFound();
+  }
+
+  return (
+    <>
+    <div className='relative'>
+      <h2 className='mx-auto mt-96 text-center text-3xl sm:text-4xl'>{member.name}</h2>
+        <Button asChild variant='ghost'>
+          <Link
+            className='-translate-y-1/2 absolute top-1/2 left-0 flex gap-2'
+            href='/members'
+            aria-label={t('backToMember')}
+          >
+            <ArrowLeftIcon aria-hidden='true' />
+            <span className='hidden sm:inline'>{t('backToMember')}</span>
+          </Link>
+        </Button>
+        </div>
+
+        <div className='my-10 flex flex-col items-center space-y-5'>
+        <MemberViewCard
+          key={member.id}
+          id={member.id}
+          internal={member.internal}
+          name={member.name}
+          group={member.group}
+          photoUrl={member.photoUrl}
+          bio={member.bio}
+          mail={member.mail}
+          instagram={member.instagram}
+          discord={member.discord}
+          github={member.github}
+          linkedin={member.linkedin}
+        />
+        <SkillCard 
+        key={member.id}
+        id={member.id}
+        internal={member.internal}
+        name={member.name}
+        group={member.group}
+        photoUrl={member.photoUrl}
+        bio={member.bio}
+        mail={member.mail}
+        instagram={member.instagram}
+        discord={member.discord}
+        github={member.github}
+        linkedin={member.linkedin}
+        />
+      </div>
+    </>
+  );
+}

src/app/[locale]/layout.tsx

@@ -1,4 +1,5 @@
 import { RootProviders } from '@/components/providers/RootProviders';
+import { Toaster } from 'sonner';
 import { routing } from '@/lib/locale';
 import { cx } from '@/lib/utils';
 import type { Viewport } from 'next';
@@ -87,6 +88,7 @@ export default function LocaleLayout({
             {children}
           </div>
         </RootProviders>
+        <Toaster/>
       </body>
     </html>
   );