Icons

src/components/layout/Sidebar.tsx

@@ -1,23 +1,36 @@
+import { Icon, layers, linux, wine } from '@/components/icons'
+
 interface SidebarProps {
   setFilter: (filter: string) => void
   currentFilter: string
 }
 
+// Define a type for filter items that makes variant optional
+type FilterItem = {
+  id: string
+  label: string
+  icon: string
+  variant?: string
+}
+
 /**
  * Application sidebar component
  * Contains filters for game types
  */
 const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
-  // Available filter options
-  const filters = [
-    { id: 'all', label: 'All Games' },
-    { id: 'native', label: 'Native' },
-    { id: 'proton', label: 'Proton Required' }
+  // Available filter options with icons
+  const filters: FilterItem[] = [
+    { id: 'all', label: 'All Games', icon: layers, variant: 'bold' },
+    { id: 'native', label: 'Native', icon: linux, variant: 'brand' },
+    { id: 'proton', label: 'Proton Required', icon: wine, variant: 'bold' }
   ]
   
   return (
     <div className="sidebar">
-      <h2>Library</h2>
+      <div className="sidebar-header">
+        <h2>Library</h2>
+      </div>
+      
       <ul className="filter-list">
         {filters.map(filter => (
           <li 
@@ -25,7 +38,15 @@ const Sidebar = ({ setFilter, currentFilter }: SidebarProps) => {
             className={currentFilter === filter.id ? 'active' : ''}
             onClick={() => setFilter(filter.id)}
           >
-            {filter.label}
+            <div className="filter-item">
+              <Icon 
+                name={filter.icon}
+                variant={filter.variant}
+                size="md" 
+                className="filter-icon"
+              />
+              <span>{filter.label}</span>
+            </div>
           </li>
         ))}
       </ul>