import { useEffect, useState, type CSSProperties, type ReactNode } from "react"; import { THEME } from "../constants"; const ACTIVITY_BARS = [0, 1, 2, 3, 4]; const GRID_BACKGROUND_STYLE: CSSProperties = { backgroundColor: THEME.beigeLight, backgroundImage: ` linear-gradient(${THEME.beigeDark} 1px, transparent 1px), linear-gradient(90deg, ${THEME.beigeDark} 1px, transparent 1px) `, backgroundSize: "40px 40px", }; export const AppGridBackground = ({ children, className, style, }: { children: ReactNode; className: string; style?: CSSProperties; }) => (
{children}
); export const MicrophoneIcon = ({ className, strokeWidth = 2, style, }: { className: string; strokeWidth?: number; style?: CSSProperties; }) => ( ); export const VoiceMeter = ({ color, active = false, }: { color: string; active?: boolean; }) => (
{ACTIVITY_BARS.map((bar) => ( ))}
); export const useMountedTransition = () => { const [mounted, setMounted] = useState(false); useEffect(() => { setMounted(true); }, []); return mounted; }; export const ErrorMessageBox = ({ message, className, }: { message: string; className?: string; }) => (

{`> Error: ${message}`}

);