Preview Card

"use client";

import { Avatar, AvatarFallback } from "@/siteplane/components/avatar";
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/siteplane/components/preview-card";

export default function Example() {
  return (
    <p className="text-sm">
      Assigned to{" "}
      <PreviewCard>
        <PreviewCardTrigger
          className="font-medium underline underline-offset-4"
          href="#ben-carter"
        >
          @ben
        </PreviewCardTrigger>
        <PreviewCardPopup>
          <div className="flex gap-3">
            <Avatar className="size-10">
              <AvatarFallback>BC</AvatarFallback>
            </Avatar>
            <div className="grid min-w-0 gap-1">
              <p className="font-medium">Ben Carter</p>
              <p className="text-muted-foreground">
                Product designer on the web team.
              </p>
              <p className="text-muted-foreground text-xs">Joined March 2024</p>
            </div>
          </div>
        </PreviewCardPopup>
      </PreviewCard>
    </p>
  );
}

"use client";

import { LayoutTemplateIcon } from "lucide-react";
import {
  PreviewCard,
  PreviewCardPopup,
  PreviewCardTrigger,
} from "@/siteplane/components/preview-card";
import { Progress } from "@/siteplane/components/progress";

export default function Example() {
  return (
    <p className="text-sm">
      The latest designs are in{" "}
      <PreviewCard>
        <PreviewCardTrigger
          className="font-medium underline underline-offset-4"
          href="#website-redesign"
        >
          Website Redesign
        </PreviewCardTrigger>
        <PreviewCardPopup className="w-80">
          <div className="grid w-full min-w-0 gap-3">
            <div className="flex min-w-0 items-start gap-3">
              <LayoutTemplateIcon
                aria-hidden="true"
                className="size-5 shrink-0 text-muted-foreground"
              />
              <div className="grid min-w-0 gap-0.5">
                <p className="font-medium leading-5">Website Redesign</p>
                <p className="line-clamp-2 text-muted-foreground text-xs leading-5">
                  New marketing site with a refreshed homepage and pricing page.
                </p>
              </div>
            </div>
            <div className="grid gap-2">
              <Progress aria-label="Tasks done" max={18} size="sm" value={12} />
              <p className="flex items-center justify-between gap-3 text-muted-foreground text-xs">
                <span>12 of 18 tasks done</span>
                <span>Due October 30</span>
              </p>
            </div>
          </div>
        </PreviewCardPopup>
      </PreviewCard>
      .
    </p>
  );
}