feat: Mark internal events with badge

Author: ZeroWave022

src/app/[locale]/(default)/events/[id]/loading.tsx

@@ -1,7 +1,6 @@
-import { Avatar, AvatarImage } from '@/components/ui/Avatar';
 import { Separator } from '@/components/ui/Separator';
 import { Skeleton } from '@/components/ui/Skeleton';
-import { ArrowLeftIcon, CalendarIcon, MapPinIcon } from 'lucide-react';
+import { CalendarIcon, MapPinIcon } from 'lucide-react';
 
 export default function EventDetailsLoading() {
   return (

src/app/[locale]/(default)/events/[id]/page.tsx

@@ -6,6 +6,7 @@ import { Separator } from '@/components/ui/Separator';
 import { events } from '@/mock-data/events';
 import { CalendarIcon, MapPinIcon } from 'lucide-react';
 import { notFound } from 'next/navigation';
+import { Badge } from '@/components/ui/Badge';
 
 export async function generateMetadata({
   params,
@@ -57,6 +58,7 @@ export default async function EventDetailsPage({
       <h1 className='my-4'>{event.title}</h1>
       <h3>{event.subheader}</h3>
       <div className='mt-4 space-y-4'>
+        {event.internal && <Badge className='rounded-full'>Internal</Badge>}
         <div className='flex items-center gap-2'>
           <CalendarIcon className='h-8 w-8' />
           {

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

@@ -41,6 +41,7 @@ export default async function EventsPage({
           imagePath={event.imagePath}
           startTime={new Date(event.startTime)}
           endTime={new Date(event.endTime)}
+          internal={event.internal}
           locale={locale}
           _active
         />
@@ -57,6 +58,7 @@ export default async function EventsPage({
             imagePath={event.imagePath}
             startTime={new Date(event.startTime)}
             endTime={new Date(event.endTime)}
+            internal={event.internal}
             locale={locale}
             wrapperClassName='lg:last:odd:col-span-2'
             cardClassName='h-full'
@@ -75,6 +77,7 @@ export default async function EventsPage({
             imagePath={event.imagePath}
             startTime={new Date(event.startTime)}
             endTime={new Date(event.endTime)}
+            internal={event.internal}
             locale={locale}
             wrapperClassName='lg:last:odd:col-span-2'
             cardClassName='h-full'

src/components/events/EventCard.tsx

@@ -8,6 +8,7 @@ import {
 } from '@/components/ui/Card';
 
 import { Avatar, AvatarImage } from '@/components/ui/Avatar';
+import { Badge } from '@/components/ui/Badge';
 import { cx } from '@/lib/utils';
 import { getTranslations } from 'next-intl/server';
 import Link from 'next/link';
@@ -20,6 +21,7 @@ type EventCardProps = {
   imagePath?: string;
   startTime: Date;
   endTime: Date;
+  internal: boolean;
   locale: string;
   wrapperClassName?: string;
   cardClassName?: string;
@@ -62,6 +64,9 @@ async function EventCard(props: EventCardProps) {
         <CardHeader>
           <CardTitle>{props.title}</CardTitle>
           <CardDescription>{props.subheader}</CardDescription>
+          {props.internal && (
+            <Badge className='mx-auto w-fit rounded-full'>Internal</Badge>
+          )}
         </CardHeader>
         <CardContent className='flex flex-col-reverse items-center gap-2 md:flex-row md:justify-between'>
           <p>{props.description}</p>

src/mock-data/events.ts

@@ -9,6 +9,7 @@ export const events = [
     endTime: '2025-01-12T19:00:00+02:00',
     imagePath: '/events.jpg',
     location: 'Hackerspace verkstedet',
+    internal: true,
   },
   {
     id: 2,
@@ -21,6 +22,7 @@ export const events = [
     endTime: '2025-01-14T20:30:00+02:00',
     imagePath: '/events.jpg',
     location: 'R50',
+    internal: false,
   },
   {
     id: 3,
@@ -32,6 +34,7 @@ export const events = [
     endTime: '2025-01-16T17:30:00+02:00',
     imagePath: '/events.jpg',
     location: 'Smia',
+    internal: false,
   },
   {
     id: 4,
@@ -44,6 +47,7 @@ export const events = [
     endTime: '2025-01-22T21:00:00+02:00',
     imagePath: '/events.jpg',
     location: 'Hackerspace verkstedet',
+    internal: false,
   },
   {
     id: 5,
@@ -56,6 +60,7 @@ export const events = [
     endTime: '2025-01-22T19:30:00+02:00',
     imagePath: '/events.jpg',
     location: 'Hackerspace verkstedet',
+    internal: false,
   },
   {
     id: 6,
@@ -67,6 +72,7 @@ export const events = [
     endTime: '2024-10-09T17:30:00+02:00',
     imagePath: '/events.jpg',
     location: 'R51',
+    internal: true,
   },
   {
     id: 7,
@@ -78,6 +84,7 @@ export const events = [
     endTime: '2024-10-11T19:00:00+02:00',
     imagePath: '/events.jpg',
     location: 'Hackerspace verkstedet',
+    internal: true,
   },
   {
     id: 8,
@@ -90,5 +97,6 @@ export const events = [
     endTime: '2024-10-14T20:00:00+02:00',
     imagePath: '/events.jpg',
     location: 'R50',
+    internal: false,
   },
 ];