131 lines
4.3 KiB
TypeScript
131 lines
4.3 KiB
TypeScript
'use client';
|
|
|
|
import { DynamicCodeBlock } from '@/components/docs/dynamic-codeblock';
|
|
import { CodeTabs } from '@/registry/components/code-tabs';
|
|
import { Step, Steps } from 'fumadocs-ui/components/steps';
|
|
import { CollapsibleContent } from 'fumadocs-ui/components/ui/collapsible';
|
|
import { Collapsible } from 'fumadocs-ui/components/ui/collapsible';
|
|
import { CollapsibleTrigger } from 'fumadocs-ui/components/ui/collapsible';
|
|
import { Button } from '@workspace/ui/components/ui/button';
|
|
import { cn } from '@workspace/ui/lib/utils';
|
|
import { useRef, useState } from 'react';
|
|
import ReactIcon from '@workspace/ui/components/icons/react-icon';
|
|
|
|
const getDepsCommands = (dependencies?: string[]) => {
|
|
if (!dependencies) return undefined;
|
|
return {
|
|
npm: `npm install ${dependencies?.join(' ')}`,
|
|
pnpm: `pnpm add ${dependencies?.join(' ')}`,
|
|
yarn: `yarn add ${dependencies?.join(' ')}`,
|
|
bun: `bun add ${dependencies?.join(' ')}`,
|
|
};
|
|
};
|
|
|
|
const getRegistryDepsCommands = (dependencies?: string[]) => {
|
|
if (!dependencies) return undefined;
|
|
const quotedDependencies = dependencies.map((dep) => `"${dep}"`).join(' ');
|
|
return {
|
|
npm: `npx shadcn@latest add ${quotedDependencies}`,
|
|
pnpm: `pnpm dlx shadcn@latest add ${quotedDependencies}`,
|
|
yarn: `npx shadcn@latest add ${quotedDependencies}`,
|
|
bun: `bun x --bun shadcn@latest add ${quotedDependencies}`,
|
|
};
|
|
};
|
|
|
|
export const ComponentManualInstallation = ({
|
|
path,
|
|
dependencies,
|
|
devDependencies,
|
|
registryDependencies,
|
|
code,
|
|
}: {
|
|
path: string;
|
|
dependencies?: string[];
|
|
devDependencies?: string[];
|
|
registryDependencies?: string[];
|
|
code: string;
|
|
}) => {
|
|
const depsCommands = getDepsCommands(dependencies);
|
|
const devDepsCommands = getDepsCommands(devDependencies);
|
|
const registryDepsCommands = getRegistryDepsCommands(registryDependencies);
|
|
|
|
const [isOpened, setIsOpened] = useState(false);
|
|
const collapsibleRef = useRef<HTMLDivElement>(null);
|
|
|
|
return (
|
|
<Steps>
|
|
{dependencies && depsCommands && (
|
|
<Step>
|
|
<h4 className="pt-1 pb-4">Install the following dependencies:</h4>
|
|
<CodeTabs codes={depsCommands} />
|
|
</Step>
|
|
)}
|
|
|
|
{devDependencies && devDepsCommands && (
|
|
<Step>
|
|
<h4 className="pt-1 pb-4">Install the following dev dependencies:</h4>
|
|
<CodeTabs codes={devDepsCommands} />
|
|
</Step>
|
|
)}
|
|
|
|
{registryDependencies && registryDepsCommands && (
|
|
<Step>
|
|
<h4 className="pt-1 pb-4">
|
|
Install the following registry dependencies:
|
|
</h4>
|
|
<CodeTabs codes={registryDepsCommands} />
|
|
</Step>
|
|
)}
|
|
|
|
<Step>
|
|
<h4 className="pt-1 pb-4">
|
|
Copy and paste the following code into your project:
|
|
</h4>
|
|
|
|
<Collapsible open={isOpened} onOpenChange={setIsOpened}>
|
|
<div ref={collapsibleRef} className="relative overflow-hidden">
|
|
<CollapsibleContent
|
|
forceMount
|
|
className={cn('overflow-hidden', !isOpened && 'max-h-32')}
|
|
>
|
|
<div
|
|
className={cn(
|
|
'[&_pre]:my-0 [&_pre]:max-h-[650px] [&_code]:pb-[60px]',
|
|
!isOpened
|
|
? '[&_pre]:overflow-hidden'
|
|
: '[&_pre]:overflow-auto]',
|
|
)}
|
|
>
|
|
<DynamicCodeBlock
|
|
code={code}
|
|
lang="tsx"
|
|
title={path}
|
|
icon={<ReactIcon />}
|
|
/>
|
|
</div>
|
|
</CollapsibleContent>
|
|
<div
|
|
className={cn(
|
|
'absolute flex items-center justify-center bg-gradient-to-b rounded-t-xl from-neutral-300/30 to-white dark:from-neutral-700/30 dark:to-neutral-950 p-2',
|
|
isOpened ? 'inset-x-0 bottom-0 h-12' : 'inset-0',
|
|
)}
|
|
>
|
|
<CollapsibleTrigger asChild>
|
|
<Button variant="secondary" className="h-8 text-xs">
|
|
{isOpened ? 'Collapse' : 'Expand'}
|
|
</Button>
|
|
</CollapsibleTrigger>
|
|
</div>
|
|
</div>
|
|
</Collapsible>
|
|
</Step>
|
|
|
|
<Step>
|
|
<h4 className="pt-1 pb-4">
|
|
Update the import paths to match your project setup.
|
|
</h4>
|
|
</Step>
|
|
</Steps>
|
|
);
|
|
};
|