53 lines
1.5 KiB
TypeScript
53 lines
1.5 KiB
TypeScript
import BaseUIIcon from '@workspace/ui/components/icons/baseui-icon';
|
|
import HeadlessUIIcon from '@workspace/ui/components/icons/headlessui-icon';
|
|
import RadixIcon from '@workspace/ui/components/icons/radix-icon';
|
|
import ShadcnIcon from '@workspace/ui/components/icons/shadcn-icon';
|
|
import type { BuildPageTreeOptions } from 'fumadocs-core/source';
|
|
|
|
const Icon = ({ children }: { children: React.ReactNode }) => {
|
|
return (
|
|
<span className="size-4.5 [&_svg]:!size-[11px] flex items-center justify-center bg-foreground text-background rounded-sm">
|
|
{children}
|
|
</span>
|
|
);
|
|
};
|
|
|
|
const Separator = ({ icon, name }: { icon: React.ReactNode; name: string }) => {
|
|
return (
|
|
<span className="flex items-center gap-1.5">
|
|
<Icon>{icon}</Icon>
|
|
<span>{name}</span>
|
|
</span>
|
|
);
|
|
};
|
|
|
|
export const attachSeparator: BuildPageTreeOptions['attachSeparator'] = (
|
|
node,
|
|
) => {
|
|
switch (node.name) {
|
|
case 'Radix UI / Shadcn UI':
|
|
node.name = (
|
|
<>
|
|
<Separator
|
|
icon={<RadixIcon className="!size-2.5" />}
|
|
name="Radix UI"
|
|
/>{' '}
|
|
/{' '}
|
|
<Separator
|
|
icon={<ShadcnIcon className="!size-3.5" />}
|
|
name="Shadcn UI"
|
|
/>
|
|
</>
|
|
);
|
|
break;
|
|
case 'Base UI':
|
|
node.name = <Separator icon={<BaseUIIcon />} name="Base UI" />;
|
|
break;
|
|
case 'Headless UI':
|
|
node.name = <Separator icon={<HeadlessUIIcon />} name="Headless UI" />;
|
|
break;
|
|
}
|
|
|
|
return node;
|
|
};
|