💄 style event card

UoaWDCC · Jul 14, 2024 · dcf940a · dcf940a
1 parent 46e263d
commit dcf940a
Show file tree

Hide file tree

Showing 4 changed files with 38 additions and 10 deletions.
diff --git a/web/src/components/events/EventCard.tsx b/web/src/components/events/EventCard.tsx
@@ -1,3 +1,5 @@
+import { Button } from "../ui/button";
+
 type Event = {
   title: string;
   date: Date;
@@ -6,16 +8,32 @@ type Event = {
   eventUrl: string;
 };
 
-export default function EventCard({ event }: { event: Event }) {
+export default function EventCard({
+  event,
+  className = "",
+}: {
+  event: Event;
+  className?: string;
+}) {
   const { title, date, description, imageUrl, eventUrl } = event;
 
   return (
-    <div>
-      <p>{title}</p>
-      <p>{date.toISOString()}</p>
-      <p>{description}</p>
-      <img src={imageUrl} alt={title} />
-      <a href={eventUrl}>More info</a>
+    <div
+      className={`shadow-surround rounded-md max-w-80 text-center ${className}`}
+    >
+      <img
+        src={imageUrl}
+        alt={title}
+        className="w-full aspect-[2/1] object-cover rounded-t-md shadow-bottom"
+      />
+      <div className="p-6 pb-8">
+        <h4>{title}</h4>
+        <div className="subtitle">{date.toLocaleString()}</div>
+        <p className="text-xs leading-4">{description}</p>
+        <Button asChild className="mt-6">
+          <a href={eventUrl} className="whitespace-pre">Find out more  ➢</a>
+        </Button>
+      </div>
     </div>
   );
 }
diff --git a/web/src/global.css b/web/src/global.css
@@ -70,14 +70,20 @@
   }
 
   h3 {
-    @apply text-4xl font-bold leading-[2.5625rem];
+    @apply text-3xl font-bold leading-[2.5625rem];
   }
 
   h4 {
-    @apply text-3xl font-bold leading-[1.7625rem];
+    @apply text-xl font-bold leading-[1.7625rem];
   }
 
   p {
     @apply text-base leading-[1.5rem] font-[500];
   }
 }
+
+@layer components {
+  .subtitle {
+    @apply mt-2 mb-4 text-primary text-xs font-semibold;
+  }
+}
diff --git a/web/src/pages/test/events/index.astro b/web/src/pages/test/events/index.astro
@@ -5,7 +5,7 @@ import Layout from "@/layouts/layout.astro";
 const testEvent = {
   title: "Test Event",
   date: new Date(),
-  description: "This is a test event",
+  description: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla nec purus feugiat, molestie ipsum et, consequat nibh. Etiam non elit dui.",
   imageUrl: "https://via.placeholder.com/150",
   eventUrl: "/",
 };

diff --git a/web/tailwind.config.mjs b/web/tailwind.config.mjs
@@ -94,6 +94,10 @@ module.exports = {
         "accordion-down": "accordion-down 0.2s ease-out",
         "accordion-up": "accordion-up 0.2s ease-out",
       },
+      boxShadow: {
+        "surround": "0 0 6px 3px rgb(0 0 0 / 0.1)",
+        "bottom": "0 2px 4px 1px rgb(0 0 0 / 0.08)",
+      },
     },
   },
   plugins: [require("tailwindcss-animate")],