info/developer-roadmap
1
0
Fork 0
mirror of https://github.com/kamranahmedse/developer-roadmap.git synced 2025-09-29 10:28:59 +02:00
Code Issues Releases Wiki Activity

UI improvements for ai library

Browse Source
This commit is contained in:
Kamran Ahmed
2025-06-18 22:51:19 +01:00
parent 256518b68c
commit 0503b64cba
6 changed files with 153 additions and 142 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
src/components/GenerateCourse/AICourseSearch.tsx
View File

@@ -6,10 +6,11 @@ type AICourseSearchProps = {
value: string;
onChange: (value: string) => void;
placeholder?: string;
disabled?: boolean;
};
export function AICourseSearch(props: AICourseSearchProps) {
const { value: defaultValue, onChange, placeholder } = props;
const { value: defaultValue, onChange, placeholder, disabled } = props;
const [searchTerm, setSearchTerm] = useState(defaultValue);
const debouncedSearchTerm = useDebounceValue(searchTerm, 500);
@@ -31,16 +32,17 @@ export function AICourseSearch(props: AICourseSearchProps) {
}, [debouncedSearchTerm]);
return (
<div className="relative w-64 max-sm:hidden">
<div className="relative mb-4">
<div className="pointer-events-none absolute inset-y-0 left-0 flex items-center pl-3">
<SearchIcon className="h-4 w-4 text-gray-400" />
</div>
<input
type="text"
className="block w-full rounded-md border border-gray-200 bg-white py-1.5 pr-3 pl-10 leading-5 placeholder-gray-500 focus:border-gray-300 focus:ring-blue-500 focus:outline-hidden disabled:opacity-70 sm:text-sm"
className="block w-full rounded-lg border border-gray-200 bg-white py-3 pr-3 pl-10 leading-5 placeholder-gray-500 focus:border-gray-300 focus:ring-blue-500 focus:outline-hidden disabled:opacity-70 sm:text-sm"
placeholder={placeholder || 'Search courses...'}
value={searchTerm}
onChange={(e) => setSearchTerm(e.target.value)}
disabled={disabled}
/>
</div>
);