\n {label && (\n \n {label} {required && *}\n \n )}\n \n \n \n {error &&

{error}

}\n

\n );\n}\n\n/**\n * Card component for content containers\n */\nexport function Card({ \n children, \n title = \"\", \n className = \"\", \n ...props \n}) {\n const cardStyle = {\n backgroundColor: \"white\",\n borderRadius: \"8px\",\n boxShadow: \"0 1px 3px rgba(0,0,0,0.1)\",\n padding: \"1.5rem\",\n marginBottom: \"1.5rem\",\n };\n \n const titleStyle = {\n fontSize: \"1.25rem\",\n fontWeight: 600,\n marginTop: 0,\n marginBottom: \"1rem\",\n };\n \n return (\n

\n {title &&

{title}

}\n {children}\n

\n );\n}\n\n/**\n * Alert component for notifications\n */\nexport function Alert({\n children,\n type = \"info\",\n title = \"\",\n dismissable = false,\n className = \"\",\n ...props\n}) {\n // Type-specific styles\n const typeStyles = {\n info: {\n backgroundColor: \"#e0f2fe\",\n borderColor: \"#0ea5e9\",\n color: \"#0369a1\",\n icon: \"ℹ️\",\n },\n success: {\n backgroundColor: \"#dcfce7\",\n borderColor: \"#22c55e\",\n color: \"#15803d\",\n icon: \"✅\",\n },\n warning: {\n backgroundColor: \"#fef9c3\",\n borderColor: \"#eab308\",\n color: \"#854d0e\",\n icon: \"⚠️\",\n },\n error: {\n backgroundColor: \"#fee2e2\",\n borderColor: \"#ef4444\",\n color: \"#b91c1c\",\n icon: \"❌\",\n },\n };\n \n const styles = typeStyles[type] || typeStyles.info;\n \n const alertStyle = {\n backgroundColor: styles.backgroundColor,\n borderLeft: `4px solid ${styles.borderColor}`,\n color: styles.color,\n padding: \"1rem\",\n borderRadius: \"4px\",\n marginBottom: \"1rem\",\n position: \"relative\",\n };\n \n const titleStyle = {\n display: \"flex\",\n alignItems: \"center\",\n fontWeight: \"600\",\n marginTop: 0,\n marginBottom: \"0.5rem\",\n };\n \n const iconStyle = {\n marginRight: \"0.5rem\",\n };\n \n const dismissButtonStyle = {\n position: \"absolute\",\n top: \"0.5rem\",\n right: \"0.5rem\",\n background: \"none\",\n border: \"none\",\n cursor: \"pointer\",\n fontSize: \"1.25rem\",\n color: styles.color,\n opacity: 0.7,\n };\n \n return (\n

\n {title && (\n

\n {styles.icon}\n {title}\n

\n )}\n {children}\n {dismissable && (\n \n )}\n

\n );\n}\n\n/**\n * Badge component for status indicators\n */\nexport function Badge({\n children,\n variant = \"default\",\n size = \"medium\",\n className = \"\",\n ...props\n}) {\n // Variant styles\n const variantStyles = {\n default: {\n backgroundColor: \"#e5e7eb\",\n color: \"#4b5563\",\n },\n primary: {\n backgroundColor: \"#dbeafe\",\n color: \"#1e40af\",\n },\n success: {\n backgroundColor: \"#dcfce7\",\n color: \"#15803d\",\n },\n warning: {\n backgroundColor: \"#fef9c3\",\n color: \"#854d0e\",\n },\n danger: {\n backgroundColor: \"#fee2e2\",\n color: \"#b91c1c\",\n },\n };\n \n // Size styles\n const sizeStyles = {\n small: {\n padding: \"0.125rem 0.375rem\",\n fontSize: \"0.75rem\",\n },\n medium: {\n padding: \"0.25rem 0.5rem\",\n fontSize: \"0.875rem\",\n },\n large: {\n padding: \"0.375rem 0.75rem\",\n fontSize: \"1rem\",\n },\n };\n \n const styles = {\n display: \"inline-block\",\n borderRadius: \"9999px\",\n fontWeight: \"500\",\n ...variantStyles[variant] || variantStyles.default,\n ...sizeStyles[size] || sizeStyles.medium,\n };\n \n return (\n \n {children}\n \n );\n}\n\n/**\n * ScoreSelector component for selecting a score from 1-10\n * Used in ideaScore for rating effort and payoff\n */\nexport function ScoreSelector({\n id,\n name,\n value = 5, \n onChange,\n minLabel = \"Low\",\n maxLabel = \"High\",\n className = \"\",\n ...props\n}) {\n // Convert value to number to ensure proper comparisons\n const currentValue = Number(value);\n\n const containerStyle = {\n marginBottom: \"1rem\",\n };\n \n const labelContainerStyle = {\n display: \"flex\",\n justifyContent: \"space-between\",\n marginBottom: \"0.25rem\",\n fontSize: \"0.75rem\",\n color: \"#666\",\n };\n \n const selectorStyle = {\n display: \"flex\",\n border: \"1px solid #ddd\",\n borderRadius: \"4px\",\n overflow: \"hidden\",\n };\n \n const buttonStyle = {\n flex: 1,\n padding: \"0.5rem 0\",\n border: \"none\",\n borderRight: \"1px solid #ddd\",\n background: \"#f5f5f5\",\n cursor: \"pointer\",\n };\n \n const selectedButtonStyle = {\n ...buttonStyle,\n background: \"#0066cc\",\n color: \"white\",\n };\n \n // Create an array of buttons from 1 to 10\n const buttons = [];\n for (let i = 1; i <= 10; i++) {\n buttons.push(\n onChange && onChange(i)}\n className={i === currentValue ? \"selected\" : \"\"}\n >\n {i}\n \n );\n }\n \n return (\n

\n {minLabel}\n {maxLabel}\n

\n {buttons}\n

\n \n

\n );\n}\n\n/**\n * StatusMessage component for displaying success or error messages\n */\nexport function StatusMessage({\n message,\n type = \"info\",\n visible = true,\n className = \"\",\n ...props\n}) {\n // Define styles based on message type\n const typeStyles = {\n info: {\n backgroundColor: \"#f0f9ff\",\n border: \"1px solid #93c5fd\",\n color: \"#1e40af\",\n },\n success: {\n backgroundColor: \"#dcfce7\",\n border: \"1px solid #22c55e\",\n color: \"#15803d\",\n },\n error: {\n backgroundColor: \"#fee2e2\",\n border: \"1px solid #ef4444\",\n color: \"#b91c1c\",\n },\n warning: {\n backgroundColor: \"#fef9c3\", \n border: \"1px solid #eab308\",\n color: \"#854d0e\",\n },\n };\n \n const messageStyle = {\n padding: \"0.5rem 1rem\",\n marginBottom: \"1rem\",\n borderRadius: \"4px\",\n display: visible ? \"block\" : \"none\",\n ...typeStyles[type] || typeStyles.info,\n };\n \n return (\n

\n {message}\n

\n );\n}\n\n/**\n * EmptyState component for displaying when no data is available\n */\nexport function EmptyState({\n message = \"No data available\",\n icon = \"📝\",\n className = \"\",\n ...props\n}) {\n const containerStyle = {\n padding: \"2rem\",\n textAlign: \"center\",\n color: \"#666\",\n border: \"2px dashed #ddd\",\n borderRadius: \"8px\",\n margin: \"1rem 0\",\n };\n \n const iconStyle = {\n fontSize: \"2rem\",\n marginBottom: \"0.5rem\",\n };\n \n return (\n

\n {icon &&

{icon}

}\n

{message}

\n );\n}\n\n/**\n * IdeaScoreBar component for displaying a visual score\n * Used in ideaScore for showing the payoff/effort ratio\n */\nexport function IdeaScoreBar({\n value,\n maxValue = 3,\n className = \"\",\n ...props\n}) {\n // Determine category based on value\n const scoreCategory = value >= 2 ? \"high\" : value >= 1 ? \"medium\" : \"low\";\n const scoreLabel = value >= 2 ? \"HIGH\" : value >= 1 ? \"MED\" : \"LOW\";\n \n // Scale the width of the bar, max 100%\n const barWidth = Math.min((value / maxValue) * 100, 100);\n \n // Color mappings for different score categories\n const categoryColors = {\n high: {\n background: \"rgba(34, 197, 94, 0.15)\",\n progressBackground: \"rgba(34, 197, 94, 0.4)\",\n labelColor: \"#15803d\",\n },\n medium: {\n background: \"rgba(234, 179, 8, 0.15)\",\n progressBackground: \"rgba(234, 179, 8, 0.4)\",\n labelColor: \"#a16207\",\n },\n low: {\n background: \"rgba(239, 68, 68, 0.15)\",\n progressBackground: \"rgba(239, 68, 68, 0.4)\",\n labelColor: \"#b91c1c\",\n },\n };\n \n const colors = categoryColors[scoreCategory];\n \n const containerStyle = {\n display: \"flex\",\n alignItems: \"center\",\n height: \"24px\",\n borderRadius: \"4px\",\n overflow: \"hidden\",\n backgroundColor: colors.background,\n position: \"relative\",\n };\n \n const progressStyle = {\n position: \"absolute\",\n left: 0,\n top: 0,\n bottom: 0,\n width: `${barWidth}%`,\n backgroundColor: colors.progressBackground,\n borderRadius: \"4px\",\n };\n \n const labelStyle = {\n position: \"relative\",\n zIndex: 1,\n marginLeft: \"8px\",\n fontSize: \"0.75rem\",\n fontWeight: 600,\n color: colors.labelColor,\n };\n \n const valueStyle = {\n position: \"relative\",\n zIndex: 1,\n marginLeft: \"auto\",\n paddingRight: \"0.5rem\",\n fontWeight: 500,\n color: \"#333\",\n };\n \n return (\n

\n {scoreLabel}\n {value.toFixed(1)}\n

\n );\n}\n\n/**\n * DropdownMenu component for action menus\n * Provides a simple way to show options when clicking a trigger element\n */\nexport function DropdownMenu({\n trigger,\n items = [],\n isOpen = false,\n onOpenChange,\n align = \"right\",\n className = \"\",\n ...props\n}) {\n const containerStyle = {\n position: \"relative\",\n display: \"inline-block\",\n };\n \n const menuStyle = {\n position: \"absolute\",\n [align]: 0,\n top: \"100%\",\n marginTop: \"0.25rem\",\n minWidth: \"8rem\",\n backgroundColor: \"white\",\n borderRadius: \"0.25rem\",\n boxShadow: \"0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)\",\n border: \"1px solid #e5e7eb\",\n overflow: \"hidden\",\n zIndex: 10,\n display: isOpen ? \"block\" : \"none\",\n };\n \n // Handle clicks outside the dropdown to close it\n React.useEffect(() => {\n const handleOutsideClick = (event) => {\n if (onOpenChange && isOpen) {\n const container = document.getElementById('dropdown-container');\n if (container && !container.contains(event.target)) {\n onOpenChange(false);\n }\n }\n };\n \n document.addEventListener('click', handleOutsideClick);\n return () => document.removeEventListener('click', handleOutsideClick);\n }, [isOpen, onOpenChange]);\n \n return (\n \n );\n}\n\n/**\n * ConfirmationModal component for confirming user actions\n * Displays a modal dialog with confirm and cancel options\n */\nexport function ConfirmationModal({\n isOpen = false,\n onClose,\n onConfirm,\n title = \"Confirm Action\",\n message = \"Are you sure you want to proceed?\",\n confirmText = \"Confirm\",\n cancelText = \"Cancel\",\n confirmVariant = \"danger\",\n entityName = \"\",\n className = \"\",\n ...props\n}) {\n if (!isOpen) return null;\n \n // Prevent background scrolling when modal is open\n React.useEffect(() => {\n const originalStyle = window.getComputedStyle(document.body).overflow;\n document.body.style.overflow = 'hidden';\n return () => {\n document.body.style.overflow = originalStyle;\n };\n }, []);\n \n const overlayStyle = {\n position: \"fixed\",\n inset: 0,\n backgroundColor: \"rgba(0, 0, 0, 0.5)\",\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n zIndex: 50,\n };\n \n const modalStyle = {\n backgroundColor: \"white\",\n borderRadius: \"0.5rem\",\n boxShadow: \"0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)\",\n width: \"100%\",\n maxWidth: \"28rem\",\n overflow: \"hidden\",\n };\n \n const headerStyle = {\n padding: \"1.25rem 1.5rem\",\n borderBottom: \"1px solid #e5e7eb\",\n };\n \n const titleStyle = {\n fontSize: \"1.125rem\",\n fontWeight: 600,\n color: \"#111827\",\n marginTop: 0,\n marginBottom: 0,\n };\n \n const bodyStyle = {\n padding: \"1.5rem\",\n };\n \n const messageStyle = {\n color: \"#4b5563\",\n marginBottom: \"0.75rem\",\n };\n \n const entityStyle = {\n fontWeight: 500,\n color: \"#111827\",\n };\n \n const warningStyle = {\n fontSize: \"0.875rem\",\n color: \"#6b7280\",\n marginTop: \"0.75rem\",\n };\n \n const footerStyle = {\n display: \"flex\",\n justifyContent: \"flex-end\",\n padding: \"1rem 1.5rem\",\n borderTop: \"1px solid #e5e7eb\",\n gap: \"0.75rem\",\n };\n \n return (\n

onClose()} {...props}>\n

e.stopPropagation()}\n >\n

{title}

\n \n

{message}

\n {entityName &&

\"{entityName}\"

}\n

This action cannot be undone.

\n \n

\n \n {cancelText}\n \n \n {\n onConfirm();\n onClose();\n }}\n >\n {confirmText}\n \n

\n );\n}","deleted","label",[169,152],"shared","permalink","https://www.val.town/x/dcm31/charBuildSuperapp/code/shared/components.tsx","extension","tsx","actionData","errors"]