refactor: Consistently use arrow functions for components

Converts all functional components from the function Component() {} declaration to the const Component = () => {} syntax. This change improves consistency across the codebase.

src/components/MainContainer.tsx

@@ -2,7 +2,7 @@ import PageContainer from './PageContainer';
 import Sidebar from './Sidebar';
 import { ToggleTheme } from './ToggleTheme';
 
-function MainContainer() {
+const MainContainer = () => {
   return (
     <div className="flex h-screen">
       <Sidebar />
@@ -12,6 +12,6 @@ function MainContainer() {
       </div>
     </div>
   );
-}
+};
 
 export default MainContainer;

src/components/PageContainer.tsx

@@ -7,7 +7,7 @@ import Dashboard from './pages/Dashboard';
 import Todos from './pages/Todos';
 import NotFound from './pages/default/NotFound';
 
-function PageContainer() {
+const PageContainer = () => {
   return (
     <div className="flex flex-col flex-1">
       <Topbar />
@@ -19,6 +19,6 @@ function PageContainer() {
       </Switch>
     </div>
   );
-}
+};
 
 export default PageContainer;

src/components/Sidebar.tsx

@@ -15,7 +15,7 @@ export const items = [
   { name: 'Calendar', href: '/calendar', icon: IconCalendarWeekFilled },
 ];
 
-function Sidebar() {
+const Sidebar = () => {
   const [location] = useLocation();
   return (
     <nav className="flex flex-col min-w-[240px] max-w-[480px] bg-sidebar border">
@@ -37,6 +37,6 @@ function Sidebar() {
       </div>
     </nav>
   );
-}
+};
 
 export default Sidebar;

src/components/ToggleTheme.tsx

@@ -5,7 +5,7 @@ import { Button } from '@/components/ui/button';
 import { useTheme } from '../hooks/useThemeHook';
 import { changeTheme } from '../lib/utils';
 
-export function ToggleTheme() {
+export const ToggleTheme = () => {
   const { theme, toggleTheme } = useTheme();
 
   useEffect(() => {
@@ -19,4 +19,4 @@ export function ToggleTheme() {
       <span className="sr-only">Toggle theme</span>
     </Button>
   );
-}
+};

src/components/Topbar.tsx

@@ -2,7 +2,7 @@ import { Button } from '@/components/ui/button';
 import { items } from './Sidebar';
 import { useLocation } from 'wouter';
 
-function Topbar() {
+const Topbar = () => {
   const [location] = useLocation();
   return (
     <div className="flex bg-sidebar p-2 gap-2 border-t border-r border-b border-l-0">
@@ -12,6 +12,6 @@ function Topbar() {
       </Button>
     </div>
   );
-}
+};
 
 export default Topbar;

src/components/pages/Dashboard.tsx

@@ -1,9 +1,9 @@
-function Dashboard() {
+const Dashboard = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">Dashboard</h1>
     </div>
   );
-}
+};
 
 export default Dashboard;

src/components/pages/Home.tsx

@@ -1,9 +1,9 @@
-function Home() {
+const Home = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">Home</h1>
     </div>
   );
-}
+};
 
 export default Home;

src/components/pages/Todos.tsx

@@ -1,9 +1,9 @@
-function Todos() {
+const Todos = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">Todos</h1>
     </div>
   );
-}
+};
 
 export default Todos;

src/components/pages/default/NotFound.tsx

@@ -1,9 +1,9 @@
-function NotFound() {
+const NotFound = () => {
   return (
     <div className="p-4">
       <h1 className="text-2xl font-bold">404 - Not Found!</h1>
     </div>
   );
-}
+};
 
 export default NotFound;