Portfolio Header 12

import { Badge } from "@/components/ui/badge";

type ImageProps = {
  src: string;
  alt?: string;
};

type Tag = {
  url: string;
  label: string;
};

type Props = {
  heading: string;
  description: string;
  tags: Tag[];
  image: ImageProps;
};

export type PortfolioHeader12Props = React.ComponentPropsWithoutRef<"section"> & Partial<Props>;

export const PortfolioHeader12 = (props: PortfolioHeader12Props) => {
  const { heading, description, tags, image } = {
    ...PortfolioHeader12Defaults,
    ...props,
  };
  return (
    <section className="relative px-[5%]">
      <div className="absolute inset-0 z-0">
        <img src={image.src} alt={image.alt} className="size-full object-cover" />
        <span className="absolute inset-0 z-10 bg-neutral-darkest/50" />
      </div>
      <div className="relative z-10 flex min-h-svh items-end justify-center">
        <div className="container">
          <div className="grid grid-cols-1 items-start gap-6 py-16 md:grid-cols-2 md:gap-x-12 md:py-24 lg:gap-20 lg:py-28">
            <div>
              <h1 className="mb-5 text-h1 font-bold text-white md:mb-6">{heading}</h1>
              <div className="mt-5 flex flex-wrap gap-2 md:mt-6">
                {tags.map((tag, index) => (
                  <Badge key={index} variant="alternate">
                    <a href={tag.url}>{tag.label}</a>
                  </Badge>
                ))}
              </div>
            </div>
            <p className="text-medium text-white">{description}</p>
          </div>
        </div>
      </div>
    </section>
  );
};

export const PortfolioHeader12Defaults: Props = {
  heading: "Project name here",
  description:
    "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse varius enim in eros elementum tristique. Duis cursus, mi quis viverra ornare, eros dolor interdum nulla, ut commodo diam libero vitae erat.",
  tags: [
    {
      label: "Tag one",
      url: "#",
    },
    {
      label: "Tag two",
      url: "#",
    },
    {
      label: "Tag three",
      url: "#",
    },
  ],
  image: {
    src: "https://d22po4pjz3o32e.cloudfront.net/placeholder-image.svg",
    alt: "Relume placeholder image 1",
  },
};