LLM/DocsGPT
1
0
Fork 0
mirror of https://github.com/arc53/DocsGPT.git synced 2025-11-30 00:53:14 +00:00
Code Issues Packages Projects Releases Wiki Activity

(feat:upload) cards for upload types

Browse Source
This commit is contained in:
ManishMadan2882
2025-09-11 13:27:55 +05:30
parent cec8c72b46
commit 18b71ca2f2
11 changed files with 150 additions and 92 deletions
Download Patch File Download Diff File Expand all files Collapse all files

25
frontend/src/components/FilePicker.tsx
View File

@@ -7,6 +7,7 @@ import FileIcon from '../assets/file.svg';
import FolderIcon from '../assets/folder.svg';
import CheckIcon from '../assets/checkmark.svg';
import SearchIcon from '../assets/search.svg';
import Input from './Input';
interface CloudFile {
id: string;
@@ -361,20 +362,16 @@ export const FilePicker: React.FC<CloudFilePickerProps> = ({
{/* Search input */}
<div className="mb-3">
<div className="relative">
<input
type="text"
placeholder="Search files and folders..."
value={searchQuery}
onChange={(e) => handleSearchChange(e.target.value)}
className="w-full px-3 py-2 pr-10 text-sm border border-gray-300 rounded-lg focus:outline-none focus:ring-1 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:text-white"
/>
<button
className="absolute inset-y-0 right-0 flex items-center px-3 text-gray-500 dark:text-gray-400"
>
<img src={SearchIcon} alt="Search" className="w-4 h-4" />
</button>
</div>
<Input
type="text"
placeholder="Search files and folders..."
value={searchQuery}
onChange={(e) => handleSearchChange(e.target.value)}
colorVariant="silver"
borderVariant="thin"
labelBgClassName="bg-white dark:bg-charleston-green-2"
leftIcon={<img src={SearchIcon} alt="Search" width={16} height={16} />}
/>
</div>
<div className="flex items-center justify-between">

12
frontend/src/components/Input.tsx
View File

@@ -16,6 +16,7 @@ const Input = ({
textSize = 'medium',
children,
labelBgClassName = 'bg-white dark:bg-raisin-black',
leftIcon,
onChange,
onPaste,
onKeyDown,
@@ -42,7 +43,7 @@ const Input = ({
<div className={`relative ${className}`}>
<input
ref={inputRef}
className={`peer text-jet dark:text-bright-gray h-[42px] w-full rounded-full bg-transparent px-3 py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
className={`peer text-jet dark:text-bright-gray h-[42px] w-full rounded-full bg-transparent ${leftIcon ? 'pl-10' : 'px-3'} py-1 placeholder-transparent outline-hidden ${colorStyles[colorVariant]} ${borderStyles[borderVariant]} ${textSizeStyles[textSize]} [&:-webkit-autofill]:appearance-none [&:-webkit-autofill]:bg-transparent [&:-webkit-autofill_selected]:bg-transparent`}
type={type}
id={id}
name={name}
@@ -57,12 +58,19 @@ const Input = ({
>
{children}
</input>
{leftIcon && (
<div className="absolute left-3 top-1/2 transform -translate-y-1/2 flex items-center justify-center">
{leftIcon}
</div>
)}
{placeholder && (
<label
htmlFor={id}
className={`absolute select-none ${
hasValue ? '-top-2.5 left-3 text-xs' : ''
} px-2 transition-all peer-placeholder-shown:top-2.5 peer-placeholder-shown:left-3 peer-placeholder-shown:${
} px-2 transition-all peer-placeholder-shown:top-2.5 ${
leftIcon ? 'peer-placeholder-shown:left-7' : 'peer-placeholder-shown:left-3'
} peer-placeholder-shown:${
textSizeStyles[textSize]
} text-gray-4000 pointer-events-none cursor-none peer-focus:-top-2.5 peer-focus:left-3 peer-focus:text-xs dark:text-gray-400 ${labelBgClassName} max-w-[calc(100%-24px)] overflow-hidden text-ellipsis whitespace-nowrap`}
>

1
frontend/src/components/types/index.ts
View File

@@ -22,6 +22,7 @@ export type InputProps = {
onKeyDown?: (
e: React.KeyboardEvent<HTMLTextAreaElement | HTMLInputElement>,
) => void;
leftIcon?: React.ReactNode;
};
export type MermaidRendererProps = {