aljaz/mutiny-web
1
0
Fork 0
mirror of https://github.com/aljazceru/mutiny-web.git synced 2025-12-19 15:24:25 +01:00
Code Issues Packages Projects Releases Wiki Activity

option for address / invoice

Browse Source
This commit is contained in:
Paul Miller
2023-04-26 10:56:15 -05:00
parent 3eb2e0bdb9
commit d5acdf3a82
5 changed files with 114 additions and 74 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/layout/Radio.tsx
View File

@@ -1,24 +1,26 @@
import { RadioGroup } from "@kobalte/core";
import { For } from "solid-js";
import { For, Show } from "solid-js";
type Choices = { value: string, label: string, caption: string }[]
// TODO: how could would it be if we could just pass the estimated fees in here?
export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void }) {
export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void, small?: boolean, }) {
return (
<RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)} class="grid w-full gap-4 grid-cols-2">
<RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)} class={`grid w-full gap-${props.small ? 2 : 4} grid-cols-${props.choices.length}`}>
<For each={props.choices}>
{choice =>
<RadioGroup.Item value={choice.value} class="ui-checked:bg-neutral-950 bg-white/10 rounded outline outline-black/50 ui-checked:outline-m-blue ui-checked:outline-2">
<div class="py-3 px-4">
<div class={props.small ? "py-2 px-2" : "py-3 px-4"}>
<RadioGroup.ItemInput />
<RadioGroup.ItemControl >
<RadioGroup.ItemIndicator />
</RadioGroup.ItemControl>
<RadioGroup.ItemLabel class="ui-checked:text-white text-neutral-400">
<div class="block">
<div class="text-lg font-semibold">{choice.label}</div>
<div class="text-sm font-light">{choice.caption}</div>
<div class={`text-${props.small ? "base" : "lg"} font-semibold`}>{choice.label}</div>
<Show when={!props.small}>
<div class="text-sm font-light">{choice.caption}</div>
</Show>
</div>
</RadioGroup.ItemLabel>
</div>