Snigdha-OS/package-browser
2
0
Fork 0
mirror of https://github.com/Snigdha-OS/package-browser.git synced 2025-09-08 13:45:00 +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'; import { Search } from 'lucide-react';
interface SearchBarProps { interface SearchBarProps {
@@ -8,17 +7,17 @@ interface SearchBarProps {
export function SearchBar({ value, onChange }: SearchBarProps) { export function SearchBar({ value, onChange }: SearchBarProps) {
return ( 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"> <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> </div>
<input <input
type="text" type="text"
value={value} value={value}
onChange={(e) => onChange(e.target.value)} onChange={(e) => onChange(e.target.value)}
placeholder="Search packages..." 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> </div>
); );
} }