63 lines
2.5 KiB
TypeScript
63 lines
2.5 KiB
TypeScript
import {storyStates} from "@/lib/models/Story";
|
|
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
|
|
import {faBookOpen, faKeyboard, faMagicWandSparkles, faPalette, faPenNib} from "@fortawesome/free-solid-svg-icons";
|
|
import React, {Dispatch, SetStateAction} from "react";
|
|
|
|
export interface RadioBoxValue {
|
|
label: string;
|
|
value: number;
|
|
}
|
|
|
|
interface RadioBoxProps {
|
|
selected: number;
|
|
setSelected: Dispatch<SetStateAction<number>>;
|
|
name: string;
|
|
}
|
|
|
|
export default function RadioBox(
|
|
{
|
|
selected,
|
|
setSelected,
|
|
name
|
|
}: RadioBoxProps) {
|
|
return (
|
|
<div className="flex flex-wrap gap-2">
|
|
{storyStates.map((option: RadioBoxValue) => (
|
|
<div key={option.value} className="flex items-center">
|
|
<input
|
|
type="radio"
|
|
id={option.label}
|
|
name={name}
|
|
value={option.value}
|
|
checked={selected === option.value}
|
|
onChange={() => setSelected(option.value)}
|
|
className="hidden"
|
|
/>
|
|
<label
|
|
htmlFor={option.label}
|
|
className={`px-3 lg:px-4 py-2 lg:py-2.5 text-xs lg:text-sm font-medium rounded-xl cursor-pointer transition-all duration-200 flex items-center gap-2 ${
|
|
selected === option.value
|
|
? 'bg-primary text-text-primary shadow-lg shadow-primary/30 scale-105 border border-primary-dark'
|
|
: 'bg-secondary/50 text-muted hover:bg-secondary hover:text-text-primary hover:scale-105 border border-secondary/50 hover:border-secondary'
|
|
}`}
|
|
>
|
|
<FontAwesomeIcon
|
|
icon={
|
|
[
|
|
faPenNib,
|
|
faKeyboard,
|
|
faPalette,
|
|
faBookOpen,
|
|
faMagicWandSparkles
|
|
][option.value]
|
|
}
|
|
className={selected === option.value ? "text-text-primary w-5 h-5" : "text-muted w-5 h-5"}
|
|
/>
|
|
{option.label}
|
|
</label>
|
|
</div>
|
|
))}
|
|
</div>
|
|
)
|
|
}
|