Files

1import * as React from 'react';
2import { FolderIcon, FolderOpenIcon, FileIcon } from 'lucide-react';
3 
4import {
5  Files as FilesPrimitive,
6  FilesHighlight as FilesHighlightPrimitive,
7  FolderItem as FolderItemPrimitive,
8  FolderHeader as FolderHeaderPrimitive,
9  FolderTrigger as FolderTriggerPrimitive,
10  FolderHighlight as FolderHighlightPrimitive,
11  Folder as FolderPrimitive,
12  FolderIcon as FolderIconPrimitive,
13  FileLabel as FileLabelPrimitive,
14  FolderPanel as FolderPanelPrimitive,
15  FileHighlight as FileHighlightPrimitive,
16  File as FilePrimitive,
17  FileIcon as FileIconPrimitive,
18  type FilesProps as FilesPrimitiveProps,
19  type FolderItemProps as FolderItemPrimitiveProps,
20  type FolderPanelProps as FolderPanelPrimitiveProps,
21  type FileProps as FilePrimitiveProps,
22  type FileLabelProps as FileLabelPrimitiveProps,
23} from '@/components/animate-ui/primitives/base/files';
24import { cn } from '@/lib/utils';
25 
26type GitStatus = 'untracked' | 'modified' | 'deleted';
27 
28type FilesProps = FilesPrimitiveProps;
29 
30function Files({ className, children, ...props }: FilesProps) {
31  return (
32    <FilesPrimitive className={cn('p-2 w-full', className)} {...props}>
33      <FilesHighlightPrimitive className="bg-accent rounded-lg pointer-events-none">
34        {children}
35      </FilesHighlightPrimitive>
36    </FilesPrimitive>
37  );
38}
39 
40type SubFilesProps = FilesProps;
41 
42function SubFiles(props: SubFilesProps) {
43  return <FilesPrimitive {...props} />;
44}
45 
46type FolderItemProps = FolderItemPrimitiveProps;
47 
48function FolderItem(props: FolderItemProps) {
49  return <FolderItemPrimitive {...props} />;
50}
51 
52type FolderTriggerProps = FileLabelPrimitiveProps & {
53  gitStatus?: GitStatus;
54};
55 
56function FolderTrigger({
57  children,
58  className,
59  gitStatus,
60  ...props
61}: FolderTriggerProps) {
62  return (
63    <FolderHeaderPrimitive>
64      <FolderTriggerPrimitive className="w-full text-start">
65        <FolderHighlightPrimitive>
66          <FolderPrimitive className="flex items-center justify-between gap-2 p-2 pointer-events-none">
67            <div
68              className={cn(
69                'flex items-center gap-2',
70                gitStatus === 'untracked' && 'text-green-400',
71                gitStatus === 'modified' && 'text-amber-400',
72                gitStatus === 'deleted' && 'text-red-400',
73              )}
74            >
75              <FolderIconPrimitive
76                closeIcon={<FolderIcon className="size-4.5" />}
77                openIcon={<FolderOpenIcon className="size-4.5" />}
78// … truncated