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

new masonry layout for dashboard

Browse source
This commit is contained in:
grngxd 2025-07-29 23:02:40 +01:00
parent 361c4e0b62
commit c0563b844a
2 changed files with 25 additions and 14 deletions
Download patch file Download diff file Expand all files Collapse all files

27
src/components/dashboard/Settings.tsx
View file

@ -10,7 +10,9 @@ import { isSettingsOpen } from "~/lib/stores";
const StorageAndPlan = component$(() => { const StorageAndPlan = component$(() => {
return ( return (
<div> <div>
<p>current plan: stereo free</p> <p>current plan: stereo pro+</p>
<p>storage used: 3.8 / 15 GB</p>
<p>upgrade your plan for more features</p>
</div> </div>
); );
}); });
@ -31,6 +33,14 @@ const PrivacyAndSecurity = component$(() => {
); );
}); });
const DangerZone = component$(() => {
return (
<div>
<p>delete your account and data here</p>
</div>
);
});
export default component$(() => { export default component$(() => {
const open = useNanostore$<boolean>(isSettingsOpen); const open = useNanostore$<boolean>(isSettingsOpen);
@ -50,8 +60,9 @@ export default component$(() => {
const categories = useSignal([ const categories = useSignal([
{ name: "storage & plan", component: StorageAndPlan }, { name: "storage & plan", component: StorageAndPlan },
{ name: "api & integrations" , component: Integrations }, { name: "api & integrations", component: Integrations },
{ name: "privacy & security" , component: PrivacyAndSecurity } { name: "privacy & security", component: PrivacyAndSecurity },
{ name: "danger zone", component: DangerZone }
]) ])
const selectedCategory = useSignal(0); const selectedCategory = useSignal(0);
@ -81,17 +92,17 @@ export default component$(() => {
onClick$={e => e.stopPropagation()} onClick$={e => e.stopPropagation()}
class="flex gap-8 bg-black/30 bg-gradient-to-t from-stereo/20 to-transparent p-8 rounded-3xl shadow-lg w-4/7 h-4/7" class="flex gap-8 bg-black/30 bg-gradient-to-t from-stereo/20 to-transparent p-8 rounded-3xl shadow-lg w-4/7 h-4/7"
> >
<div class="flex flex-col justify-between flex-1/4 border-r-2 border-white/25"> <div class="flex flex-col justify-between flex-1/4 border-r-2 border-white/15">
<h1 class="text-2xl">settings</h1> <h1 class="text-2xl">settings</h1>
<div> <div>
{categories.value.map((category, i) => ( {categories.value.map((category, i) => (
<div <div
key={category.name} key={category.name}
class={[ class={[
"group py-2 px-3 transition-colors cursor-pointer rounded-l-xl", "group py-2 px-3 transition-colors cursor-pointer rounded-l-xl select-none",
selectedCategory.value === i selectedCategory.value === i
? "bg-white/20 text-white" ? "bg-white/10 text-white"
: "hover:bg-white/15 text-white/75 hover:text-white" : "hover:bg-white/5 text-white/75 hover:text-white"
].join(" ")} ].join(" ")}
onClick$={() => (selectedCategory.value = i)} onClick$={() => (selectedCategory.value = i)}
> >
@ -101,7 +112,7 @@ export default component$(() => {
))} ))}
</div> </div>
</div> </div>
<div class="flex flex-col flex-3/4 text-lg"> <div class="flex flex-col flex-3/4 text-lg overflow-clip">
<h1 class="text-2xl mb-4">{categories.value[selectedCategory.value].name}</h1> <h1 class="text-2xl mb-4">{categories.value[selectedCategory.value].name}</h1>
<SelectedComponent.value /> <SelectedComponent.value />
</div> </div>

12
src/routes/dashboard/index.tsx
View file

@ -68,7 +68,7 @@ const Files = component$<{
width={400} width={400}
src={`/api/${file.ID}`} src={`/api/${file.ID}`}
alt={file.Name} alt={file.Name}
class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300" class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
/> />
)} )}
{fileType.value === "video" && ( {fileType.value === "video" && (
@ -76,18 +76,18 @@ const Files = component$<{
width={400} width={400}
src={`/api/${file.ID}`} src={`/api/${file.ID}`}
controls controls
class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300" class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
/> />
)} )}
{fileType.value === "audio" && ( {fileType.value === "audio" && (
<audio <audio
src={`/api/${file.ID}`} src={`/api/${file.ID}`}
controls controls
class="w-full h-60 object-cover flex-grow hover:scale-105 transition-all duration-300" class="w-full min-h-30 object-cover flex-grow hover:scale-105 transition-all duration-300"
/> />
)} )}
{fileType.value === "other" && ( {fileType.value === "other" && (
<div class="w-full h-60 flex items-center justify-center bg-gray-200 text-gray-500"> <div class="w-full min-h-30 flex items-center justify-center bg-gray-200 text-gray-500">
<p>Unsupported file type</p> <p>Unsupported file type</p>
</div> </div>
)} )}
@ -116,8 +116,8 @@ const Files = component$<{
); );
}); });
return ( return (
<div class="px-2 mb-6 flex flex-col w-full max-h-full overflow-y-auto overflow-x-hidden mask-clip-content rounded-3xl"> <div class="px-2 mb-6 flex-grow overflow-y-auto mask-clip-content rounded-3xl">
<div class="w-full h-full columns-1 md:columns-2 lg:columns-4 gap-2"> <div class="w-full columns-1 md:columns-2 lg:columns-4 gap-2 space-y-2">
{files.value.map((file) => ( {files.value.map((file) => (
<File key={file.ID} file={file} /> <File key={file.ID} file={file} />
))} ))}