From 69bc019074ab58563156998f38a5c801d4624ec4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?S=C3=A1muel=20Fekete?= Date: Thu, 8 Aug 2024 21:00:29 +0200 Subject: [PATCH] initial design --- apps/frontend/package.json | 7 +- apps/frontend/src/app/events/[id]/page.tsx | 25 ++++++ apps/frontend/src/app/page.tsx | 10 ++- .../src/components/drink-action-tile.tsx | 33 ++++++++ .../src/components/drink-type-badge.tsx | 38 +++++++++ apps/frontend/src/components/ui/avatar.tsx | 43 ++++++++++ apps/frontend/src/components/ui/badge.tsx | 32 ++++++++ apps/frontend/src/models/drink.ts | 16 ++++ apps/frontend/src/models/drinkAction.ts | 15 ++++ apps/frontend/src/models/event.ts | 15 ++++ apps/frontend/src/models/mockData.ts | 80 +++++++++++++++++++ apps/frontend/src/models/user.ts | 8 ++ yarn.lock | 52 +++++++++++- 13 files changed, 365 insertions(+), 9 deletions(-) create mode 100644 apps/frontend/src/app/events/[id]/page.tsx create mode 100644 apps/frontend/src/components/drink-action-tile.tsx create mode 100644 apps/frontend/src/components/drink-type-badge.tsx create mode 100644 apps/frontend/src/components/ui/avatar.tsx create mode 100644 apps/frontend/src/components/ui/badge.tsx create mode 100644 apps/frontend/src/models/drink.ts create mode 100644 apps/frontend/src/models/drinkAction.ts create mode 100644 apps/frontend/src/models/event.ts create mode 100644 apps/frontend/src/models/mockData.ts create mode 100644 apps/frontend/src/models/user.ts diff --git a/apps/frontend/package.json b/apps/frontend/package.json index 22eb17c..c75b0ea 100644 --- a/apps/frontend/package.json +++ b/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" } } diff --git a/apps/frontend/src/app/events/[id]/page.tsx b/apps/frontend/src/app/events/[id]/page.tsx new file mode 100644 index 0000000..91938d7 --- /dev/null +++ b/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 ( +
+

{event.name}

+ {event.description &&

{event.description}

} +

+ {event.startDate.toLocaleString('hu')} - {event.endDate.toLocaleString('hu')} +

+

+ Létrehozta: {event.owner.lastName} {event.owner.firstName} +

