); }; const Indicator: React.FC<{ status: Status }> = ({ status }) => { const innerStatusStyles = { success: 'bg-green-600', warning: 'bg-yellow-600', error: 'bg-red-600', }; const outerStatusStyles = { success: 'bg-green-300', warning: 'bg-yellow-300', error: 'bg-red-300', }; return (

); }; a:T5d4,'use client'; import { cn } from '@/lib/utils'; import React, { useState } from 'react'; type tagPickerProps = { tags: string[]; onChange?: (tags: string[]) => void; defaultTags: string[]; onAddTag?: (tag: string) => void; className?: string; }; export const TagPicker: React.FC = ({ tags, defaultTags, onChange, className }) => { const [selectedTags, setSelectedTags] = useState(defaultTags); const handleTagClick = (tag: string) => { if (selectedTags.includes(tag)) { setSelectedTags(selectedTags.filter((selectedTag) => selectedTag !== tag)); } else { setSelectedTags([...selectedTags, tag]); } onChange?.(selectedTags); }; return (

{tags.map((tag) => ( handleTagClick(tag)} checked={selectedTags.includes(tag)} /> ))}

); }; type tagProps = { name: string; onClick: () => void; checked?: boolean; className?: string; }; export const Tag: React.FC = ({ name, className, onClick, checked }) => { return (

caru-ini/my-components

Example

Theme Toggle

Status Card

IceCream

Tag Picker

界隈曲のアレ

Date Picker

User Menu