import { useState, useEffect, useRef, useMemo } from 'baraqex'; // JSX type declarations for TypeScript declare global { namespace JSX { interface IntrinsicElements { [elemName: string]: any; } } } // Custom hooks for better code organization function useTimer(initialTime = 0) { const [time, setTime] = useState(initialTime); const [isRunning, setIsRunning] = useState(false); const intervalRef = useRef(null); const start = () => { if (!isRunning) { setIsRunning(true); intervalRef.current = setInterval(() => { setTime((prev: number) => prev + 1); }, 1000); } }; const stop = () => { if (isRunning) { setIsRunning(false); if (intervalRef.current) { clearInterval(intervalRef.current); intervalRef.current = null; } } }; const reset = () => { stop(); setTime(0); }; useEffect(() => { return () => { if (intervalRef.current) { clearInterval(intervalRef.current); } }; }, []); const formattedTime = useMemo(() => { const minutes = Math.floor(time / 60); const seconds = time % 60; return `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`; }, [time]); return { time, formattedTime, isRunning, start, stop, reset }; } function useCounter(initialValue = 0, step = 1) { const [count, setCount] = useState(initialValue); const increment = () => setCount((prev: number) => prev + step); const decrement = () => setCount((prev: number) => prev - step); const reset = () => setCount(initialValue); const setValue = (value: any) => setCount(typeof value === 'function' ? value : value); return { count, increment, decrement, reset, setValue }; } function useTodos() { // Initialize with stable array to prevent hydration issues const [todos, setTodos] = useState(() => [ { id: 1, text: 'Learn Frontend Hamroun', completed: false }, { id: 2, text: 'Build SSR app', completed: true }, { id: 3, text: 'Deploy to production', completed: false } ]); const [filter, setFilter] = useState('all'); const addTodo = (text: any) => { const textString = String(text || '').trim(); if (textString) { setTodos((prev: any) => [...prev, { id: Date.now(), text: textString, completed: false }]); } }; const toggleTodo = (id: any) => { setTodos((prev: any[]) => prev.map((todo: { id: any; completed: any; }) => todo.id === id ? { ...todo, completed: !todo.completed } : todo )); }; const deleteTodo = (id: any) => { setTodos((prev: any[]) => prev.filter((todo: { id: any; }) => todo.id !== id)); }; const filteredTodos = useMemo(() => { const todoArray = Array.isArray(todos) ? todos : []; switch (filter) { case 'active': return todoArray.filter(todo => !todo.completed); case 'completed': return todoArray.filter(todo => todo.completed); default: return todoArray; } }, [todos, filter]); const stats = useMemo(() => { const todoArray = Array.isArray(todos) ? todos : []; const total = todoArray.length; const completed = todoArray.filter(todo => todo.completed).length; const active = total - completed; return { total, completed, active }; }, [todos]); return { todos: filteredTodos, filter, setFilter, addTodo, toggleTodo, deleteTodo, stats }; } function useTheme() { const [theme, setTheme] = useState('light'); const toggleTheme = () => { setTheme((prev: string) => prev === 'light' ? 'dark' : 'light'); }; const themeColors = useMemo(() => { return theme === 'light' ? { bg: '#ffffff', text: '#333333', primary: '#3498db', secondary: '#e8f4fd', border: '#e1e1e1', accent: '#2ecc71' } : { bg: '#1a1a1a', text: '#ffffff', primary: '#5dade2', secondary: '#2c3e50', border: '#404040', accent: '#58d68d' }; }, [theme]); return { theme, toggleTheme, colors: themeColors }; } // Todo Item Component function TodoItem({ todo, onToggle, onDelete }: { todo: { id: number; text: string; completed: boolean; }; onToggle: (id: number) => void; onDelete: (id: number) => void; }) { const handleToggle = (e: { preventDefault: () => void; }) => { e.preventDefault(); onToggle(todo.id); }; const handleDelete = (e: { preventDefault: () => void; }) => { e.preventDefault(); onDelete(todo.id); }; return (
{todo.text}
); } // Stats Component function StatsCard({ title, value, color = '#3498db' }: { title: string; value: string | number; color?: string }) { return (

{title}

{value}
); } // Main App Component export function App() { const { count, increment, decrement, reset, setValue } = useCounter(0, 1); const { time, formattedTime, isRunning, start, stop, reset: resetTimer } = useTimer(); const { todos, filter, setFilter, addTodo, toggleTodo, deleteTodo, stats } = useTodos(); const { theme, toggleTheme, colors } = useTheme(); const [newTodo, setNewTodo] = useState(''); const [showAdvanced, setShowAdvanced] = useState(false); const [step, setStep] = useState(1); const inputRef = useRef(null); // Handle todo form submission const handleTodoSubmit = (e: { preventDefault: () => void; stopPropagation: () => void; }) => { e.preventDefault(); e.stopPropagation(); const todoText = String(newTodo || '').trim(); if (todoText) { addTodo(todoText); setNewTodo(''); // Focus input after state update setTimeout(() => { if (inputRef.current) { inputRef.current.focus(); } }, 0); } }; const handleNewTodoChange = (e: { target: { value: any; }; }) => { setNewTodo(e.target.value); }; const handleStepChange = (e: { target: { value: string; }; }) => { setStep(parseInt(e.target.value) || 1); }; const handleSetValue = (e: { key: string; target: { value: string; }; }) => { if (e.key === 'Enter') { const value = parseInt(e.target.value) || 0; setValue(value); e.target.value = ''; } }; useEffect(() => { console.log('App mounted - Frontend Hamroun SSR working!'); return () => console.log('App unmounted'); }, []); return (
{/* Header */}

πŸš€ Frontend Hamroun SSR

Advanced SSR Template with Hooks & Modern Design

{/* Stats Overview */}
{/* Main Content Grid */}
{/* Counter Section */}

πŸ”’ Interactive Counter

{count}
{showAdvanced && (
)}
{/* Timer Section */}

⏱️ Timer & Stopwatch

{formattedTime}
{isRunning ? '🟒 Running' : '⏸️ Stopped'} β€’ {time} seconds
{!isRunning ? ( ) : ( )}
{/* Todo List Section */}

πŸ“ Todo List Manager

{/* Add Todo Form */}
{/* Filter Buttons */}
{['all', 'active', 'completed'].map(filterType => ( ))}
{/* Todo Items */}
{todos.length === 0 ? (
{filter === 'all' ? 'πŸ“‹ No todos yet. Add one above!' : filter === 'active' ? 'βœ… No active todos!' : 'πŸŽ‰ No completed todos yet!'}
) : ( todos.map((todo: { id: any; }) => ( )) ) }
{/* Framework Features */}

🎯 Frontend Hamroun Features Demo

πŸͺ React-like Hooks

useState, useEffect, useRef, useMemo all working perfectly!

πŸ–₯️ Server-Side Rendering

Full SSR support with client-side hydration for best performance.

⚑ Fast Development

Hot reload, TypeScript support, and modern tooling included.

🎨 Theming Support

Dynamic theming with custom hooks and responsive design.

{/* Footer */}

Built with ❀️ using Frontend Hamroun Framework

Server-side rendered β€’ Client-side hydrated β€’ Hook-powered

); }