stereo.cat/frontend
2
1
Fork 0
Code Issues 4 Pull requests Projects 1 Releases Packages Wiki Activity Actions

Enhance dashboard components with new icons, layout adjustments, and improved file display

Browse source
This commit is contained in:
grngxd 2025-06-21 20:27:32 +01:00
parent f164351011
commit b36d3b76a1
9 changed files with 159 additions and 26 deletions
Download patch file Download diff file Expand all files Collapse all files

40
src/components/dashboard/OSBar.tsx
View file

@ -1,9 +1,45 @@
import { component$ } from "@builder.io/qwik";
import { SolarLibraryLinear, SolarRoundedMagniferLinear, SolarSettingsLinear, SolarUploadMinimalisticLinear, StereoCircularProgress, StereoLogoLinear } from "../misc/Icons";
export default component$(() => {
const used = 3.8;
const total = 15;
return (
<div class="flex w-full h-48 bg-red-500 align-bottom">
a
<div class="absolute bottom-0 left-0 flex items-center justify-between p-7 px-16 w-full">
<div style={{
borderRadius: "999px",
border: "0.5px solid #FF264E",
background: "rgba(255, 38, 78, 0.15)",
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center px-6 py-4 gap-2 text-white text-xl">
<StereoCircularProgress value={used/total} class="text-2xl"/>
<p>{used} / {total} GB</p>
</div>
<div style={{
borderRadius: "999px",
border: "0.5px solid #FF264E",
background: "rgba(255, 38, 78, 0.15)",
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center px-6 py-4 gap-5 text-white text-3xl absolute left-1/2 transform -translate-x-1/2">
<StereoLogoLinear />
<SolarLibraryLinear />
<SolarUploadMinimalisticLinear />
<SolarRoundedMagniferLinear />
<SolarSettingsLinear />
</div>
<div style={{
borderRadius: "999px",
border: "0.5px solid #FF264E",
background: "rgba(255, 38, 78, 0.15)",
boxShadow: "0px 4px 20px 0px rgba(255, 38, 78, 0.08), 0px 8px 12px 0px rgba(0, 0, 0, 0.12), 0px 4px 4px 0px rgba(0, 0, 0, 0.06), 0px 2px 1px 0px rgba(0, 0, 0, 0.04), 0px 4px 8px 0px rgba(255, 38, 78, 0.12) inset, 0px 1px 3px 0px rgba(255, 38, 78, 0.24) inset",
backdropFilter: "blur(12px)",
}} class="flex items-center justify-center px-6 py-4 gap-2 text-white text-xl">
?
</div>
</div>
)
})