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,26 +15,18 @@ 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' },
   ]
 
-  return (
+  const epicFilters: FilterItem[] = [
-    <div className="sidebar">
+    { id: 'epic', label: 'All Games', icon: epic, variant: 'brand' },
-      <div className="sidebar-header">
+  ]
-        <h2>Library</h2>
-      </div>
 
-      <ul className="filter-list">
+  const renderFilter = (filter: FilterItem) => (
-        {filters.map((filter) => (
     <li
       key={filter.id}
       className={currentFilter === filter.id ? 'active' : ''}
@@ -45,8 +37,27 @@ const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) =>
         <span>{filter.label}</span>
       </div>
     </li>
-        ))}
+  )
+
+  return (
+    <div className="sidebar">
+      <div className="sidebar-header">
+        <h2>Library</h2>
+      </div>
+
+      <div className="sidebar-section">
+        <span className="sidebar-section-label">Steam</span>
+        <ul className="filter-list">
+          {steamFilters.map(renderFilter)}
         </ul>
+      </div>
+
+      <div className="sidebar-section">
+        <span className="sidebar-section-label">Epic Games</span>
+        <ul className="filter-list">
+          {epicFilters.map(renderFilter)}
+        </ul>
+      </div>
 
       <Button
         variant="secondary"
@@ -58,7 +69,6 @@ const Sidebar = ({ setFilter, currentFilter, onSettingsClick }: SidebarProps) =>
       >
         Settings
       </Button>
-
     </div>
   )
 }