moved event cards into a component

Author: phillipnguyenn

client/src/components/ui/event-card.tsx

@@ -0,0 +1,45 @@
+import Link from "next/link";
+
+import {
+  Card,
+  CardContent,
+  CardDescription,
+  CardFooter,
+  CardHeader,
+  CardTitle,
+} from "@/components/ui/card";
+
+import type { Event } from "../../hooks/events";
+import { Button } from "./button";
+import TagList from "./tag-list";
+
+interface EventCardProps {
+  event: Event;
+}
+
+export default function EventCard({ event }: EventCardProps) {
+  return (
+    <Card>
+      <CardHeader className="p-3">
+        <CardTitle>{event.event_name}</CardTitle>
+        <CardDescription>{event.event_location}</CardDescription>
+      </CardHeader>
+
+      <CardContent>
+        <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-center gap-2">
+        <Link href={`/events/${event.id}`} className="w-full">
+          <Button className="w-full rounded-full">View Details</Button>
+        </Link>
+        <Link href={`/events/${event.id}`}>
+          <Button className="rounded-full">Signup</Button>
+        </Link>
+      </CardFooter>
+    </Card>
+  );
+}

client/src/components/ui/input.tsx

@@ -0,0 +1,22 @@
+import * as React from "react";
+
+import { cn } from "@/lib/utils";
+
+const Input = React.forwardRef<HTMLInputElement, React.ComponentProps<"input">>(
+  ({ className, type, ...props }, ref) => {
+    return (
+      <input
+        type={type}
+        className={cn(
+          "flex h-10 w-full rounded-md border border-input bg-background px-3 py-2 text-base ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 md:text-sm",
+          className,
+        )}
+        ref={ref}
+        {...props}
+      />
+    );
+  },
+);
+Input.displayName = "Input";
+
+export { Input };

client/src/pages/home.tsx

@@ -1,17 +1,6 @@
-import Link from "next/link";
-
-import TagList from "@/components/ui/tag-list";
+import EventCard from "@/components/ui/event-card";
 import { useEvents } from "@/hooks/events";
 
-import { Button } from "../components/ui/button";
-import {
-  Card,
-  CardContent,
-  CardDescription,
-  CardFooter,
-  CardHeader,
-  CardTitle,
-} from "../components/ui/card";
 import SearchDock from "../components/ui/search-dock";
 import DockLayout from "./layouts/docklayout";
 
@@ -24,30 +13,7 @@ export default function Home() {
         <div className="mx-auto max-w-7xl space-y-3 px-4 py-6">
           {!isLoading &&
             events?.map((event) => (
-              <Card key={event.id}>
-                <CardHeader className="p-3">
-                  <CardTitle>{event.event_name}</CardTitle>
-                  <CardDescription>{event.event_location}</CardDescription>
-                </CardHeader>
-
-                <CardContent>
-                  <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-center gap-2">
-                  <Link href={`/events/${event.id}`} className="w-full">
-                    <Button className="w-full rounded-full">
-                      View Details
-                    </Button>
-                  </Link>
-                  <Link href={`/events/${event.id}`}>
-                    <Button className="rounded-full">Signup</Button>
-                  </Link>
-                </CardFooter>
-              </Card>
+              <EventCard key={event.id} event={event}></EventCard>
             ))}
         </div>
       </DockLayout>