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

enhance embed editor

Browse source
This commit is contained in:
grngxd 2025-08-08 23:01:23 +01:00
parent 393f08129b
commit 30b3ae5044
1 changed files with 76 additions and 18 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -17,15 +17,30 @@ const StorageAndPlan = component$(() => {
}
});
const title = useSignal("this is a test");
const description = useSignal("this is a test description");
const color = useSignal("#FF264E");
return (
<div class="flex flex-col gap-2">
<p>current plan: stereo pro+</p>
<p>storage used: 3.8 / 15 GB</p>
<p>upgrade your plan for more features</p>
<div class="flex flex-col mb-2">
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M10 2a6 6 0 016 6v2a6 6 0 01-12 0V8a6 6 0 016-6zm0 2a4 4 0 00-4 4v2a4 4 0 008 0V8a4 4 0 00-4-4z"/></svg>
<p class="text-white/80">current plan: <span class="text-stereo font-semibold">pro+</span></p>
</div>
<div class="flex items-center gap-2">
<svg class="w-5 h-5 text-stereo" fill="currentColor" viewBox="0 0 20 20"><path d="M4 3a2 2 0 00-2 2v10a2 2 0 002 2h12a2 2 0 002-2V5a2 2 0 00-2-2H4zm0 2h12v10H4V5zm2 2v6h8V7H6z"/></svg>
<p class="text-white/80">storage used: <span class="font-semibold text-white">3.8</span> / <span class="text-white/50">15 GB</span></p>
</div>
<div class="w-full h-2 bg-white/10 rounded-full overflow-hidden mt-1 mb-2">
<div class="h-full bg-stereo rounded-full w-[calc(3.8/15*100%)]" />
</div>
<p class="text-sm text-white/40">upgrade your plan for more features</p>
</div>
<p class="text-lg">embed editor</p>
<p class="text-xl">embed editor</p>
{user.value && (
<div class="flex gap-2">
<div class="flex gap-3">
<div class="flex gap-3">
<img
class="rounded-full w-12 h-12"
@ -41,21 +56,64 @@ const StorageAndPlan = component$(() => {
<p>{user.value.global_name}</p>
<p class="text-sm opacity-50">{new Date().toLocaleTimeString().split(":").slice(0, 2).join(":")}</p>
</div>
<div class="overflow-clip flex bg-black/25 rounded-lg">
<div class="w-1.5 bg-stereo" />
<div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
<p class="text-sm opacity-50">This is a test</p>
<img
class="rounded-sm aspect-[3/2]"
src="https://placehold.co/300x200"
/>
<div class="overflow-clip flex bg-black/25 rounded-lg">
{(title.value || description.value) ? (
<>
<div class="w-1.5" style={{ backgroundColor: color.value }} />
<div class="flex flex-col p-2 gap-2 border-2 border-white/10 border-l-0 rounded-r-lg">
<div class="flex flex-col">
{ title.value && <p>{title.value}</p> }
{ description.value && <p class="text-sm opacity-50">{description.value}</p> }
</div>
<img
class="rounded-sm aspect-[3/2]"
src="https://placehold.co/300x200"
/>
</div>
</>
) : (
<img
class="rounded-sm aspect-[3/2]"
src="https://placehold.co/300x200"
/>
)}
</div>
</div>
</div>
</div>
<div>
{/* form for embed */}
<div class="flex flex-col gap-2">
<div class="flex flex-col">
<p class="text-sm text-white/70">title</p>
<input
type="text"
class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
placeholder="enter a title..."
value={title.value}
onInput$={(e) => title.value = (e.target as HTMLInputElement).value}
/>
</div>
<div class="flex flex-col">
<p class="text-sm text-white/70">description</p>
<textarea
class="bg-black/40 border border-white/10 rounded-lg px-3 py-2 text-white focus:outline-none focus:border-stereo transition"
placeholder="enter a description..."
rows={3}
value={description.value}
onInput$={(e) => description.value = (e.target as HTMLTextAreaElement).value}
/>
</div>
<div class="flex flex-col">
<p class="text-sm text-white/70">color</p>
<input
type="color"
class="bg-black/40 rounded-lg w-full"
value={color.value}
onInput$={(e) => color.value = (e.target as HTMLInputElement).value}
/>
</div>
</div>
</div>
)}
@ -188,7 +246,7 @@ export default component$(() => {
</div>
</div>
<div class="flex flex-col flex-3/4 text-lg overflow-clip">
<div class="flex flex-col flex-3/4 text-lg overflow-clip overflow-y-auto">
<h1 class="text-2xl mb-2">{categories.value[selectedCategory.value].name}</h1>
<SelectedComponent.value />
</div>