Something went wrong. Try again.
a tool for shared writing and social publishing
Something went wrong. Try again.
4.2 kB · 134 lines
TSX
at main
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135import { CheckboxChecked } from "./Icons/CheckboxChecked";import { CheckboxEmpty } from "./Icons/CheckboxEmpty";import { CheckboxIndeterminate } from "./Icons/CheckboxIndeterminate";import { Props } from "./Icons/Props";import React, { forwardRef, useEffect, useRef, type JSX } from "react";
export function Checkbox(props: { checked: boolean; // A parent whose children are only partly checked. Clicking it reports // checked, so callers select the whole group. indeterminate?: boolean; onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; children: React.ReactNode; className?: string; small?: boolean;}) { let ref = useRef<HTMLInputElement>(null); let indeterminate = !props.checked && !!props.indeterminate; // Only settable on the DOM node, and it's what exposes the mixed state to // assistive tech. useEffect(() => { if (ref.current) ref.current.indeterminate = indeterminate; }, [indeterminate]); let marked = props.checked || indeterminate; return ( <label className={`flex w-full gap-2 items-start cursor-pointer ${props.className} ${marked ? "text-primary font-bold " : " text-tertiary font-normal"} ${props.small && "text-sm"}`} > <input ref={ref} type="checkbox" checked={props.checked} className="hidden" onChange={(e) => props.onChange(e)} /> {!marked ? ( <CheckboxEmpty className={`shrink-0 text-tertiary ${props.small ? "mt-1" : "mt-[6px]"}`} /> ) : indeterminate ? ( <CheckboxIndeterminate className={`shrink-0 text-accent-contrast ${props.small ? "mt-1" : "mt-[6px]"}`} /> ) : ( <CheckboxChecked className={`shrink-0 text-accent-contrast ${props.small ? "mt-1" : "mt-[6px]"}`} /> )} {props.children} </label> );}
type RadioProps = Omit<JSX.IntrinsicElements["input"], "content">;
export function Radio( props: { onChange: (e: React.ChangeEvent<HTMLInputElement>) => void; children: React.ReactNode; radioEmptyClassName?: string; radioCheckedClassName?: string; } & JSX.IntrinsicElements["input"],) { return ( <label htmlFor={props.id} className={`flex gap-2 items-start cursor-pointer shrink-0 max-w-full ${props.checked ? "text-primary font-bold " : " text-tertiary font-normal"}`} > <input type="radio" name={props.name} id={props.id} value={props.value} checked={props.checked} className="hidden" onChange={(e) => props.onChange(e)} /> {!props.checked ? ( <RadioEmpty className={`shrink-0 mt-[6px] text-tertiary ${props.radioEmptyClassName}`} /> ) : ( <RadioChecked className={`shrink-0 mt-[6px] text-accent-contrast ${props.radioCheckedClassName}`} /> )} {props.children} </label> );}
const RadioEmpty = (props: Props) => { return ( <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M6 11C8.76142 11 11 8.76142 11 6C11 3.23858 8.76142 1 6 1C3.23858 1 1 3.23858 1 6C1 8.76142 3.23858 11 6 11ZM6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z" fill="currentColor" /> </svg> );};
const RadioChecked = (props: Props) => { return ( <svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg" {...props} > <path fillRule="evenodd" clipRule="evenodd" d="M6 10.5C8.48528 10.5 10.5 8.48528 10.5 6C10.5 3.51472 8.48528 1.5 6 1.5C3.51472 1.5 1.5 3.51472 1.5 6C1.5 8.48528 3.51472 10.5 6 10.5ZM6 12C9.31371 12 12 9.31371 12 6C12 2.68629 9.31371 0 6 0C2.68629 0 0 2.68629 0 6C0 9.31371 2.68629 12 6 12Z" fill="currentColor" /> <path d="M9 6C9 7.65685 7.65685 9 6 9C4.34315 9 3 7.65685 3 6C3 4.34315 4.34315 3 6 3C7.65685 3 9 4.34315 9 6Z" fill="currentColor" /> </svg> );};