Add epic games section #93

src/components/layout/Sidebar.tsx

@@ -1,4 +1,5 @@
 import { Icon, layers, linux, proton, settings } from '@/components/icons'
+import { epic } from '@/components/icons'
 import { Button } from '@/components/buttons'
 
 interface SidebarProps {
@@ -7,7 +8,6 @@ interface SidebarProps {
   onSettingsClick: () => void
 }
 
-// Define a type for filter items that makes variant optional
 type FilterItem = {
   id: string
   label: string
@@ -15,38 +15,49 @@ type FilterItem = {
   variant?: string
 }
 
-/**
- * Application sidebar component
- * Contains filters for game types
- */
 const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) => {
-  // Available filter options with icons
+  const steamFilters: FilterItem[] = [
-  const filters: FilterItem[] = [
     { id: 'all', label: 'All Games', icon: layers, variant: 'solid' },
     { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
-    { id: 'proton', label: 'Proton Required', icon: proton, variant: 'brand' },
+    { id: 'proton', label: 'Proton', icon: proton, variant: 'brand' },
   ]
 
+  const epicFilters: FilterItem[] = [
+    { id: 'epic', label: 'All Games', icon: epic, variant: 'brand' },
+  ]
+
+  const renderFilter = (filter: FilterItem) => (
+    <li
+      key={filter.id}
+      className={currentFilter === filter.id ? 'active' : ''}
+      onClick={() => setFilter(filter.id)}
+    >
+      <div className="filter-item">
+        <Icon name={filter.icon} variant={filter.variant} size="md" className="filter-icon" />
+        <span>{filter.label}</span>
+      </div>
+    </li>
+  )
+
   return (
     <div className="sidebar">
       <div className="sidebar-header">
         <h2>Library</h2>
       </div>
 
-      <ul className="filter-list">
+      <div className="sidebar-section">
-        {filters.map((filter) => (
+        <span className="sidebar-section-label">Steam</span>
-          <li
+        <ul className="filter-list">
-            key={filter.id}
+          {steamFilters.map(renderFilter)}
-            className={currentFilter === filter.id ? 'active' : ''}
+        </ul>
-            onClick={() => setFilter(filter.id)}
+      </div>
-          >
+
-            <div className="filter-item">
+      <div className="sidebar-section">
-              <Icon name={filter.icon} variant={filter.variant} size="md" className="filter-icon" />
+        <span className="sidebar-section-label">Epic Games</span>
-              <span>{filter.label}</span>
+        <ul className="filter-list">
-            </div>
+          {epicFilters.map(renderFilter)}
-          </li>
+        </ul>
-        ))}
+      </div>
-      </ul>
 
       <Button
         variant="secondary"
@@ -58,7 +69,6 @@ const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) =>
       >
         Settings
       </Button>
-
     </div>
   )
 }