m/cup
1
0
Fork 0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-14 08:03:48 -05:00
Code Wiki Activity

refactor: search component

Browse Source
This commit is contained in:
Sergio
2025-03-21 18:17:05 +02:00
parent 71164417a0
commit be99438123
3 changed files with 28 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
web/src/App.tsx
View File

@@ -24,6 +24,7 @@ const SORT_ORDER = [
function App() { function App() {
const [data, setData] = useState<Data | null>(null); const [data, setData] = useState<Data | null>(null);
const [searchQuery, setSearchQuery] = useState(""); const [searchQuery, setSearchQuery] = useState("");
if (!data) return <Loading onLoad={setData} />; if (!data) return <Loading onLoad={setData} />;
return ( return (
<div <div
@@ -63,7 +64,9 @@ function App() {
<LastChecked datetime={data.last_updated} /> <LastChecked datetime={data.last_updated} />
<RefreshButton /> <RefreshButton />
</div> </div>
<div className="flex gap-2 px-6 text-black dark:text-white">
<Search onChange={setSearchQuery} /> <Search onChange={setSearchQuery} />
</div>
<ul> <ul>
{Object.entries( {Object.entries(
data.images.reduce<Record<string, typeof data.images>>( data.images.reduce<Record<string, typeof data.images>>(

6
web/src/components/Search.tsx
View File

@@ -23,9 +23,8 @@ export default function Search({
onChange(""); onChange("");
}; };
return ( return (
<div className={`w-full px-6 text-black dark:text-white`}>
<div <div
className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 peer flex-nowrap`} className={`flex w-full items-center rounded-md border border-${theme}-200 dark:border-${theme}-700 gap-1 px-2 bg-${theme}-100 dark:bg-${theme}-900 group relative flex-nowrap`}
> >
<SearchIcon <SearchIcon
className={`size-5 text-${theme}-600 dark:text-${theme}-400`} className={`size-5 text-${theme}-600 dark:text-${theme}-400`}
@@ -46,9 +45,8 @@ export default function Search({
<X className="size-5" /> <X className="size-5" />
</button> </button>
)} )}
</div>
<div <div
className="relative left-1/2 h-[8px] w-0 -translate-x-1/2 -translate-y-[8px] rounded-md border-b-2 border-b-blue-600 transition-all duration-200 peer-has-[:focus]:w-full" className="absolute -bottom-px left-1/2 h-full w-0 -translate-x-1/2 rounded-md border-b-2 border-b-blue-600 transition-all duration-200 group-has-[:focus]:w-[calc(100%+2px)]"
style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }} style={{ clipPath: "inset(calc(100% - 2px) 0 0 0)" }}
></div> ></div>
</div> </div>

12
web/tailwind.config.js
View File

@@ -32,19 +32,11 @@ export default {
}, },
{ {
pattern: /text-(gray|neutral)-600/, pattern: /text-(gray|neutral)-600/,
variants: ["dark", "hover"], variants: ["*", "dark", "hover", "placeholder"],
}, },
{ {
pattern: /text-(gray|neutral)-400/, pattern: /text-(gray|neutral)-400/,
variants: ["dark", "dark:hover"], variants: ["*:dark", "dark", "dark:hover", "placeholder:dark"],
},
{
pattern: /text-(gray|neutral)-600/,
variants: ["placeholder"],
},
{
pattern: /text-(gray|neutral)-400/,
variants: ["placeholder:dark"],
}, },
{ {
pattern: /text-(gray|neutral)-700/, pattern: /text-(gray|neutral)-700/,