Here is the preview: https://sorenblank.com/snippets // And this was originally published on Twitter: https://twitter.com/sorenblank/status/1977053360722457050

Snippets.tsx

import Link from "next/link";
import { SNIPPETS_CONFIG, type Snippet } from "./config";

interface SnippetCardProps {
  snippet: Snippet;
  isFirst: boolean;
  isLast: boolean;
  video?: string;
}

const SnippetCard = ({ snippet, isFirst, isLast, video }: SnippetCardProps) => {
  return (
    <Link
      href={`/snippets/${snippet.slug}`}
      className={`group cursor-default transition-all duration-200 ease-in-out ${isFirst ? "hover:pb-1" : ""} ${isLast ? "hover:pt-1" : ""} ${!isFirst && !isLast ? "hover:py-1" : ""}`}
    >
      <div
        className={`bg-secondary/10 group-hover:bg-secondary/20 relative overflow-hidden rounded-sm p-4 transition-all duration-200 ease-in-out group-hover:rounded-xl ${isFirst ? "rounded-t-xl" : ""} ${isLast ? "rounded-b-xl" : ""}`}
      >
        <div className="flex flex-col gap-3">
          {/* Header with Featured Badge, Tags and Date */}
          <div className="flex items-center justify-between gap-2">
            <div className="flex flex-wrap items-center gap-2">
              {snippet.featured && (
                <span className="bg-primary/10 text-primary text-overline rounded-md px-2 py-0.5 text-[11px] font-semibold">
                  FEATURED
                </span>
              )}
              {snippet.tags.slice(0, 2).map((tag) => (
                <span
                  key={tag}
                  className="text-overline text-subdued text-[11px] opacity-70"
                >
                  {tag}
                </span>
              ))}
            </div>
            <span className="text-overline text-subdued text-[11px] opacity-70">
              {snippet.date}
            </span>
          </div>

          {/* Title */}
          <h3 className="text-body-md text-default group-hover:text-primary transition-colors duration-200">
            {snippet.title}
          </h3>

          {/* Description */}
          <p className="text-body-sm text-subdued leading-relaxed">
            {snippet.description}
          </p>
        </div>
        {/*
                    This container holds the video and controls its reveal animation.
                    It's part of the normal document flow, which makes it responsive.
                    - By default, it's hidden with `max-h-0` and `opacity-0`.
                    - On `group-hover` (when hovering the parent Link), it transitions
                    to a visible state with a max-height and full opacity, creating a smooth slide-down effect.
                */}
        {video && (
          <div className="overflow-hidden transition-all duration-250 ease-in-out group-hover:opacity-100 group-hover:blur-none group-hover:delay-400 max-md:pt-2 lg:max-h-0 lg:opacity-0 lg:blur-lg lg:group-hover:max-h-[500px] lg:group-hover:pt-4">
            <video
              src={video}
              className="border-foreground/20 w-full rounded-lg border-2"
              width={3598}
              height={2248}
              autoPlay
              loop
              muted
              playsInline
            />
          </div>
        )}
      </div>
    </Link>
  );
};