prmbr-image-mksaas/content/docs/components/tabs.client.tsx
javayhu 16aaf55a91 refactor: enhance documentation feature and update dependencies
- Updated content collections to include new schemas for better document handling.
- Added new documentation files for comparisons, customization, and internationalization.
- Introduced a manual installation guide and improved markdown support.
- Updated package.json with new dependencies for enhanced functionality.
- Added new images for documentation and improved layout components for better user experience.
- Adjusted TypeScript configurations for better path management.
2025-03-30 22:34:16 +08:00

46 lines
1.0 KiB
TypeScript

'use client';
import { buttonVariants } from '@/components/ui/button';
import { cn } from '@/lib/utils';
import { Tab, Tabs } from 'fumadocs-ui/components/tabs';
import { useEffect, useState } from 'react';
export function UrlBar() {
const [url, setUrl] = useState('');
useEffect(() => {
const timer = setInterval(() => {
setUrl(window.location.pathname + window.location.hash);
}, 100);
return () => {
clearInterval(timer);
};
}, []);
return <pre className="rounded-lg border bg-card p-2 text-sm">{url}</pre>;
}
export function WithoutValueTest() {
const [items, setItems] = useState(['Item 1', 'Item 2']);
return (
<>
<Tabs items={items}>
{items.map((item) => (
<Tab key={item}>{item}</Tab>
))}
</Tabs>
<button
className={cn(
buttonVariants({
variant: 'secondary',
}),
)}
onClick={() => setItems(['Item 1', 'Item 3', 'Item 2'])}
>
Change Items
</button>
</>
);
}