initial design

apps/frontend/package.json

@@ -12,9 +12,10 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@radix-ui/react-avatar": "^1.1.0",
     "class-variance-authority": "^0.7.0",
     "clsx": "^2.1.0",
-    "lucide-react": "^0.372.0",
+    "lucide-react": "^0.426.0",
     "next": "14.2.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
@@ -25,9 +26,9 @@
     "@types/node": "^20.12.7",
     "@types/react": "^18.2.79",
     "@types/react-dom": "^18.2.25",
+    "eslint-plugin-react": "^7.34.1",
     "postcss": "^8.4.38",
     "tailwindcss": "^3.4.3",
-    "typescript": "^5.4.5",
-    "eslint-plugin-react": "^7.34.1"
+    "typescript": "^5.4.5"
   }
 }

apps/frontend/src/app/events/[id]/page.tsx

@@ -0,0 +1,25 @@
+import { DrinkActionTile } from '@/components/drink-action-tile';
+import { events } from '@/models/mockData';
+
+export default function EventDetailsPage({ params }: { params: { id: string } }) {
+  const event = events.find((e) => e.id === params.id);
+  if (!event) return null;
+  return (
+    <main className='flex flex-col items-center justify-center'>
+      <h1 className='text-3xl font-bold'>{event.name}</h1>
+      {event.description && <p>{event.description}</p>}
+      <p>
+        {event.startDate.toLocaleString('hu')} - {event.endDate.toLocaleString('hu')}
+      </p>
+      <p>
+        Létrehozta: {event.owner.lastName} {event.owner.firstName}
+      </p>
+
+      <div className='flex flex-col gap-4'>
+        {event.drinkActions.map((da) => (
+          <DrinkActionTile key={da.id} drinkAction={da} />
+        ))}
+      </div>
+    </main>
+  );
+}

apps/frontend/src/app/page.tsx

@@ -1,9 +1,15 @@
-import { HelloWorld } from '@/components/hello-world';
+import Link from 'next/link';
+
+import { events } from '@/models/mockData';
 
 export default function Home() {
   return (
     <main className='flex items-center justify-center'>
-      <HelloWorld className='mt-10' />
+      {events.map((e) => (
+        <Link key={e.id} href={`/events/${e.id}`}>
+          <h2>{e.name}</h2>
+        </Link>
+      ))}
     </main>
   );
 }

apps/frontend/src/components/drink-action-tile.tsx

@@ -0,0 +1,33 @@
+import { DrinkAction } from '@/models/drinkAction';
+
+import { DrinkTypeBadge } from './drink-type-badge';
+import { Avatar, AvatarFallback, AvatarImage } from './ui/avatar';
+
+type Props = {
+  drinkAction: DrinkAction;
+};
+
+export function DrinkActionTile({ drinkAction }: Props) {
+  return (
+    <div className='border-gray-500 border-2 rounded p-5 flex flex-col gap-2'>
+      <div className='flex gap-4 items-center'>
+        <Avatar>
+          <AvatarImage src={drinkAction.user.profilePictureUrl} alt='@shadcn' />
+          <AvatarFallback>
+            {drinkAction.user.lastName[0]}
+            {drinkAction.user.firstName[0]}
+          </AvatarFallback>
+        </Avatar>
+        <p className='font-bold'>
+          {drinkAction.user.lastName} {drinkAction.user.firstName}
+        </p>
+      </div>
+      <div className='flex gap-2 items-center'>
+        <DrinkTypeBadge type={drinkAction.drink.type} />
+        <p>{drinkAction.drink.name}</p>
+      </div>
+      <p>{drinkAction.milliliter} ml</p>
+      <p>{drinkAction.price} JMF</p>
+    </div>
+  );
+}

apps/frontend/src/components/drink-type-badge.tsx

