m/cup
1
0
Fork 0
mirror of https://github.com/sergi0g/cup.git synced 2025-11-16 17:13:46 -05:00
Code Wiki Activity

Fixed CSS bugs, formatted code

Browse Source
This commit is contained in:
Sergio
2024-10-25 17:09:54 +03:00
parent 6d45409928
commit 8d70d7ae4d
12 changed files with 96 additions and 84 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
web/src/App.tsx
View File

@@ -15,41 +15,41 @@ function App() {
if (!data) return <Loading onLoad={setData} />;
return (
<div
className={`flex justify-center min-h-screen bg-${theme}-50 dark:bg-${theme}-950`}
className={`flex min-h-screen justify-center bg-${theme}-50 dark:bg-${theme}-950`}
>
<div className="lg:px-8 sm:px-6 px-4 max-w-[80rem] mx-auto h-full w-full">
<div className="flex flex-col max-w-[48rem] mx-auto h-full my-8">
<div className="mx-auto h-full w-full max-w-[80rem] px-4 sm:px-6 lg:px-8">
<div className="mx-auto my-8 flex h-full max-w-[48rem] flex-col">
<div className="flex items-center gap-1">
<h1 className="text-5xl lg:text-6xl font-bold dark:text-white">
<h1 className="text-5xl font-bold lg:text-6xl dark:text-white">
Cup
</h1>
<Logo />
</div>
<div
className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
>
<dl className="lg:grid-cols-4 md:grid-cols-2 gap-1 grid-cols-1 grid overflow-hidden *:relative">
<dl className="grid grid-cols-1 gap-1 overflow-hidden *:relative md:grid-cols-2 lg:grid-cols-4">
{Object.entries(data.metrics).map(([name, value]) => (
<Statistic name={name} value={value} key={name} />
))}
</dl>
</div>
<div
className={`shadow-sm bg-white dark:bg-${theme}-900 rounded-md my-8`}
className={`bg-white shadow-sm dark:bg-${theme}-900 my-8 rounded-md`}
>
<div
className={`flex justify-between items-center px-6 py-4 text-${theme}-500`}
className={`flex items-center justify-between px-6 py-4 text-${theme}-500`}
>
<LastChecked datetime={data.last_updated} />
<RefreshButton />
</div>
<Search onChange={setSearchQuery}/>
<ul
className={`dark:divide-${theme}-800 divide-y dark:text-white`}
>
{data.images.filter((image) => image.reference.includes(searchQuery)).map((image) => (
<Image data={image} key={image.reference} />
))}
<Search onChange={setSearchQuery} />
<ul className={`dark:divide-${theme}-800 divide-y dark:text-white`}>
{data.images
.filter((image) => image.reference.includes(searchQuery))
.map((image) => (
<Image data={image} key={image.reference} />
))}
</ul>
</div>
</div>