Listing Grid

import { cn } from "@/lib/utils"
import { ListingCard } from "@/registry/alpine/listing/listing-card"

export function ListingGrid({
  heading,
  subheading,
  listings,
  className,
}: {
  heading?: string
  subheading?: string
  listings: {
    name: string
    location: string
    imageUrl: string
    rating: number
    reviewCount: number
  }[]
  className?: string
}) {
  return (
    <div className="flex flex-col gap-6 min-w-0 w-full">
      {heading || subheading ? (
        <div className="flex flex-col gap-1">
          <h2 className="text-2xl font-bold tracking-tighter">{heading}</h2>
          {subheading && <p className="text-muted-foreground">{subheading}</p>}
        </div>
      ) : null}
      <div
        className={cn(
          "grid sm:grid-cols-2 lg:grid-cols-4 gap-6 w-full",
          className
        )}
      >
        {listings.map((listing) => (
          <ListingCard key={listing.name} {...listing} />
        ))}
      </div>
    </div>
  )
}

import { cn } from "@/lib/utils"
import {
  Card,
  CardContent,
  CardDescription,
  CardHeader,
  CardTitle,
} from "@/registry/alpine/ui/card"
import { StarIcon } from "lucide-react"
import Image from "next/image"

export function ListingCard({
  name,
  location,
  imageUrl,
  rating,
  reviewCount,
  className,
}: {
  name: string
  location: string
  imageUrl: string
  rating: number
  reviewCount: number
} & React.ComponentProps<typeof Card>) {
  return (
    <Card
      className={cn(
        "w-full p-0 bg-transparent aspect-square border-0 gap-4 min-w-0",
        className
      )}
    >
      <CardContent className="p-0">
        <Image
          src={imageUrl}
          alt={name}
          width={600}
          height={600}
          className="aspect-square rounded-lg w-full object-cover"
        />
      </CardContent>
      <CardHeader className="p-0 gap-0">
        <CardTitle className="flex items-center gap-2 text-sm tracking-tight font-medium">
          {name}{" "}
          <div className="flex items-center gap-1 ml-auto">
            <StarIcon className="fill-foreground size-3" /> {rating} (
            {reviewCount})
          </div>
        </CardTitle>
        <CardDescription>{location}</CardDescription>
      </CardHeader>
    </Card>
  )
}