@@ -0,0 +1,38 @@
+import { Beer, Skull, Wine } from 'lucide-react';
+
+import { DrinkType } from '@/models/drink';
+
+import { Badge } from './ui/badge';
+
+type Props = {
+  type: DrinkType;
+};
+
+export function DrinkTypeBadge({ type }: Props) {
+  switch (type) {
+    case DrinkType.BEER:
+      return (
+        <Badge variant='outline' className='bg-yellow-200'>
+          <Beer />
+        </Badge>
+      );
+    case DrinkType.WINE:
+      return (
+        <Badge variant='outline' className='bg-red-900 text-white'>
+          <Wine />
+        </Badge>
+      );
+    case DrinkType.COCKTAIL:
+      return (
+        <Badge variant='outline' className='bg-teal-500'>
+          <Wine />
+        </Badge>
+      );
+    case DrinkType.SPIRIT:
+      return (
+        <Badge variant='outline' className='bg-gray-500'>
+          <Skull />
+        </Badge>
+      );
+  }
+}

apps/frontend/src/components/ui/avatar.tsx

@@ -0,0 +1,43 @@
+'use client';
+
+import * as AvatarPrimitive from '@radix-ui/react-avatar';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const Avatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Root
+    ref={ref}
+    className={cn('relative flex h-10 w-10 shrink-0 overflow-hidden rounded-full', className)}
+    {...props}
+  />
+));
+Avatar.displayName = AvatarPrimitive.Root.displayName;
+
+const AvatarImage = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Image>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Image>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Image ref={ref} className={cn('aspect-square h-full w-full', className)} {...props} />
+));
+AvatarImage.displayName = AvatarPrimitive.Image.displayName;
+
+const AvatarFallback = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Fallback>,
+  React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Fallback>
+>(({ className, ...props }, ref) => (
+  <AvatarPrimitive.Fallback
+    ref={ref}
+    className={cn(
+      'flex h-full w-full items-center justify-center rounded-full bg-pink-500 dark:bg-slate-800',
+      className
+    )}
+    {...props}
+  />
+));
+AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
+
+export { Avatar, AvatarFallback, AvatarImage };

apps/frontend/src/components/ui/badge.tsx

