diff --git a/src/components/dashboard/OSBar.tsx b/src/components/dashboard/OSBar.tsx index 4607fcf..44f6698 100644 --- a/src/components/dashboard/OSBar.tsx +++ b/src/components/dashboard/OSBar.tsx @@ -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 ( -
- a +
+
+ +

{used} / {total} GB

+
+ +
+ + + + + +
+ +
+ ? +
) }) \ No newline at end of file diff --git a/src/components/dashboard/TitleBar.tsx b/src/components/dashboard/TitleBar.tsx index ba9caa5..c26af60 100644 --- a/src/components/dashboard/TitleBar.tsx +++ b/src/components/dashboard/TitleBar.tsx @@ -1,4 +1,4 @@ -import { component$ } from "@builder.io/qwik"; +import { component$, useTask$ } from "@builder.io/qwik"; import { useNanostore$ } from "~/hooks/nanostores"; import { userInfo } from "~/lib/stores"; import { StereoUser } from "~/lib/types"; @@ -26,9 +26,13 @@ export default component$(() => { const user = useNanostore$(userInfo); const splits = greeting.split("|"); + + useTask$(({ track }) => { + track(() => user.value); + }) return ( -
+

{splits[0]} diff --git a/src/components/landing/Footer.tsx b/src/components/landing/Footer.tsx index 16fef9d..363619f 100644 --- a/src/components/landing/Footer.tsx +++ b/src/components/landing/Footer.tsx @@ -1,5 +1,5 @@ import { component$ } from "@builder.io/qwik"; -import StereoLogo from "../misc/StereoLogo"; +import { StereoLogoBold } from "../misc/Icons"; export default component$(() => { return ( @@ -7,7 +7,7 @@ export default component$(() => {

- + stereo.cat diff --git a/src/components/landing/Navbar.tsx b/src/components/landing/Navbar.tsx index 85fb716..4e23a25 100644 --- a/src/components/landing/Navbar.tsx +++ b/src/components/landing/Navbar.tsx @@ -1,5 +1,5 @@ import { component$ } from "@builder.io/qwik"; -import StereoLogo from "../misc/StereoLogo"; +import { StereoLogoBold } from "../misc/Icons"; export default component$(() => { const items = [ @@ -17,7 +17,7 @@ export default component$(() => { data-aos-duration="1000" class="fixed flex items-center justify-start top-6 left-1/2 transform -translate-x-1/2 bg-neutral-950 p-8 h-10 rounded-full lg:w-2/3 md:w-4/5 w-4/5 z-[9999999] shadow-lg">
- +

diff --git a/src/components/misc/Icons.tsx b/src/components/misc/Icons.tsx index 5500ae1..73511c1 100644 --- a/src/components/misc/Icons.tsx +++ b/src/components/misc/Icons.tsx @@ -1,5 +1,7 @@ import { QwikIntrinsicElements } from "@builder.io/qwik"; +// Solar - https://icones.js.org/collection/solar + export function SolarUploadLinear(props: QwikIntrinsicElements['svg'], key: string) { return ( @@ -26,7 +28,6 @@ export function SolarLinkRoundBold(props: QwikIntrinsicElements['svg'], key: str ) } - export function SolarDownloadMinimalisticBold(props: QwikIntrinsicElements['svg'], key: string) { return ( @@ -36,4 +37,86 @@ export function SvgSpinnersBarsRotateFade(props: QwikIntrinsicElements['svg'], k return ( ) +} + +export function SolarLibraryLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +export function SolarUploadMinimalisticLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + + +export function SolarRoundedMagniferLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + + +export function SolarSettingsLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +// Stereo + +export function StereoLogoBold(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +export function StereoLogoLinear(props: QwikIntrinsicElements['svg'], key: string) { + return ( + + ) +} + +export function StereoCircularProgress( + { value, ...svgProps }: QwikIntrinsicElements['svg'] & { value: number }, + key: string +) { + const radius = 10; + const circumference = 2 * Math.PI * radius; + const dashOffset = circumference * (1 - value); + + return ( + + + + + ); } \ No newline at end of file diff --git a/src/components/misc/StereoLogo.tsx b/src/components/misc/StereoLogo.tsx deleted file mode 100644 index 892ea95..0000000 --- a/src/components/misc/StereoLogo.tsx +++ /dev/null @@ -1,9 +0,0 @@ -import { component$, QwikIntrinsicElements } from "@builder.io/qwik"; - -export default component$((props: QwikIntrinsicElements['svg']) => { - return ( - - - - ) -}) \ No newline at end of file diff --git a/src/routes/dashboard/index.tsx b/src/routes/dashboard/index.tsx index 10aa70b..5bd769c 100644 --- a/src/routes/dashboard/index.tsx +++ b/src/routes/dashboard/index.tsx @@ -26,7 +26,7 @@ export default component$(() => { }); return ( -

+
@@ -39,9 +39,24 @@ const Files = component$<{ loaded: Signal; // eslint-disable-next-line @typescript-eslint/no-unused-vars }>(({ files, loaded }) => { + + const File = component$(({ file }: { file: StereoFile }) => { + return ( +
+ {file.Name} +
+ ) + }) + return ( -
- b +
+
+ {files.value.map((file) => ( + Array.from({ length: 15 }).map((_, i) => ( + + )) + ))} +
); }); diff --git a/src/routes/layout.tsx b/src/routes/layout.tsx index 9ed7b73..0d156ac 100644 --- a/src/routes/layout.tsx +++ b/src/routes/layout.tsx @@ -1,4 +1,4 @@ -import { $, component$, Slot, useOnDocument } from '@builder.io/qwik'; +import { $, component$, Slot, useOnDocument, useVisibleTask$ } from '@builder.io/qwik'; import AOS from 'aos'; import 'aos/dist/aos.css'; import { useNanostore$ } from '~/hooks/nanostores'; @@ -9,8 +9,11 @@ import { StereoUser } from '~/lib/types'; export default component$(() => { const info = useNanostore$(userInfo); + useVisibleTask$(async () => { + info.value = await api.me(); + }) + useOnDocument("DOMContentLoaded", $(async () => { - info.value = await api.me() AOS.init({ once: true,