mutiny-web/src/components/layout/Radio.tsx

import { RadioGroup } from "@kobalte/core";
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, small?: boolean, accent?: "red" | "white" }) {
    return (
        // TODO: rewrite this with CVA, props are bad for tailwind
        <RadioGroup.Root value={props.value} onChange={(e) => props.onValueChange(e)}
            class={"grid w-full gap-4"}
            classList={{ "grid-cols-2": props.choices.length === 2, "grid-cols-3": props.choices.length === 3, "gap-2": props.small }}
        >
            <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`}
                        classList={{ "ui-checked:outline-m-red": props.accent === "red", "ui-checked:outline-white": props.accent === "white", "ui-checked:outline-black/50 ui-checked:bg-white/10": props.choices.length === 1 }}
                    >
                        <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 classList={{ "text-base": props.small, "text-lg": !props.small }} class={`font-semibold max-sm:text-sm`}>{choice.label}</div>
                                    <Show when={!props.small}>
                                        <div class="text-sm font-light">{choice.caption}</div>
                                    </Show>
                                </div>
                            </RadioGroup.ItemLabel>
                        </div>
                    </RadioGroup.Item>
                }
            </For>
        </RadioGroup.Root>
    )
}