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

radio group theming

Browse Source
This commit is contained in:
Paul Miller
2023-04-29 23:27:41 -05:00
parent b383dfd275
commit 05967a948a
2 changed files with 5 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -4,13 +4,13 @@ import { For, Show } from "solid-js";
type Choices = { value: string, label: string, caption: string }[] type Choices = { value: string, label: string, caption: string }[]
// TODO: how could would it be if we could just pass the estimated fees in here? // 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, }) { export function StyledRadioGroup(props: { value: string, choices: Choices, onValueChange: (value: string) => void, small?: boolean, red?: boolean }) {
return ( return (
// TODO: rewrite this with CVA, props are bad for tailwind // TODO: rewrite this with CVA, props are bad for tailwind
<RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)} class={`grid w-full gap-${props.small ? "2" : "4"} grid-cols-${props.choices.length.toString()}`}> <RadioGroup.Root value={props.value} onValueChange={(e) => props.onValueChange(e)} class={`grid w-full gap-${props.small ? "2" : "4"} grid-cols-${props.choices.length.toString()}`}>
<For each={props.choices}> <For each={props.choices}>
{choice => {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"> <RadioGroup.Item value={choice.value} class={`ui-checked:bg-neutral-950 bg-white/10 rounded outline outline-black/50 ${props.red ? "ui-checked:outline-m-red" : "ui-checked:outline-m-blue"} ui-checked:outline-2`}>
<div class={props.small ? "py-2 px-2" : "py-3 px-4"}> <div class={props.small ? "py-2 px-2" : "py-3 px-4"}>
<RadioGroup.ItemInput /> <RadioGroup.ItemInput />
<RadioGroup.ItemControl > <RadioGroup.ItemControl >

4
tailwind.config.cjs
View File

@@ -10,7 +10,9 @@ module.exports = {
'grid-cols-1', 'grid-cols-1',
'grid-cols-2', 'grid-cols-2',
'gap-2', 'gap-2',
'gap-4' 'gap-4',
'outline-m-red',
'outline-m-blue',
], ],
variants: { variants: {
extend: { extend: {