| 35 | * @example view `src/app/docs/animations/skewed-infinite-scroll/page.mdx` |
| 36 | */ |
| 37 | export default function CodeGroup({ |
| 38 | children, |
| 39 | title, |
| 40 | noExpand, |
| 41 | }: { |
| 42 | children: React.ReactNode |
| 43 | title?: string |
| 44 | noExpand?: boolean |
| 45 | }) { |
| 46 | const [minimized, setMinimized] = useState<boolean | undefined>( |
| 47 | noExpand ? undefined : true, |
| 48 | ) |
| 49 | |
| 50 | return ( |
| 51 | <CodeGroupContext.Provider |
| 52 | value={{ |
| 53 | inCodeGroup: true, |
| 54 | hasTitle: Boolean(title), |
| 55 | }} |
| 56 | > |
| 57 | <div |
| 58 | className={cn( |
| 59 | 'relative mb-4 mt-8 border-collapse overflow-hidden rounded-lg border border-gray-600 duration-500 dark:border-gray-700', |
| 60 | )} |
| 61 | > |
| 62 | {title && ( |
| 63 | <div |
| 64 | className={cn( |
| 65 | ' border-b border-gray-600 bg-zinc-800 px-5 py-3 text-xs font-semibold text-white dark:border-gray-700', |
| 66 | )} |
| 67 | > |
| 68 | {title} |
| 69 | </div> |
| 70 | )} |
| 71 | |
| 72 | <div |
| 73 | className={cn( |
| 74 | 'max-h-full transition-[max-height] ', |
| 75 | minimized ? 'max-h-[300px]' : '', |
| 76 | )} |
| 77 | > |
| 78 | {children} |
| 79 | </div> |
| 80 | {!noExpand && ( |
| 81 | <button |
| 82 | className="absolute bottom-0 block w-full rounded-2xl bg-[#18181b50] py-2 text-sm font-medium text-white hover:text-red-500" |
| 83 | onClick={() => setMinimized(!minimized)} |
| 84 | > |
| 85 | {minimized ? 'Expand' : 'Collapse'} |
| 86 | </button> |
| 87 | )} |
| 88 | </div> |
| 89 | </CodeGroupContext.Provider> |
| 90 | ) |
| 91 | } |