Feat: Add FilesTable #3221 (#4491)

### What problem does this PR solve?

Feat: Add FilesTable #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)

web/src/components/list-filter-bar.tsx

@@ -1,6 +1,7 @@
-import { Filter, Search } from 'lucide-react';
+import { Filter } from 'lucide-react';
 import { PropsWithChildren } from 'react';
 import { Button } from './ui/button';
+import { SearchInput } from './ui/input';
 
 interface IProps {
   title: string;
@@ -17,7 +18,7 @@ export default function ListFilterBar({
       <span className="text-3xl font-bold ">{title}</span>
       <div className="flex gap-4 items-center">
         <Filter className="size-5" />
-        <Search className="size-5" />
+        <SearchInput></SearchInput>
         <Button variant={'tertiary'} size={'sm'} onClick={showDialog}>
           {children}
         </Button>

web/src/components/skeleton-card.tsx

@@ -0,0 +1,13 @@
+import { Skeleton } from '@/components/ui/skeleton';
+
+export function SkeletonCard() {
+  return (
+    <div className="flex flex-col space-y-3 items-center">
+      <Skeleton className="h-[125px] w-[250px] rounded-xl" />
+      <div className="space-y-2 w-[250px]">
+        <Skeleton className="h-4 w-[250px]" />
+        <Skeleton className="h-4 w-[200px]" />
+      </div>
+    </div>
+  );
+}

web/src/components/table-skeleton.tsx

@@ -0,0 +1,27 @@
+import { PropsWithChildren } from 'react';
+import { SkeletonCard } from './skeleton-card';
+import { TableCell, TableRow } from './ui/table';
+
+type IProps = { columnsLength: number };
+
+function Row({ children, columnsLength }: PropsWithChildren & IProps) {
+  return (
+    <TableRow>
+      <TableCell colSpan={columnsLength} className="h-24 text-center ">
+        {children}
+      </TableCell>
+    </TableRow>
+  );
+}
+
+export function TableSkeleton({ columnsLength }: { columnsLength: number }) {
+  return (
+    <Row columnsLength={columnsLength}>
+      <SkeletonCard></SkeletonCard>
+    </Row>
+  );
+}
+
+export function TableEmpty({ columnsLength }: { columnsLength: number }) {
+  return <Row columnsLength={columnsLength}>No results.</Row>;
+}

web/src/components/ui/input.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react';
 
 import { cn } from '@/lib/utils';
+import { Search } from 'lucide-react';
 
 export interface InputProps
   extends React.InputHTMLAttributes<HTMLInputElement> {}
@@ -22,4 +23,38 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
 );
 Input.displayName = 'Input';
 
-export { Input };
+export interface ExpandedInputProps extends Omit<InputProps, 'prefix'> {
+  prefix?: React.ReactNode;
+  suffix?: React.ReactNode;
+}
+
+const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
+  return (
+    <div className="relative">
+      <span
+        className={cn({
+          ['absolute left-3 top-[50%] translate-y-[-50%]']: prefix,
+        })}
+      >
+        {prefix}
+      </span>
+      <Input
+        className={cn({ 'pr-10': suffix, 'pl-10': prefix })}
+        {...props}
+      ></Input>
+      <span
+        className={cn({
+          ['absolute right-3 top-[50%] translate-y-[-50%]']: suffix,
+        })}
+      >
+        {suffix}
+      </span>
+    </div>
+  );
+};
+
+const SearchInput = (props: InputProps) => {
+  return <ExpandedInput suffix={<Search />} {...props}></ExpandedInput>;
+};
+
+export { ExpandedInput, Input, SearchInput };