modified both home(events list) and event details to use tag-list component

Author: phillipnguyenn

client/src/pages/events/[id].tsx

@@ -1,5 +1,6 @@
 import { useRouter } from "next/router";
 
+import TagList from "@/components/ui/tag-list";
 import { useEvent } from "@/hooks/event";
 
 import DockLayout from "../layouts/docklayout";
@@ -21,20 +22,7 @@ export default function EventDetailsPage() {
   return (
     <>
       <DockLayout>
-        <div>
-          <h1>{event.event_name}</h1>
-          <div className="flex flex-wrap gap-2">
-            {event.tags.map((tag) => (
-              <span
-                key={tag.id}
-                className="rounded-full bg-muted px-3 py-1 text-sm"
-              >
-                {tag.name}
-              </span>
-            ))}
-          </div>
-          <p>{event.event_description}</p>
-        </div>
+        <TagList tags={event.tags}></TagList>
       </DockLayout>
     </>
   );

client/src/pages/home.tsx

@@ -1,5 +1,6 @@
 import Link from "next/link";
 
+import TagList from "@/components/ui/tag-list";
 import { useEvents } from "@/hooks/events";
 
 import { Button } from "../components/ui/button";
@@ -30,7 +31,10 @@ export default function Home() {
                 </CardHeader>
 
                 <CardContent>
-                  <p>{event.event_description}</p>
+                  <TagList tags={event.tags}></TagList>
+                  <p className="line-clamp-3 text-muted-foreground">
+                    {event.event_description}
+                  </p>
                 </CardContent>
 
                 <CardFooter className="flex-end flex-row justify-end gap-2">