current plan: pro+

storage used: 3.8 / 15 GB

{user.value.global_name}

{new Date().toLocaleTimeString().split(":").slice(0, 2).join(":")}

{(title.value || description.value) ? ( <>

{ title.value &&

{title.value}

} { description.value &&

{description.value}

}

) : (

)}

title

title.value = (e.target as HTMLInputElement).value} />

description

description.value = (e.target as HTMLTextAreaElement).value}
                            />
                        </div>

<div class="flex flex-col">
                            <p class="text-sm text-white/50">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>
            )}
        </div>
    );
});

const Integrations = component$(() => {
    return (
        <div>
            <p>manage your api keys and integrations here</p>
        </div>
    );
});

const PrivacyAndSecurity = component$(() => {
    return (
        <div>
            <p>manage your privacy settings and security options</p>
        </div>
    );
});

return (
        <div>
            <p>delete your account and data here</p>
            <button
                onClick$={handleLogout}
                class="text-white bg-stereo hover:bg-stereo/80 transition-colors rounded-lg px-4 py-2"
            >
                log out
            </button>
        </div>
    );
});

export default component$(() => {
    const open = useNanostore$<boolean>(isSettingsOpen);
    const visible = useSignal(false);
    const shouldRender = useSignal(open.value);

useTask$(({ track }) => {
        track(() => open.value);
        if (open.value) {
            shouldRender.value = true;
            setTimeout(() => { visible.value = true; }, 10);
        } else {
            visible.value = false;
            setTimeout(() => { shouldRender.value = false; }, 300);
        }
    });

const categories = useSignal([
        {
            name: "storage & plan",
            description: "manage your storage and plan details",
            component: StorageAndPlan
        },
        {
            name: "api & integrations",
            description: "manage your api keys and integrations",
            component: Integrations
        },
        {
            name: "privacy & security",
            description: "manage your privacy settings and security options",
            component: PrivacyAndSecurity
        },
        {
            name: "danger zone",
            description: "delete your account and data",
            component: DangerZone
        }
    ])

const selectedCategory = useSignal(0);
    const SelectedComponent = useComputed$(() => {
        return categories.value[selectedCategory.value].component;
    });

if (!shouldRender.value) return <></>;
    return (
        <div
            onClick$={() => (open.value = false)}
            style={{
                opacity: visible.value ? 1 : 0,
            }}
            class="z-[50] fixed inset-0 flex items-center justify-center bg-black/50 text-white text-6xl backdrop-blur-3xl transition-opacity duration-300"
        >
            <div
                data-aos="fade-up"
                data-aos-duration="400"
                data-aos-anchor-placement="top-center"
                data-aos-easing="ease-out-quad"
                style={{
                    border: "0.5px solid #FF264E",
                    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",
                }}
                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"
            >
                <div class="flex flex-col justify-between flex-1/4 border-r-2 border-white/15">
                    <h1 class="text-2xl">settings</h1>
                    <div>
                        {categories.value.map((category, i) => (
                            <div
                                key={category.name}
                                class={[
                                    "group py-2 px-3 transition-colors cursor-pointer rounded-l-xl select-none",
                                    selectedCategory.value === i
                                        ? "bg-white/10 text-white"
                                        : "hover:bg-white/5 text-white/75 hover:text-white"
                                ].join(" ")}
                                onClick$={() => (selectedCategory.value = i)}
                            >
                                <h2 class="text-lg">{category.name}</h2>
                                <p class="text-sm text-white/25">{category.description}</p>
                            </div>
                        ))}
                    </div>
                </div>
                
                <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>
            </div>
        </div>
    );
});