import { Link2 } from "lucide-react";
import * as React from "react";

import { cn } from "@/lib/utils";

function BlogImage({ children, className, ...props }: React.ComponentProps<"figure">) {
  return (
    <figure
      data-slot="blog-image"
      className={cn("flex w-full flex-col gap-3.5 py-5 lg:py-9", className)}
      {...props}
    >
      {children}
    </figure>
  );
}

function BlogImageContent({ className, ...props }: React.ComponentProps<"div">) {
  return (
    <div
      data-slot="blog-image-container"
      className={cn(
        "relative aspect-[3/2] overflow-hidden rounded-xl [&_img]:size-full [&_img]:object-cover",
        className
      )}
      {...props}
    />
  );
}

function BlogImageCaption({
  icon = <Link2 aria-hidden="true" />,
  showIcon = true,
  className,
  children,
  ...props
}: React.ComponentProps<"figcaption"> & {
  icon?: React.ReactNode;
  showIcon?: boolean;
}) {
  return (
    <figcaption
      data-slot="blog-image-caption"
      className={cn(
        "flex items-center gap-1.5 font-sans text-sm text-muted-foreground [&_svg:not([class*='size-'])]:size-4",
        className
      )}
      {...props}
    >
      {showIcon && icon}
      {children}
    </figcaption>
  );
}

interface BlogImageAttributionProps {
  author: string;
  authorHref?: string;
  source: string;
  sourceHref?: string;
  prefix?: string;
  separator?: string;
}

function BlogImageAttribution({
  author,
  authorHref,
  source,
  sourceHref,
  prefix = "Photo by",
  separator = "on",
}: BlogImageAttributionProps) {
  const normalizedPrefix = prefix.trim();
  const normalizedSeparator = separator.trim();
  const normalizedAuthor = author.trim();
  const normalizedSource = source.trim();

  // You may change <a> to your framework's Link component, if required.
  return (
    <span data-slot="blog-image-attribution">
      <span>{normalizedPrefix}</span>{" "}
      {authorHref ? (
        <a
          className="underline"
          href={authorHref}
          target="_blank"
          rel="noopener noreferrer"
        >
          {normalizedAuthor}
        </a>
      ) : (
        <span>{normalizedAuthor}</span>
      )}{" "}
      <span>{normalizedSeparator}</span>{" "}
      {sourceHref ? (
        <a
          className="underline"
          href={sourceHref}
          target="_blank"
          rel="noopener noreferrer"
        >
          {normalizedSource}
        </a>
      ) : (
        <span>{normalizedSource}</span>
      )}
    </span>
  );
}

export { BlogImage, BlogImageAttribution, BlogImageCaption, BlogImageContent };

Blog Image

Get access to this component and the full library

Built for real interfaces

Frequently Asked Questions

Are the React components production ready?

Does shadcncraft work for developers using shadcn/ui?

What stack is used?

Can I modify the code?

Does this replace shadcn/ui?

More Components

Real support from the team behind shadcncraft