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  FolderContent as FolderContentPrimitive,
15  FileHighlight as FileHighlightPrimitive,
16  File as FilePrimitive,
17  FileIcon as FileIconPrimitive,
18} from '@/components/animate-ui/primitives/radix/files';
19import { cn } from '@/lib/utils';
20 
21function Files({
22  className,
23  children,
24  ...props
25}) {
26  return (
27    <FilesPrimitive className={cn('p-2 w-full', className)} {...props}>
28      <FilesHighlightPrimitive className="bg-accent rounded-lg pointer-events-none">
29        {children}
30      </FilesHighlightPrimitive>
31    </FilesPrimitive>
32  );
33}
34 
35function SubFiles(props) {
36  return <FilesPrimitive {...props} />;
37}
38 
39function FolderItem(props) {
40  return <FolderItemPrimitive {...props} />;
41}
42 
43function FolderTrigger({
44  children,
45  className,
46  gitStatus,
47  ...props
48}) {
49  return (
50    <FolderHeaderPrimitive>
51      <FolderTriggerPrimitive className="w-full text-start">
52        <FolderHighlightPrimitive>
53          <FolderPrimitive
54            className="flex items-center justify-between gap-2 p-2 pointer-events-none">
55            <div
56              className={cn(
57                'flex items-center gap-2',
58                gitStatus === 'untracked' && 'text-green-400',
59                gitStatus === 'modified' && 'text-amber-400',
60                gitStatus === 'deleted' && 'text-red-400'
61              )}>
62              <FolderIconPrimitive
63                closeIcon={<FolderIcon className="size-4.5" />}
64                openIcon={<FolderOpenIcon className="size-4.5" />} />
65              <FileLabelPrimitive className={cn('text-sm', className)} {...props}>
66                {children}
67              </FileLabelPrimitive>
68            </div>
69 
70            {gitStatus && (
71              <span
72                className={cn(
73                  'rounded-full size-2',
74                  gitStatus === 'untracked' && 'bg-green-400',
75                  gitStatus === 'modified' && 'bg-amber-400',
76                  gitStatus === 'deleted' && 'bg-red-400'
77                )} />
78            )}
79          </FolderPrimitive>
80        </FolderHighlightPrimitive>
81      </FolderTriggerPrimitive>
82    </FolderHeaderPrimitive>
83  );
84}
85 
86function FolderContent(props) {
87  return (
88    <div
89      className="relative ml-6 before:absolute before:-left-2 before:inset-y-0 before:w-px before:h-full before:bg-border">
90      <FolderContentPrimitive {...props} />
91    </div>
92  );
93}
94 
95function FileItem({
96  icon: Icon = FileIcon,
97  className,
98  children,
99  gitStatus,
100  ...props
101}) {
102  return (
103    <FileHighlightPrimitive>
104      <FilePrimitive
105        className={cn(
106          'flex items-center justify-between gap-2 p-2 pointer-events-none',
107          gitStatus === 'untracked' && 'text-green-400',
108          gitStatus === 'modified' && 'text-amber-400',
109          gitStatus === 'deleted' && 'text-red-400'
110        )}>
111        <div className="flex items-center gap-2">
112          <FileIconPrimitive>
113            <Icon className="size-4.5" />
114          </FileIconPrimitive>
115          <FileLabelPrimitive className={cn('text-sm', className)} {...props}>
116            {children}
117          </FileLabelPrimitive>
118        </div>
119 
120        {gitStatus && (
121          <span className="text-sm font-medium">
122            {gitStatus === 'untracked' && 'U'}
123            {gitStatus === 'modified' && 'M'}
124            {gitStatus === 'deleted' && 'D'}
125          </span>
126        )}
127      </FilePrimitive>
128    </FileHighlightPrimitive>
129  );
130}
131 
132export { Files, FolderItem, FolderTrigger, FolderContent, FileItem, SubFiles };
133