@@ -0,0 +1,32 @@
+import { cva, type VariantProps } from 'class-variance-authority';
+import * as React from 'react';
+
+import { cn } from '@/lib/utils';
+
+const badgeVariants = cva(
+  'inline-flex items-center rounded-full border border-slate-200 px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-slate-950 focus:ring-offset-2 dark:border-slate-800 dark:focus:ring-slate-300',
+  {
+    variants: {
+      variant: {
+        default:
+          'border-transparent bg-slate-900 text-slate-50 hover:bg-slate-900/80 dark:bg-slate-50 dark:text-slate-900 dark:hover:bg-slate-50/80',
+        secondary:
+          'border-transparent bg-slate-100 text-slate-900 hover:bg-slate-100/80 dark:bg-slate-800 dark:text-slate-50 dark:hover:bg-slate-800/80',
+        destructive:
+          'border-transparent bg-red-500 text-slate-50 hover:bg-red-500/80 dark:bg-red-900 dark:text-slate-50 dark:hover:bg-red-900/80',
+        outline: 'text-slate-950 dark:text-slate-50',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+);
+
+export interface BadgeProps extends React.HTMLAttributes<HTMLDivElement>, VariantProps<typeof badgeVariants> { }
+
+function Badge({ className, variant, ...props }: BadgeProps) {
+  return <div className={cn(badgeVariants({ variant }), className)} {...props} />;
+}
+
+export { Badge, badgeVariants };

apps/frontend/src/models/drink.ts

@@ -0,0 +1,16 @@
+export enum DrinkType {
+  BEER = 'BEER',
+  WINE = 'WINE',
+  SPIRIT = 'SPIRIT',
+  COCKTAIL = 'COCKTAIL',
+}
+
+export interface Drink {
+  id: string;
+  name: string;
+  type: DrinkType;
+  alcoholContent: number;
+  custom: boolean;
+  description?: string;
+  createdAt: Date;
+}

apps/frontend/src/models/drinkAction.ts

@@ -0,0 +1,15 @@
+import { Drink } from './drink';
+import { PublicUser } from './user';
+
+export interface DrinkAction {
+  id: string;
+  drinkId: string;
+  eventId: string;
+  price: number;
+  milliliter: number;
+  hasEffect: boolean;
+  createdAt: Date;
+  userId: string;
+  user: PublicUser;
+  drink: Drink;
+}

apps/frontend/src/models/event.ts

@@ -0,0 +1,15 @@
+import { DrinkAction } from './drinkAction';
+import { PublicUser } from './user';
+
+export interface EventDetails {
+  id: string;
+  name: string;
+  location: string;
+  ownerId: string;
+  startDate: Date;
+  endDate: Date;
+  description?: string;
+  createdAt: Date;
+  owner: PublicUser;
+  drinkActions: DrinkAction[];
+}

apps/frontend/src/models/mockData.ts

@@ -0,0 +1,80 @@
+import { DrinkType } from './drink';
+import { EventDetails } from './event';
+
+export const events: EventDetails[] = [
+  {
+    id: 'tesztevent',
+    name: 'Pöci',
+    location: 'Budapest, Irinyi József u. 42, 1117 (8. floor)',
+    ownerId: 'string',
+    startDate: new Date('2022-01-01T22:30:00.000Z'),
+    endDate: new Date('2022-01-02T04:00:00.000Z'),
+    description:
+      'We are going to play a turn-based strategy game played with 20 forint coins, during which wearing a tie is mandatory.',
+    createdAt: new Date('2024-08-08T12:13:40.444Z'),
+    owner: {
+      authSchId: 'string',
+      email: '[email protected]',
+      firstName: 'Sámuel',
+      lastName: 'Fekete',
+      isAdmin: false,
+      profilePictureUrl: 'string',
+    },
+    drinkActions: [
+      {
+        id: '123e4567-e89b-12d3-a456-426614174000',
+        drinkId: '123e4567-e89b-12d3-a456-426614174001',
+        eventId: '123e4567-e89b-12d3-a456-426614174002',
+        price: 450,
+        milliliter: 500,
+        hasEffect: false,
+        createdAt: new Date('2024-07-27T15:31:11.763Z'),
+        userId: '123e4567-e89b-12d3-a456-426614174003',
+        drink: {
+          id: 'aaaaaaaa-bbbb-cccc-dddd-eeee-ff0123456789',
+          name: 'Soproni meggy',
+          type: DrinkType.SPIRIT,
+          alcoholContent: 4.5,
+          custom: false,
+          description: 'A beer that doesnt really taste like beer.',
+          createdAt: new Date('2024-08-08T12:24:59.402Z'),
+        },
+        user: {
+          authSchId: 'string',
+          email: '[email protected]',
+          firstName: 'Sámuel',
+          lastName: 'Fekete',
+          isAdmin: false,
+          profilePictureUrl: '',
+        },
+      },
+      {
+        id: '123e4567-e89b-12d3-a456-42661417403430',
+        drinkId: '123e4567-e89b-12d3-a456-426614174001',
+        eventId: '123e4567-e89b-12d3-a456-426614174002',
+        price: 1050,
+        milliliter: 500,
+        hasEffect: false,
+        createdAt: new Date('2024-07-27T15:31:11.763Z'),
+        userId: '123e4567-e89b-12d3-a456-426614174003',
+        drink: {
+          id: 'aaaaaaaa-bbbb-cccc-dddd-eeee-ff0123454789',
+          name: 'Simonyito',
+          type: DrinkType.WINE,
+          alcoholContent: 4.8,
+          custom: false,
+          description: 'Delicious cocktail that tastes just like Simonyi.',
+          createdAt: new Date('2024-08-08T12:24:59.402Z'),
+        },
+        user: {
+          authSchId: 'string',
+          email: '[email protected]',
+          firstName: 'Charles',
+          lastName: 'Simonyi',
+          isAdmin: false,
+          profilePictureUrl: '',
+        },
+      },
+    ],
+  },
+];

apps/frontend/src/models/user.ts

@@ -0,0 +1,8 @@
+export interface PublicUser {
+  authSchId: string;
+  email?: string;
+  firstName: string;
+  lastName: string;
+  isAdmin: boolean;
+  profilePictureUrl?: string;
+}