98 lines
2.9 KiB
Svelte
98 lines
2.9 KiB
Svelte
<script lang="ts">
|
|
import {
|
|
RadioGroup,
|
|
RadioGroupDescription,
|
|
RadioGroupLabel,
|
|
RadioGroupOption,
|
|
} from "$lib";
|
|
const plans = [
|
|
{
|
|
name: "Startup",
|
|
ram: "12GB",
|
|
cpus: "6 CPUs",
|
|
disk: "160 GB SSD disk",
|
|
},
|
|
{
|
|
name: "Business",
|
|
ram: "16GB",
|
|
cpus: "8 CPUs",
|
|
disk: "512 GB SSD disk",
|
|
},
|
|
{
|
|
name: "Enterprise",
|
|
ram: "32GB",
|
|
cpus: "12 CPUs",
|
|
disk: "1024 GB SSD disk",
|
|
},
|
|
];
|
|
|
|
let selected = plans[0];
|
|
</script>
|
|
|
|
<div class="w-full px-4 py-16">
|
|
<div class="w-full max-w-md mx-auto">
|
|
<RadioGroup value={selected} on:change={(e) => (selected = e.detail)}>
|
|
<RadioGroupLabel class="sr-only">Server size</RadioGroupLabel>
|
|
<div class="space-y-2">
|
|
{#each plans as plan (plan.name)}
|
|
<RadioGroupOption
|
|
value={plan}
|
|
class={({ active, checked }) =>
|
|
`${
|
|
active
|
|
? "ring-2 ring-offset-2 ring-offset-sky-300 ring-white ring-opacity-60"
|
|
: ""
|
|
}
|
|
${
|
|
checked ? "bg-sky-900 bg-opacity-75 text-white" : "bg-white"
|
|
}
|
|
relative rounded-lg shadow-md px-5 py-4 cursor-pointer flex focus:outline-none`}
|
|
let:checked
|
|
>
|
|
<div class="flex items-center justify-between w-full">
|
|
<div class="flex items-center">
|
|
<div class="text-sm">
|
|
<RadioGroupLabel
|
|
as="p"
|
|
class={`font-medium ${
|
|
checked ? "text-white" : "text-gray-900"
|
|
}`}
|
|
>
|
|
{plan.name}
|
|
</RadioGroupLabel>
|
|
<RadioGroupDescription
|
|
as="span"
|
|
class={`inline ${
|
|
checked ? "text-sky-100" : "text-gray-500"
|
|
}`}
|
|
>
|
|
<span>
|
|
{plan.ram}/{plan.cpus}
|
|
</span>{" "}
|
|
<span aria-hidden="true">·</span>{" "}
|
|
<span>{plan.disk}</span>
|
|
</RadioGroupDescription>
|
|
</div>
|
|
</div>
|
|
{#if checked}
|
|
<div class="flex-shrink-0 text-white">
|
|
<svg viewBox="0 0 24 24" fill="none" class="w-6 h-6">
|
|
<circle cx={12} cy={12} r={12} fill="#fff" opacity="0.2" />
|
|
<path
|
|
d="M7 13l3 3 7-7"
|
|
stroke="#fff"
|
|
stroke-width={1.5}
|
|
stroke-linecap="round"
|
|
stroke-linejoin="round"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
{/if}
|
|
</div>
|
|
</RadioGroupOption>
|
|
{/each}
|
|
</div>
|
|
</RadioGroup>
|
|
</div>
|
|
</div>
|