78 lines
2.4 KiB
TypeScript
78 lines
2.4 KiB
TypeScript
import {
|
|
PreviewCard,
|
|
PreviewCardTrigger,
|
|
PreviewCardContent,
|
|
type PreviewCardProps,
|
|
type PreviewCardContentProps,
|
|
} from '@/registry/base/preview-card';
|
|
|
|
type BasePreviewCardDemoProps = Pick<PreviewCardProps, 'delay' | 'closeDelay'> &
|
|
Pick<
|
|
PreviewCardContentProps,
|
|
'side' | 'sideOffset' | 'align' | 'alignOffset'
|
|
>;
|
|
|
|
export const BasePreviewCardDemo = ({
|
|
delay,
|
|
closeDelay,
|
|
side,
|
|
sideOffset,
|
|
align,
|
|
alignOffset,
|
|
}: BasePreviewCardDemoProps) => {
|
|
return (
|
|
<PreviewCard delay={delay} closeDelay={closeDelay} defaultOpen>
|
|
<PreviewCardTrigger
|
|
render={
|
|
<a
|
|
className="size-12 rounded-full overflow-hidden border"
|
|
href="https://twitter.com/animate_ui"
|
|
target="_blank"
|
|
rel="noreferrer noopener"
|
|
>
|
|
<img
|
|
src="https://pbs.twimg.com/profile_images/1904970066770214912/lYBctz26_400x400.jpg"
|
|
alt="Animate UI"
|
|
/>
|
|
</a>
|
|
}
|
|
/>
|
|
<PreviewCardContent
|
|
side={side}
|
|
sideOffset={sideOffset}
|
|
align={align}
|
|
alignOffset={alignOffset}
|
|
className="w-80"
|
|
>
|
|
<div className="flex flex-col gap-4">
|
|
<img
|
|
className="size-16 rounded-full overflow-hidden border"
|
|
src="https://pbs.twimg.com/profile_images/1904970066770214912/lYBctz26_400x400.jpg"
|
|
alt="Animate UI"
|
|
/>
|
|
<div className="flex flex-col gap-4">
|
|
<div>
|
|
<div className="font-bold">Animate UI</div>
|
|
<div className="text-sm text-muted-foreground">@animate_ui</div>
|
|
</div>
|
|
<div className="text-sm text-muted-foreground">
|
|
A fully animated, open-source component distribution built with
|
|
React, TypeScript, Tailwind CSS, and Motion.
|
|
</div>
|
|
<div className="flex gap-4">
|
|
<div className="flex gap-1 text-sm items-center">
|
|
<div className="font-bold">0</div>{' '}
|
|
<div className="text-muted-foreground">Following</div>
|
|
</div>
|
|
<div className="flex gap-1 text-sm items-center">
|
|
<div className="font-bold">2,900</div>{' '}
|
|
<div className="text-muted-foreground">Followers</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</PreviewCardContent>
|
|
</PreviewCard>
|
|
);
|
|
};
|