Feat: Modify the dataset list page style #3221 (#7437)

### What problem does this PR solve?

Feat: Modify the dataset list page style #3221

### Type of change


- [x] New Feature (non-breaking change which adds functionality)
This commit is contained in:
balibabu
2025-04-30 15:37:16 +08:00
committed by GitHub
parent 6e7dd54a50
commit fea9d970ec
14 changed files with 84 additions and 43 deletions

View File

@ -12,7 +12,7 @@ const Input = React.forwardRef<HTMLInputElement, InputProps>(
<input
type={type}
className={cn(
'flex h-10 w-full rounded-md border border-input bg-colors-background-inverse-weak px-3 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
'flex h-8 w-full rounded-md border border-input bg-colors-background-inverse-weak px-2 py-2 text-sm ring-offset-background file:border-0 file:bg-transparent file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50',
className,
)}
ref={ref}
@ -28,7 +28,12 @@ export interface ExpandedInputProps extends Omit<InputProps, 'prefix'> {
suffix?: React.ReactNode;
}
const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
const ExpandedInput = ({
suffix,
prefix,
className,
...props
}: ExpandedInputProps) => {
return (
<div className="relative">
<span
@ -39,7 +44,7 @@ const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
{prefix}
</span>
<Input
className={cn({ 'pr-10': suffix, 'pl-10': prefix })}
className={cn({ 'pr-8': !!suffix, 'pl-8': !!prefix }, className)}
{...props}
></Input>
<span
@ -54,7 +59,12 @@ const ExpandedInput = ({ suffix, prefix, ...props }: ExpandedInputProps) => {
};
const SearchInput = (props: InputProps) => {
return <ExpandedInput suffix={<Search />} {...props}></ExpandedInput>;
return (
<ExpandedInput
prefix={<Search className="size-3.5" />}
{...props}
></ExpandedInput>
);
};
export { ExpandedInput, Input, SearchInput };