Merge pull request #13 from adzaky/feat/events-responsive

[FEAT] - Events Page Responsive

Author: mpsalunggg

src/features/events/components/Card.tsx

@@ -1,38 +1,42 @@
-import { FC } from "react";
-import Image from "next/image";
+import { CSSProperties, FC } from "react";
 import { Clock, Pin } from "lucide-react";
 
 import { Badge } from "@/components/ui/badge";
 import { Card, CardContent, CardFooter } from "@/components/ui/card";
 import { EventType } from "../types";
+import Image from "next/image";
 
 const CardEvent: FC<{ data: EventType }> = ({ data }) => {
   const { id, title, date_event, status, duration, location, image_event } = data;
   return (
-    <Card key={id} className="border rounded-lg shadow-md flex min-h-28">
+    <Card
+      key={id}
+      className="min-h-28 flex border rounded-lg shadow-md bg-cover bg-center bg-[image:var(--image-url)] md:bg-none"
+      style={{ "--image-url": `url(${image_event})` } as CSSProperties}
+    >
       <Image
         src={image_event}
         alt={title}
         width={150}
         height={150}
-        className="rounded-l-lg object-cover w-64 min-h-36"
+        className="hidden md:block rounded-l-lg object-cover w-64 min-h-36"
       />
-      <div className="px-4 py-6">
+      <div className="w-full bg-black/70 py-4">
         <CardContent className="pb-0">
           <Badge className="mb-2" variant={`${status}`}>
             {status}
           </Badge>
-          <h2 className="text-xl font-bold text-hmc-blue-600">{title}</h2>
-          <p className="text-gray-800">{date_event}</p>
+          <h2 className="text-base sm:text-xl font-bold text-hmc-blue-600">{title}</h2>
+          <p className="text-gray-100">{date_event}</p>
         </CardContent>
-        <CardFooter className="flex gap-2 text-gray-500 mt-2 pb-2">
+        <CardFooter className="flex flex-wrap gap-2 text-gray-200 mt-2 pb-2 sm:flex-row">
           <div className="flex items-center gap-2">
             <Clock size={15} />
-            <p className="text-sm">{duration}</p>
+            <p className="text-sm text-nowrap">{duration}</p>
           </div>
           <div className="flex items-center gap-2">
             <Pin size={15} />
-            <p className="text-sm">{location}</p>
+            <p className="text-sm text-nowrap">{location}</p>
           </div>
         </CardFooter>
       </div>

src/features/events/index.tsx

@@ -7,14 +7,14 @@ const Events = () => {
   return (
     <div>
       <div className="w-full bg-slate-100 dark:bg-hmc-primary-foreground rounded-lg">
-        <div className="container px-4 h-32 flex justify-between items-center">
+        <div className="container p-4 h-32 flex flex-wrap gap-1 justify-between items-center">
           <div className="">
-            <h1 className="text-hmc-primary text-3xl font-semibold">Events</h1>
-            <p className="text-hmc-primary">Ayo ikuti berbagai Event dan Agenda menarik</p>
+            <h1 className="text-hmc-primary text-xl sm:text-3xl font-semibold">Events</h1>
+            <p className="text-hmc-primary text-xs sm:text-base">Ayo ikuti berbagai Event dan Agenda menarik</p>
           </div>
-          <div>
+          <div className="w-full sm:w-auto">
             <Select>
-              <SelectTrigger className="w-[180px]">
+              <SelectTrigger className="sm:w-[180px]">
                 <SelectValue placeholder="Category" />
               </SelectTrigger>
               <SelectContent>