+ +
+ {event.drinkActions.map((da) => ( + + ))} +
+
+ ); +} diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx index 049f7bf..4864f2a 100644 --- a/apps/frontend/src/app/page.tsx +++ b/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 (
- + {events.map((e) => ( + +

{e.name}

+ + ))}
); } diff --git a/apps/frontend/src/components/drink-action-tile.tsx b/apps/frontend/src/components/drink-action-tile.tsx new file mode 100644 index 0000000..d06b8c0 --- /dev/null +++ b/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 ( +
+
+ + + + {drinkAction.user.lastName[0]} + {drinkAction.user.firstName[0]} + + +

+ {drinkAction.user.lastName} {drinkAction.user.firstName} +

+
+
+ +

{drinkAction.drink.name}

+
+

{drinkAction.milliliter} ml

+

{drinkAction.price} JMF

+
+ ); +} diff --git a/apps/frontend/src/components/drink-type-badge.tsx b/apps/frontend/src/components/drink-type-badge.tsx new file mode 100644 index 0000000..26f4530 --- /dev/null +++ b/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 ( + + + + ); + case DrinkType.WINE: + return ( + + + + ); + case DrinkType.COCKTAIL: + return ( + + + + ); + case DrinkType.SPIRIT: + return ( + + + + ); + } +} diff --git a/apps/frontend/src/components/ui/avatar.tsx b/apps/frontend/src/components/ui/avatar.tsx new file mode 100644 index 0000000..5b732e0 --- /dev/null +++ b/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, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +Avatar.displayName = AvatarPrimitive.Root.displayName; + +const AvatarImage = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarImage.displayName = AvatarPrimitive.Image.displayName; + +const AvatarFallback = React.forwardRef< + React.ElementRef, + React.ComponentPropsWithoutRef +>(({ className, ...props }, ref) => ( + +)); +AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName; + +export { Avatar, AvatarFallback, AvatarImage }; diff --git a/apps/frontend/src/components/ui/badge.tsx b/apps/frontend/src/components/ui/badge.tsx new file mode 100644 index 0000000..f4e59cf --- /dev/null +++ b/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, VariantProps { } + +function Badge({ className, variant, ...props }: BadgeProps) { + return
; +} + +export { Badge, badgeVariants }; diff --git a/apps/frontend/src/models/drink.ts b/apps/frontend/src/models/drink.ts new file mode 100644 index 0000000..c61e572 --- /dev/null +++ b/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; +} diff --git a/apps/frontend/src/models/drinkAction.ts b/apps/frontend/src/models/drinkAction.ts new file mode 100644 index 0000000..66ba914 --- /dev/null +++ b/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; +} diff --git a/apps/frontend/src/models/event.ts b/apps/frontend/src/models/event.ts new file mode 100644 index 0000000..3b5b3a8 --- /dev/null +++ b/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[]; +} diff --git a/apps/frontend/src/models/mockData.ts b/apps/frontend/src/models/mockData.ts new file mode 100644 index 0000000..d69e179 --- /dev/null +++ b/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: 'john.smith@example.com', + 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: 'john.smith@example.com', + 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: 'john.smith@example.com', + firstName: 'Charles', + lastName: 'Simonyi', + isAdmin: false, + profilePictureUrl: '', + }, + }, + ], + }, +]; diff --git a/apps/frontend/src/models/user.ts b/apps/frontend/src/models/user.ts new file mode 100644 index 0000000..aeb8042 --- /dev/null +++ b/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; +} diff --git a/yarn.lock b/yarn.lock index 56c56c4..50bca86 100644 --- a/yarn.lock +++ b/yarn.lock @@ -972,6 +972,50 @@ dependencies: "@prisma/debug" "5.17.0" +"@radix-ui/react-avatar@^1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-avatar/-/react-avatar-1.1.0.tgz#457c81334c93f4608df15f081e7baa286558d6a2" + integrity sha512-Q/PbuSMk/vyAd/UoIShVGZ7StHHeRFYU7wXmi5GV+8cLXflZAEpHL/F697H1klrzxKXNtZ97vWiC0q3RKUH8UA== + dependencies: + "@radix-ui/react-context" "1.1.0" + "@radix-ui/react-primitive" "2.0.0" + "@radix-ui/react-use-callback-ref" "1.1.0" + "@radix-ui/react-use-layout-effect" "1.1.0" + +"@radix-ui/react-compose-refs@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-compose-refs/-/react-compose-refs-1.1.0.tgz#656432461fc8283d7b591dcf0d79152fae9ecc74" + integrity sha512-b4inOtiaOnYf9KWyO3jAeeCG6FeyfY6ldiEPanbUjWd+xIk5wZeHa8yVwmrJ2vderhu/BQvzCrJI0lHd+wIiqw== + +"@radix-ui/react-context@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-context/-/react-context-1.1.0.tgz#6df8d983546cfd1999c8512f3a8ad85a6e7fcee8" + integrity sha512-OKrckBy+sMEgYM/sMmqmErVn0kZqrHPJze+Ql3DzYsDDp0hl0L62nx/2122/Bvps1qz645jlcu2tD9lrRSdf8A== + +"@radix-ui/react-primitive@2.0.0": + version "2.0.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-primitive/-/react-primitive-2.0.0.tgz#fe05715faa9203a223ccc0be15dc44b9f9822884" + integrity sha512-ZSpFm0/uHa8zTvKBDjLFWLo8dkr4MBsiDLz0g3gMUwqgLHz9rTaRRGYDgvZPtBJgYCBKXkS9fzmoySgr8CO6Cw== + dependencies: + "@radix-ui/react-slot" "1.1.0" + +"@radix-ui/react-slot@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-slot/-/react-slot-1.1.0.tgz#7c5e48c36ef5496d97b08f1357bb26ed7c714b84" + integrity sha512-FUCf5XMfmW4dtYl69pdS4DbxKy8nj4M7SafBgPllysxmdachynNflAdp/gCsnYWNDnge6tI9onzMp5ARYc1KNw== + dependencies: + "@radix-ui/react-compose-refs" "1.1.0" + +"@radix-ui/react-use-callback-ref@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-callback-ref/-/react-use-callback-ref-1.1.0.tgz#bce938ca413675bc937944b0d01ef6f4a6dc5bf1" + integrity sha512-CasTfvsy+frcFkbXtSJ2Zu9JHpN8TYKxkgJGWbjiZhFivxaeW7rMeZt7QELGVLaYVfFMsKHjb7Ak0nMEe+2Vfw== + +"@radix-ui/react-use-layout-effect@1.1.0": + version "1.1.0" + resolved "https://registry.yarnpkg.com/@radix-ui/react-use-layout-effect/-/react-use-layout-effect-1.1.0.tgz#3c2c8ce04827b26a39e442ff4888d9212268bd27" + integrity sha512-+FPE0rOdziWSrH9athwI1R0HDVbWlEhd+FR+aSDk4uWGmSJ9Z54sdZVDQPZAinJhJXwfT+qnj969mCsT2gfm5w== + "@rushstack/eslint-patch@^1.3.3": version "1.10.3" resolved "https://registry.yarnpkg.com/@rushstack/eslint-patch/-/eslint-patch-1.10.3.tgz#391d528054f758f81e53210f1a1eebcf1a8b1d20" @@ -4758,10 +4802,10 @@ lru-cache@^5.1.1: dependencies: yallist "^3.0.2" -lucide-react@^0.372.0: - version "0.372.0" - resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.372.0.tgz#bb032d1e34ffca2eba016f951aabd261bbffacbe" - integrity sha512-0cKdqmilHXWUwWAWnf6CrrjHD8YaqPMtLrmEHXolZusNTr9epULCsiJwIOHk2q1yFxdEwd96D4zShlAj67UJdA== +lucide-react@^0.426.0: + version "0.426.0" + resolved "https://registry.yarnpkg.com/lucide-react/-/lucide-react-0.426.0.tgz#15ab8cbf73c45655bcc8d3a69065277d4e201808" + integrity sha512-aby5G+Zt+LIIEU0n9900XQNJFJUcs7/S+jOEgIhkV08NX3kGx1zxALKh1JvAKcYqutWLg07exbnYvh66szhrRA== magic-string@0.25.7: version "0.25.7"