changed property layout

pennlabs · Mar 24, 2024 · 144089b · 144089b
1 parent 0f0c156
commit 144089b
Showing 1 changed file with 37 additions and 23 deletions.
diff --git a/sublet/components/custom/Property.tsx b/sublet/components/custom/Property.tsx
@@ -33,7 +33,7 @@ import { Label } from "@/components/ui/label";
 import { CheckIcon, DotsHorizontalIcon as Dots } from "@radix-ui/react-icons";
 */}
 
-import { CalendarIcon } from "@radix-ui/react-icons";
+import { CalendarIcon, ImageIcon } from "@radix-ui/react-icons";
 import { MapPinIcon, DollarSignIcon } from 'lucide-react';
 
 import { Card, CardContent } from "@/components/ui/card"
@@ -49,6 +49,7 @@ import Image from "next/image";
 
 import { PropertyInterface, ImageInterface } from "@/interfaces/Property";
 import { AspectRatio } from "../ui/aspect-ratio";
+import { Skeleton } from "../ui/skeleton";
 
 function formatDate(dateString: string): string {
   // Convert the input string to a Date object
@@ -71,38 +72,51 @@ const Property: React.FC<PropertyProps> = ({ property }) => {
   return (
     <div className="relative space-y-1">
 
-      <div className="absolute w-7 h-7 bg-red-500 rounded-full z-30 -top-2 -right-2 text-white font-bold text-sm flex justify-center items-center">1</div>
-
-      <Carousel className="w-full rounded-xl overflow-hidden group">
-        <CarouselContent>
-          {property.images.map((_, index) => (
-            <CarouselItem key={index}>
-              <AspectRatio ratio={16 / 9}>
-                <Image
-                  className="rounded-xl"
-                  draggable="false"
-                  src={property.images[index].image_url}
-                  alt="Property image"
-                  objectFit="cover"
-                  fill
-                />
-              </AspectRatio>
-            </CarouselItem>
-          ))}
-        </CarouselContent>
-        <CarouselPrevious />
-        <CarouselNext />
-      </Carousel>
+      <div className="absolute z-30 -top-1 -right-1">
+        <span className="flex h-4 w-4 rounded-full bg-green-500" />
+        <span className="flex h-4 w-4 rounded-full bg-green-500 animate-ping absolute top-0" />
+      </div>
+
+      {property.images.length > 0 ?
+        <Carousel className="w-full rounded-xl overflow-hidden group">
+          <CarouselContent>
+            {property.images.map((_, index) => (
+              <CarouselItem key={index}>
+                <AspectRatio ratio={16 / 9}>
+                  <Image
+                    className="rounded-xl"
+                    draggable="false"
+                    src={property.images[index].image_url}
+                    alt="Property image"
+                    objectFit="cover"
+                    fill
+                  />
+                </AspectRatio>
+              </CarouselItem>
+            ))}
+          </CarouselContent>
+          <CarouselPrevious />
+          <CarouselNext />
+        </Carousel>
+        :
+        <AspectRatio ratio={16 / 9}>
+          <Skeleton className="h-full flex items-center justify-center rounded-xl">
+            <ImageIcon className="w-6 h-6" />
+          </Skeleton>
+        </AspectRatio>
+      }
 
       <div className="flex justify-between pt-3 max-sm:flex-col max-sm:gap-3 max-sm:pb-3">
         <div className="font-bold text-xl">{property.title}</div>
+        {/*
         <div className="flex items-center gap-2">
           <div className="relative">
             <span className="flex h-3 w-3 rounded-full bg-green-500" />
             <span className="flex h-3 w-3 rounded-full bg-green-500 animate-ping absolute top-0" />
           </div>
           <p className="text-sm font-medium leading-none sm:hidden">Pending</p>
         </div>
+        */}
 
         {/*<DropdownMenu>
           <DropdownMenuTrigger>