Event feed initialisation

apps/frontend/package.json

@@ -12,6 +12,7 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "@lucide/lab": "^0.1.2",
     "@radix-ui/react-avatar": "^1.1.0",
     "@tanstack/react-query": "^5.52.0",
     "axios": "^1.7.4",
@@ -23,7 +24,8 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "tailwind-merge": "^2.3.0",
-    "tailwindcss-animate": "^1.0.7"
+    "tailwindcss-animate": "^1.0.7",
+    "vaul": "^0.9.1"
   },
   "devDependencies": {
     "@tanstack/eslint-plugin-query": "^5.52.0",

apps/frontend/src/app/page.tsx

@@ -1,15 +1,96 @@
+'use client';
+import { Plus } from 'lucide-react';
 import Link from 'next/link';
 
+import { CommentSection } from '@/components/comment-section';
+import { DrinkList } from '@/components/drinkAction-drink-list';
+import { EventDiscription } from '@/components/event-discription';
+import { ShareLink } from '@/components/share-link';
+import { Button } from '@/components/ui/button';
+import {
+  Pagination,
+  PaginationContent,
+  PaginationEllipsis,
+  PaginationItem,
+  PaginationLink,
+  PaginationNext,
+  PaginationPrevious,
+} from '@/components/ui/pagination';
+import { UserAvatar } from '@/components/user-avatar';
+import { UserHoverCard } from '@/components/user-hovercard';
 import { events } from '@/models/mockData';
 
-export default function Home() {
+import { LikeButton } from '../../src/components/like-button';
+
+export default function EventFeedPage() {
   return (
-    <main className='flex items-center justify-center'>
-      {events.map((e) => (
-        <Link key={e.id} href={`/events/${e.id}`}>
-          <h2>{e.name}</h2>
+    <main>
+      <div className='flex flex-col items-center justify-center bg-green-300'>
+        <Link href='http://bealcoholic.com'>
+          <h1 className='text-4xl font-bold m-3'>BeAlcoholic</h1>
         </Link>
-      ))}
+      </div>
+      <div className='flex flex-col items-end justify-end mr-20 mt-10'>
+        <Button variant='default' asChild>
+          <Link href='/events/new'>
+            <Plus className='size-5 -ml-1' /> Új Esemény
+          </Link>
+        </Button>
+      </div>
+
+      <div className='flex flex-col items-center justify-center'>
+        <div className='w-[61rem]'>
+          {events.map((event) => (
+            <div key={event.id} className='my-4'>
+              {/* <Link href={`/events/${event.id}`}> */}
+              <div className='bg-white rounded-lg shadow-md p-4 flex items-start'>
+                <div className='flex-shrink-0 mr-4'>
+                  <UserAvatar user={event.owner} />
+                </div>
+                <div>
+                  <h2 className='text-2xl font-bold'>{event.name}</h2>
+                  <p className='text-sm'>
+                    Létrehozta: <UserHoverCard user={event.owner} />
+                  </p>
+                  <div>
+                    <DrinkList event={event} />
+                  </div>
+                  <div>
+                    <EventDiscription event={event} />
+                  </div>
+                  <p className='text-gray-600 text-xs mt-2'>
+                    {event.startDate.toLocaleString('hu')} - {event.endDate.toLocaleString('hu')}
+                  </p>
+                  <div className='flex flex-row mt-3'>
+                    <LikeButton />
+                    <CommentSection />
+                    <ShareLink event={event} />
+                  </div>
+                </div>
+              </div>
+              {/* </Link> */}
+            </div>
+          ))}
+        </div>
+      </div>
+      <footer>
+        <Pagination>
+          <PaginationContent>
+            <PaginationItem>
+              <PaginationPrevious href='#' />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationLink href='#'>1</PaginationLink>
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationEllipsis />
+            </PaginationItem>
+            <PaginationItem>
+              <PaginationNext href='#' />
+            </PaginationItem>
+          </PaginationContent>
+        </Pagination>
+      </footer>
     </main>
   );
 }

apps/frontend/src/components/comment-section.tsx

@@ -0,0 +1,48 @@
+import { MessageCircleMore, SendHorizonal } from 'lucide-react';
+
+import {
+  Drawer,
+  DrawerClose,
+  DrawerContent,
+  DrawerDescription,
+  DrawerFooter,
+  DrawerHeader,
+  DrawerTitle,
+  DrawerTrigger,
+} from '@/components/ui/drawer';
+
+import { Button } from './ui/button';
+import { Input } from './ui/input';
+
+export function CommentSection() {
+  return (
+    <Drawer>
+      <DrawerTrigger asChild>
+        <Button variant='ghost'>
+          <MessageCircleMore className='mr-2 ml-6' /> Comment
+        </Button>
+      </DrawerTrigger>
+      <DrawerContent>
+        <div className='mx-auto w-full max-w-sm'>
+          <DrawerHeader>
+            <DrawerTitle>Comment Section</DrawerTitle>
+            <DrawerDescription>You can leave comments or talk to other users.</DrawerDescription>
+          </DrawerHeader>
+          <div className='flex w-full max-w-sm items-center space-x-2'>
+            <Input type='text' placeholder='Comment' />
+            <Button type='submit'>
+              <SendHorizonal className='-mx-3 -my-1' />
+            </Button>
+          </div>
+          <DrawerFooter>
+            <DrawerClose asChild>
+              <Button variant='outline' className='-mx-4'>
+                Close
+              </Button>
+            </DrawerClose>
+          </DrawerFooter>
+        </div>
+      </DrawerContent>
+    </Drawer>
+  );
+}

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

@@ -1,4 +1,5 @@
-import { Beer, Skull, Wine } from 'lucide-react';
+import { cocktail, wineGlassBottle } from '@lucide/lab';
+import { Beer, Icon, Skull } from 'lucide-react';
 
 import { DrinkType } from '@/models/drink';
 
@@ -19,13 +20,13 @@ export function DrinkTypeBadge({ type }: Props) {
     case DrinkType.WINE:
       return (
         <Badge variant='outline' className='bg-red-900 text-white'>
-          <Wine />
+          <Icon iconNode={wineGlassBottle} />
         </Badge>
       );
     case DrinkType.COCKTAIL:
       return (
         <Badge variant='outline' className='bg-teal-500'>
-          <Wine />
+          <Icon iconNode={cocktail} />
         </Badge>
       );
     case DrinkType.SPIRIT:

apps/frontend/src/components/drinkAction-drink-list.tsx

@@ -0,0 +1,29 @@
+import { Card, CardContent } from '@/components/ui/card';
+import { Carousel, CarouselContent, CarouselItem } from '@/components/ui/carousel';
+import { EventDetails } from '@/models/event';
+
+interface Props {
+  event: EventDetails;
+}
+
+export function DrinkList({ event }: Props) {
+  return (
+    <Carousel className='w-[51rem]'>
+      <CarouselContent className='-ml-1'>
+        {event.drinkActions.map((drinkAction) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <CarouselItem key={drinkAction.id} className='pl-1 md:basis-1/2 lg:basis-auto'>
+            <div className='p-1'>
+              <Card className='w-48 h-48'>
+                <CardContent className='flex flex-col aspect-square items-center justify-center p-6 w-auto'>
+                  <span className='text-xl font-semibold no-'>{drinkAction.drink.name}</span>
+                  <span className='text-xs mt-5'>Alcohol Content: {drinkAction.drink.alcoholContent}%</span>
+                </CardContent>
+              </Card>
+            </div>
+          </CarouselItem>
+        ))}
+      </CarouselContent>
+    </Carousel>
+  );
+}

apps/frontend/src/components/event-discription.tsx

@@ -0,0 +1,48 @@
+import { useEffect, useRef, useState } from 'react';
+
+import { EventDetails } from '@/models/event';
+
+interface Props {
+  event: EventDetails;
+}
+export function EventDiscription({ event }: Props) {
+  const [showFullText, setShowFullText] = useState(false);
+  const descriptionRef = useRef<HTMLParagraphElement>(null);
+
+  const handleShowMoreClick = () => {
+    setShowFullText(true);
+  };
+
+  const handleShowLessClick = () => {
+    setShowFullText(false);
+  };
+
+  useEffect(() => {
+    if (descriptionRef.current) {
+      descriptionRef.current.style.maxHeight = showFullText ? `${descriptionRef.current.scrollHeight}px` : '1.5rem';
+    }
+  }, [showFullText]);
+
+  if (!event?.description || event?.description.trim() === '') {
+    return null;
+  }
+
+  return (
+    <div className='w-[53rem]'>
+      <p ref={descriptionRef} className='overflow-hidden transition-max-h duration-500'>
+        {event.description}
+      </p>
+
+      {!showFullText && event?.description.length > 100 && (
+        <button onClick={handleShowMoreClick} className='underline'>
+          Show more
+        </button>
+      )}
+      {showFullText && (
+        <button onClick={handleShowLessClick} className='underline'>
+          Show less
+        </button>
+      )}
+    </div>
+  );
+}

apps/frontend/src/components/like-button.tsx

@@ -0,0 +1,27 @@
+import { ThumbsUp } from 'lucide-react';
+import { useState } from 'react';
+
+import { Button } from './ui/button';
+
+export function LikeButton() {
+  const [liked, setLiked] = useState(false);
+  const [likeCount, setLikeCount] = useState(0);
+  const [isAnimating, setIsAnimating] = useState(false);
+
+  const handleLikeClick = () => {
+    setLiked(!liked);
+    setLikeCount(liked ? likeCount - 1 : likeCount + 1);
+    setIsAnimating(true);
+    setTimeout(() => setIsAnimating(false), 300);
+  };
+
+  return (
+    <Button variant='ghost' onClick={handleLikeClick}>
+      <ThumbsUp
+        className={`-ml-6 mr-2 -mt-1 transition-transform duration-300 ${isAnimating ? 'scale-125 rotate-12' : ''}`}
+        color={liked ? '#22c55e' : 'black'}
+      />
+      {liked ? likeCount : 'Like'}
+    </Button>
+  );
+}

apps/frontend/src/components/share-link.tsx

@@ -0,0 +1,75 @@
+import { DialogClose } from '@radix-ui/react-dialog';
+import { Copy, Share2 } from 'lucide-react';
+import { useState } from 'react';
+
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from '@/components/ui/dialog';
+import { Input } from '@/components/ui/input';
+import { Label } from '@/components/ui/label';
+import { EventDetails } from '@/models/event';
+
+import { Button } from './ui/button';
+
+type Props = {
+  event: EventDetails;
+};
+
+export function ShareLink({ event }: Props) {
+  const [copied, setCopied] = useState(false);
+
+  const handleCopyClick = (id: string) => {
+    const linkToCopy = `https://bealcoholic.com/events/${id}`;
+    navigator.clipboard
+      .writeText(linkToCopy)
+      .then(() => {
+        setCopied(true);
+        setTimeout(() => setCopied(false), 1500);
+      })
+      .catch((err) => {
+        console.error('Hiba történt a másolás során:', err);
+      });
+  };
+
+  return (
+    <Dialog>
+      <DialogTrigger asChild>
+        <Button variant='ghost'>
+          <Share2 className='mr-2 ml-6' /> Share
+        </Button>
+      </DialogTrigger>
+      <DialogContent className='sm:max-w-md'>
+        <DialogHeader>
+          <DialogTitle>Share link</DialogTitle>
+          <DialogDescription>Anyone who has this link will be able to view this Event.</DialogDescription>
+        </DialogHeader>
+        <div className='flex items-center space-x-2'>
+          <div className='grid flex-1 gap-2'>
+            <Label htmlFor='link' className='sr-only'>
+              Link
+            </Label>
+            <Input id='link' defaultValue={`https://bealcoholic.com/events/${event.id}`} readOnly />
+          </div>
+          <Button type='submit' size='sm' className='px-3' onClick={() => handleCopyClick(event.id)}>
+            <span className='sr-only'>Copy</span>
+            <Copy className='h-4 w-4' />
+            {copied && <span>Copied!</span>}
+          </Button>
+        </div>
+        <DialogFooter className='sm:justify-start'>
+          <DialogClose asChild>
+            <Button type='button' variant='secondary'>
+              Close
+            </Button>
+          </DialogClose>
+        </DialogFooter>
+      </DialogContent>
+    </Dialog>
+  );
+}