Card

Use these responsive card components to show data entries and information to your users in multiple forms and contexts such as for your blog, application, user profiles, and more.

Aiko 🐈

Meet the orange cat, a charismatic furball with a coat as vibrant as a summer sunset. This feline fashionista proudly dons a luxurious fur ensemble in various shades of citrus, making every day a catwalk. With eyes that sparkle like the juiciest mandarin, this orange fluff-master struts through life, leaving a trail of paw prints and a lingering scent of sunshine. Known for stealing hearts faster than you can peel an orange, this cat is the ultimate blend of mischief and zest, making it the purrfect companion for anyone in need of a daily dose of Vitamin Cuteness. 🍊😺

import React from "react";
import Image from "next/image";
import { VariantProps, cva } from "class-variance-authority";
import { cn } from "@/lib/utils";

type CardProps = {
  children: React.ReactNode;
};

type CardHeaderProps = {
  imageUrl: string;
};

type CardFooterProps = {
  children: React.ReactNode;
};

type CardBodyProps = {
  children: React.ReactNode;
};

const cardVariants = cva(
  "w-full max-w-[350px] h-full overflow-hidden border-black border-2 shadow-[8px_8px_0px_rgba(0,0,0,1)] bg-white",
  {
    variants: {
      rounded: {
        none: "rounded-none",
        sm: "rounded-sm",
        md: "rounded-md",
        lg: "rounded-lg",
        xl: "rounded-xl",
      },
    },
    defaultVariants: {
      rounded: "none",
    },
  },
);

const Card: React.FC<CardProps & VariantProps<typeof cardVariants>> & {
  Header: React.FC<CardHeaderProps>;
  Footer: React.FC<CardFooterProps>;
  Body: React.FC<CardBodyProps>;
} = ({ rounded = "none", children, ...props }) => {
  return (
    <div className={`${cn(cardVariants({ rounded }))}`} {...props}>
      {children}
    </div>
  );
};

Card.Header = function CardHeader({ imageUrl }: CardHeaderProps) {
  return (
    <div className="relative block w-full max-h-[300px] min-h-[250px]">
      <Image
        src={imageUrl}
        alt="thumbnail"
        layout="fill"
        objectFit="cover"
        loading="lazy"
      />
    </div>
  );
};

Card.Footer = function CardFooter({ children }: CardFooterProps) {
  return <div className="px-6 py-5 text-left h-full">{children}</div>;
};

Card.Body = function CardBody({ children }: CardBodyProps) {
  return <div className="px-6 py-5 text-justify h-full">{children}</div>;
};

Card.displayName = "Card";

export default Card;

❤️

byIval Shamkya