Card

import { Card } from "@/components/ui/heroui-card";

function ActionButton({ children }: { children: React.ReactNode }) {
  return (
    <button className="rounded-full bg-zinc-950 px-3 py-2 text-xs font-medium text-white dark:bg-white dark:text-zinc-950" type="button">
      {children}
    </button>
  );
}

function CloseButton({ label }: { label: string }) {
  return (
    <button
      aria-label={label}
      className="inline-flex size-7 items-center justify-center rounded-full text-zinc-500 hover:bg-zinc-100 dark:text-zinc-400 dark:hover:bg-white/10"
      type="button"
    >
      <svg aria-hidden="true" fill="none" viewBox="0 0 16 16" className="size-4">
        <path
          clipRule="evenodd"
          d="M3.47 3.47a.75.75 0 0 1 1.06 0L8 6.94l3.47-3.47a.75.75 0 1 1 1.06 1.06L9.06 8l3.47 3.47a.75.75 0 1 1-1.06 1.06L8 9.06l-3.47 3.47a.75.75 0 0 1-1.06-1.06L6.94 8 3.47 4.53a.75.75 0 0 1 0-1.06Z"
          fill="currentColor"
          fillRule="evenodd"
        />
      </svg>
    </button>
  );
}

export default function CardWithImagesDemo() {
  return (
    <div className="flex min-h-screen w-full items-center justify-center overflow-hidden bg-background p-4">
      <div className="grid w-full max-w-3xl grid-cols-12 gap-3">
        <Card className="col-span-12 flex h-auto flex-col p-3 sm:flex-row">
          <div className="relative h-[140px] w-full shrink-0 overflow-hidden rounded-2xl sm:h-[120px] sm:w-[120px]">
            <img
              alt="Cherries"
              className="pointer-events-none absolute inset-0 h-full w-full scale-125 object-cover select-none"
              src="https://cdn.21st.dev/assets/mirror/fc/fc030d3b8b5711b0ce567892051d2d7c8b8afd4ff2b0c964ef3cb95fe7b99c00.jpg"
            />
          </div>
          <div className="flex flex-1 flex-col gap-3">
            <Card.Header className="gap-1">
              <Card.Title className="pr-8">Become an ACME Creator!</Card.Title>
              <Card.Description>
                Lorem ipsum dolor sit amet consectetur. Sed arcu donec id aliquam dolor sed amet faucibus etiam.
              </Card.Description>
              <div className="absolute right-3 top-3">
                <CloseButton label="Close banner" />
              </div>
            </Card.Header>
            <Card.Footer className="mt-auto flex w-full flex-col items-start gap-3 sm:flex-row sm:items-center sm:justify-between">
              <div className="flex flex-col">
                <span className="text-sm font-medium">Only 10 spots</span>
                <span className="text-xs text-zinc-500 dark:text-zinc-400">Submission ends Oct 10.</span>
              </div>
              <ActionButton>Apply Now</ActionButton>
            </Card.Footer>
          </div>
        </Card>

        <div className="col-span-12 grid grid-cols-2 gap-3 lg:col-span-6">
          <Card className="col-span-2 p-3">
            <div className="absolute right-3 top-3 z-10">
              <CloseButton label="Close notification" />
            </div>
            <Card.Header>
              <span className="text-xs font-medium uppercase tracking-[0.18em] text-zinc-500 dark:text-zinc-400">PAYMENT</span>
              <Card.Title>You can now withdraw on crypto</Card.Title>
              <Card.Description>Add your wallet in settings to withdraw</Card.Description>
            </Card.Header>
            <Card.Footer>
              <a className="text-sm font-medium text-blue-600 dark:text-blue-400" href="#">
                Go to settings
              </a>
            </Card.Footer>
          </Card>

          <Card className="col-span-1 gap-2 p-3">
            <span className="size-12 overflow-hidden rounded-2xl">
              <img alt="Demo 1" className="size-full object-cover" src="https://cdn.21st.dev/assets/mirror/b1/b18655204b951fe5837e478777ab2631cb0004530fd3b670160c3a96d0a839eb.jpg" />
            </span>
            <Card.Header>
              <Card.Title>Indie Hackers</Card.Title>
              <Card.Description>148 members</Card.Description>
            </Card.Header>
            <Card.Footer className="flex gap-2">
              <img alt="John" className="size-5 rounded-full object-cover" src="https://cdn.21st.dev/assets/mirror/81/81b92cb17f6c3c142a5cdb568904f7bb147d17fe3454737b9187aafca340412c.jpg" />
              <span className="text-xs">By John</span>
            </Card.Footer>
          </Card>

          <Card className="col-span-1 gap-2 p-3">
            <span className="size-12 overflow-hidden rounded-2xl">
              <img alt="Demo 2" className="size-full object-cover" src="https://cdn.21st.dev/assets/mirror/78/78c4eec27e3cdc658fe5595a273a4003f3eef78a480cc2a46a4f36dcf54033aa.jpg" />
            </span>
            <Card.Header>
              <Card.Title>AI Builders</Card.Title>
              <Card.Description>362 members</Card.Description>
            </Card.Header>
            <Card.Footer className="flex gap-2">
              <img alt="John" className="size-5 rounded-full object-cover" src="https://cdn.21st.dev/assets/mirror/de/defa32ddb23b6307c5cb8d701022186645dfcee057d2b0ba9ec1955dea22db70.jpg" />
              <span className="text-xs">By Martha</span>
            </Card.Footer>
          </Card>
        </div>

        <div className="col-span-12 grid grid-cols-2 gap-3 lg:col-span-6">
          <Card className="col-span-1 overflow-hidden p-0">
            <div className="relative h-36">
              <img alt="NEO Home Robot" className="absolute inset-0 h-full w-full object-cover" src="https://cdn.21st.dev/assets/mirror/e8/e84a175f89da33dc8ace36c913a55a2d12d86f6b1ed9649fd7be469509544a51.jpg" />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 text-white">
                <Card.Title className="text-white">NEO</Card.Title>
                <Card.Description className="text-white/80">Home Robot</Card.Description>
                <span className="mt-2 block text-xs">Available soon</span>
              </div>
            </div>
            <Card.Footer className="justify-between p-4">
              <span className="text-xs font-medium">Get notified</span>
              <ActionButton>Notify me</ActionButton>
            </Card.Footer>
          </Card>

          <Card className="col-span-1 overflow-hidden p-0">
            <div className="relative h-36">
              <img alt="NEO Home Robot" className="absolute inset-0 h-full w-full object-cover" src="https://cdn.21st.dev/assets/mirror/86/860d0bb854fdcd117831df0a4592ad03d734e0dd5e56934206572010b8ef6297.jpg" />
              <div className="absolute inset-x-0 bottom-0 bg-gradient-to-t from-black/70 to-transparent p-4 text-white">
                <Card.Title className="text-white">NEO</Card.Title>
                <Card.Description className="text-white/80">$499/m</Card.Description>
              </div>
            </div>
            <Card.Footer className="justify-end p-4">
              <ActionButton>Get now</ActionButton>
            </Card.Footer>
          </Card>

          {[
            ["Bridging the Future", "Today, 6:30 PM", "Futuristic Robot", "https://cdn.21st.dev/assets/mirror/5b/5b15046d3c27c20dd79bd5426e7fbaf7173c9cc3554455fa115767bd3c289a15.jpg"],
            ["Avocado Hackathon", "Wed, 4:30 PM", "Avocado", "https://cdn.21st.dev/assets/mirror/8a/8a5b6d3605778d2a4e3b258347bb8a07f0797f5f2734c18a1cf82a98545e6103.jpg"],
            ["Sound Electro | Beyond art", "Fri, 8:00 PM", "Sound Electro event", "https://cdn.21st.dev/assets/mirror/84/84c1e83131d0e84371fe9ccec959d2926ab1d91167e8f4d619f9f5f8e1e2eb80.jpg"],
          ].map(([title, time, alt, src]) => (
            <Card className="col-span-2 flex-row items-center gap-3 p-3" key={title}>
              <img alt={alt} className="aspect-square h-12 w-12 shrink-0 rounded-xl object-cover select-none" src={src} />
              <div>
                <Card.Title>{title}</Card.Title>
                <Card.Description>{time}</Card.Description>
              </div>
            </Card>
          ))}
        </div>
      </div>
    </div>
  );
}

export { CardWithImagesDemo };