mirror of
https://github.com/System-End/hackatime.git
synced 2026-04-20 00:35:22 +00:00
ef3f36c829
* Inertia p1? * Inertia'fied signed out homepage? * Split up signed in page * WIP signed in v2? * Better signed in? * Clean up extensions page! * Fix currently hacking * Better docs page? * Docs update 2 * Clean up "What is Hackatime?" + get rid of that godawful green dev mode * Better nav? * Cleaner settings? * Fix commit times * Fix flashes + OS improv * Setup v2 * Readd some of the syncers? * Remove stray emdash * Clean up Step 3 * Oops, remove .vite * bye bye, /inertia-example * bin/rubocop -A * Fix docs vuln
38 lines
1.4 KiB
Svelte
38 lines
1.4 KiB
Svelte
<script lang="ts">
|
|
interface Props {
|
|
currentStep: number;
|
|
}
|
|
|
|
let { currentStep }: Props = $props();
|
|
|
|
const steps = [
|
|
{ number: 1, label: "Install" },
|
|
{ number: 2, label: "Editor" },
|
|
{ number: 3, label: "Plugin" },
|
|
{ number: 4, label: "Finish" }
|
|
];
|
|
</script>
|
|
|
|
<div class="mb-10">
|
|
<div class="relative flex items-center justify-between w-full max-w-2xl mx-auto">
|
|
<div class="absolute top-5 left-0 w-full h-0.5 bg-darkless -z-10"></div>
|
|
|
|
{#each steps as step}
|
|
<div class="flex flex-col items-center gap-2 bg-darker z-10 px-2">
|
|
<div class="w-10 h-10 rounded-full flex items-center justify-center text-sm font-bold border-2 transition-colors duration-200
|
|
{currentStep > step.number ? 'bg-green border-green text-darker' :
|
|
currentStep === step.number ? 'bg-primary border-primary text-white' :
|
|
'bg-dark border-darkless text-secondary'}">
|
|
{#if currentStep > step.number}
|
|
<svg class="w-5 h-5" fill="none" stroke="currentColor" stroke-width="3" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" d="M5 13l4 4L19 7" />
|
|
</svg>
|
|
{:else}
|
|
{step.number}
|
|
{/if}
|
|
</div>
|
|
<span class="text-xs font-medium {currentStep === step.number ? 'text-white' : 'text-secondary'}">{step.label}</span>
|
|
</div>
|
|
{/each}
|
|
</div>
|
|
</div>
|