import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar/radix';
import { PreviewCard, PreviewCardContent, PreviewCardTrigger } from '@/components/ui/preview-card/base';

export default function BasePreviewCardDefault() {
  return (
    <PreviewCard>
      <PreviewCardTrigger className="text-sm">
        Learn more about <span className="text-primary underline underline-offset-4 cursor-help">@reui_io</span>.
      </PreviewCardTrigger>
      <PreviewCardContent className="w-80">
        <div className="flex justify-between gap-4">
          <Avatar>
            <AvatarImage src="/" alt="no" />
            <AvatarFallback>TK</AvatarFallback>
          </Avatar>
          <div className="space-y-1">
            <h4 className="text-sm font-semibold">@tokenui</h4>
            <p className="text-sm">
              Open-source collection of UI components and animated effects built with React, Typescript, Tailwind CSS,
              and Motion.
            </p>
          </div>
        </div>
      </PreviewCardContent>
    </PreviewCard>
  );
}
Preview Card Pattern

Default

We use cookies
