{title}

}\n {children}\n \n );\n}\n\ninterface FieldLabelProps {\n children: React.ReactNode;\n htmlFor?: string;\n className?: string;\n}\n\nexport function FieldLabel({ children, htmlFor, className }: FieldLabelProps) {\n return (\n \n {children}\n \n );\n}\n\ninterface TimeInputFieldProps {\n label: string;\n value: string;\n onChange: (value: string) => void;\n id?: string;\n name?: string;\n inputClassName?: string;\n}\n\nexport function TimeInputField({\n label,\n value,\n onChange,\n id,\n name,\n inputClassName,\n}: TimeInputFieldProps) {\n const baseInputClasses =\n \"w-full px-4 py-3 text-lg border-2 border-gray-200 rounded-lg focus:border-blue-400 focus:outline-none\";\n\n return (\n

\n {label}\n onChange(e.target.value)}\n className={`${baseInputClasses} ${inputClassName ?? \"\"}`.trim()}\n required\n />\n

\n );\n}\n\ninterface PrimaryButtonProps {\n children: React.ReactNode;\n type?: \"button\" | \"submit\" | \"reset\";\n disabled?: boolean;\n onClick?: () => void;\n className?: string;\n}\n\nexport function PrimaryButton({\n children,\n type = \"button\",\n disabled,\n onClick,\n className,\n}: PrimaryButtonProps) {\n const baseClasses =\n \"inline-flex items-center justify-center rounded-lg font-medium bg-blue-500 text-white hover:bg-blue-600 disabled:bg-gray-300 disabled:cursor-not-allowed\";\n\n return (\n \n {children}\n \n );\n}\n\ninterface ErrorTextProps {\n message: string;\n className?: string;\n}\n\nexport function ErrorText({ message, className }: ErrorTextProps) {\n return (\n

{message}

\n );\n}\n\ninterface MoodRatingButtonsProps {\n value: number | null;\n onChange: (value: number) => void;\n labels?: (string | React.ReactNode)[];\n}\n\nexport function MoodRatingButtons({\n value,\n onChange,\n labels,\n}: MoodRatingButtonsProps) {\n const scores = [1, 2, 3, 4, 5];\n\n return (\n

\n {scores.map((score) => {\n const selected = value === score;\n const label = labels && labels[score - 1] !== undefined\n ? labels[score - 1]\n : score;\n return (\n onChange(score)}\n className={`flex-1 min-h-[44px] py-3 text-lg font-semibold rounded-lg border-2 transition-all ${\n selected\n ? \"bg-blue-500 text-white border-blue-500 scale-105\"\n : \"bg-white text-gray-700 border-gray-300 hover:border-blue-300 active:bg-blue-100 active:scale-95\"\n }`}\n >\n {label}\n \n );\n })}\n

\n );\n}\n\ninterface OverstimulationRatingButtonsProps {\n value: number | null;\n onChange: (value: number) => void;\n labels?: (string | React.ReactNode)[];\n}\n\nexport function OverstimulationRatingButtons({\n value,\n onChange,\n labels,\n}: OverstimulationRatingButtonsProps) {\n const scores = [1, 2, 3];\n const defaultLabels: (string | React.ReactNode)[] = [\"1\", \"2\", \"3\"];\n\n return (\n

\n {scores.map((score) => {\n const label = labels && labels[score - 1] !== undefined\n ? labels[score - 1]\n : defaultLabels[score - 1];\n\n const colorClasses =\n score === 1\n ? \"border-green-300 hover:bg-green-50 hover:border-green-400\"\n : score === 2\n ? \"border-yellow-300 hover:bg-yellow-50 hover:border-yellow-400\"\n : \"border-red-300 hover:bg-red-50 hover:border-red-400\";\n\n const selected = value === score;\n\n return (\n onChange(score)}\n className={`px-6 py-3 rounded-lg border-2 font-medium transition-all active:scale-95 ${colorClasses} ${\n selected ? \"bg-opacity-70\" : \"\"\n }`.trim()}\n >\n {label}\n \n );\n })}\n

\n );\n}\n\ninterface MoodDescriptionFieldProps {\n value: string;\n onChange: (value: string) => void;\n helperEnabled?: boolean;\n}\n\nexport function MoodDescriptionField({\n value,\n onChange,\n helperEnabled,\n}: MoodDescriptionFieldProps) {\n const [showHelper, setShowHelper] = React.useState(false);\n\n const handleAddWord = (word: string) => {\n const next = value ? `${value}, ${word}` : word;\n onChange(next);\n };\n\n return (\n

\n Mood description\n {helperEnabled && (\n setShowHelper((prev) => !prev)}\n className=\"text-xs text-blue-500 hover:text-blue-700\"\n >\n {showHelper ? \"Hide helper\" : \"Help me describe this\"}\n \n )}\n

\n onChange(e.target.value)}\n placeholder=\"e.g., calm, tired, energized\"\n className=\"w-full px-2 py-1 border rounded\"\n />\n {helperEnabled && showHelper && (\n

\n Tap words to add them\n

\n High energy / Unpleasant\n

\n {highEnergyUnpleasant.map((word) => (\n handleAddWord(word)}\n className=\"px-2 py-1 text-xs bg-red-100 text-red-700 rounded-full hover:bg-red-200 active:scale-95 transition-all\"\n >\n {word}\n \n ))}\n

\n High energy / Pleasant\n

\n {highEnergyPleasant.map((word) => (\n handleAddWord(word)}\n className=\"px-2 py-1 text-xs bg-green-100 text-green-700 rounded-full hover:bg-green-200 active:scale-95 transition-all\"\n >\n {word}\n \n ))}\n

\n Low energy / Unpleasant\n

\n {lowEnergyUnpleasant.map((word) => (\n handleAddWord(word)}\n className=\"px-2 py-1 text-xs bg-blue-100 text-blue-700 rounded-full hover:bg-blue-200 active:scale-95 transition-all\"\n >\n {word}\n \n ))}\n

\n Low energy / Pleasant\n

\n {lowEnergyPleasant.map((word) => (\n handleAddWord(word)}\n className=\"px-2 py-1 text-xs bg-teal-100 text-teal-700 rounded-full hover:bg-teal-200 active:scale-95 transition-all\"\n >\n {word}\n \n ))}\n

\n setShowHelper(false)}\n className=\"text-xs text-gray-500 hover:text-gray-700\"\n >\n Done\n \n

\n )}\n

\n );\n}\n","deleted","label",[175,176,157],"frontend","components","permalink","https://www.val.town/x/cricks_unmixed4u/activity-log/code/frontend/components/SharedUI.tsx","extension","actionData","errors"]