ad427365c9
* feat(docs): add interactive examples and API references for Button, Card, and LoadingFallback components - Updated dependencies - Set `retries` to a fixed value of 3 for consistent test retries across environments. - Increased `timeout` from 60 seconds to 120 seconds to allow more time for tests to complete. - Reduced `expect` timeout from 10 seconds to 5 seconds for quicker feedback on assertions.
61 lines
1.4 KiB
TypeScript
61 lines
1.4 KiB
TypeScript
'use client';
|
|
|
|
import { Check, Copy } from 'lucide-react';
|
|
|
|
import { Button } from '@kit/ui/button';
|
|
import {
|
|
Card,
|
|
CardContent,
|
|
CardDescription,
|
|
CardHeader,
|
|
CardTitle,
|
|
} from '@kit/ui/card';
|
|
|
|
import { useCopyCode } from '../lib/story-utils';
|
|
|
|
interface CodeCardProps {
|
|
title?: string;
|
|
description?: string;
|
|
code: string;
|
|
language?: 'tsx' | 'jsx' | 'javascript' | 'typescript';
|
|
className?: string;
|
|
}
|
|
|
|
export function CodeCard({
|
|
title = 'Generated Code',
|
|
description = 'Copy and paste this code into your project',
|
|
code,
|
|
language = 'tsx',
|
|
className,
|
|
}: CodeCardProps) {
|
|
const { copiedCode, copyCode } = useCopyCode();
|
|
|
|
return (
|
|
<Card className={className}>
|
|
<CardHeader>
|
|
<div className="flex items-center justify-between">
|
|
<div>
|
|
<CardTitle>{title}</CardTitle>
|
|
<CardDescription>{description}</CardDescription>
|
|
</div>
|
|
|
|
<Button onClick={() => copyCode(code)} size="sm" variant="outline">
|
|
{copiedCode ? (
|
|
<Check className="mr-2 h-4 w-4" />
|
|
) : (
|
|
<Copy className="mr-2 h-4 w-4" />
|
|
)}
|
|
|
|
{copiedCode ? 'Copied!' : 'Copy'}
|
|
</Button>
|
|
</div>
|
|
</CardHeader>
|
|
<CardContent>
|
|
<pre className="bg-muted overflow-x-auto rounded-lg p-4 text-sm">
|
|
<code>{code}</code>
|
|
</pre>
|
|
</CardContent>
|
|
</Card>
|
|
);
|
|
}
|