Snigdha-OS/package-browser
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/package-browser.git synced 2025-09-07 05:05:17 +02:00
Code Issues Actions Packages Projects Releases Wiki Activity

✨ style(_bar): make search bar smaller

Browse Source
This commit is contained in:
eshanized
2024-12-27 21:27:23 +05:30
parent e906eed310
commit 6bf00156f5
1 changed files with 4 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/components/SearchBar.tsx
View File

@@ -1,4 +1,3 @@
import React from 'react';
import { Search } from 'lucide-react';
interface SearchBarProps {
@@ -8,17 +7,17 @@ interface SearchBarProps {
export function SearchBar({ value, onChange }: SearchBarProps) {
return (
<div className="relative">
<div className="relative w-full max-w-md mx-auto">
<div className="absolute inset-y-0 left-0 pl-3 flex items-center pointer-events-none">
<Search className="h-5 w-5 text-nord-3 dark:text-nord-4" />
<Search className="h-5 w-5 text-nord-6 dark:text-nord-5" />
</div>
<input
type="text"
value={value}
onChange={(e) => onChange(e.target.value)}
placeholder="Search packages..."
className="block w-full pl-10 pr-4 py-3 border border-nord-4 dark:border-nord-2 rounded-lg bg-nord-5 dark:bg-nord-1 focus:ring-2 focus:ring-nord-8 focus:border-transparent shadow-sm text-nord-0 dark:text-nord-6 placeholder-nord-3 dark:placeholder-nord-4"
className="block w-full pl-10 pr-4 py-3 border-2 border-nord-4 dark:border-nord-2 rounded-xl bg-nord-5 dark:bg-nord-1 focus:ring-2 focus:ring-nord-8 focus:border-transparent text-nord-0 dark:text-nord-6 placeholder-nord-3 dark:placeholder-nord-4 transition-all ease-in-out duration-200 shadow-md hover:shadow-lg"
/>
</div>
);
}
}