customize icons

src/components/RelaySetCard/index.tsx

@@ -1,6 +1,6 @@
 import { cn } from '@/lib/utils'
 import { TRelaySet } from '@/types'
-import { ChevronDown, FolderClosed } from 'lucide-react'
+import { ChevronDown, FolderClosed, Music, Radio, Trees, DoorOpen } from 'lucide-react'
 import { useState } from 'react'
 import { useTranslation } from 'react-i18next'
 import RelayIcon from '../RelayIcon'
@@ -17,6 +17,21 @@ export default function RelaySetCard({
   const { t } = useTranslation()
   const [expand, setExpand] = useState(false)
 
+  const getRelaySetIcon = (name: string) => {
+    const nameLower = name.toLowerCase()
+
+
+    if (nameLower.includes('basspistol')) return Radio
+      if (nameLower.includes('music')) return Music
+        if (nameLower.includes('backstage')) return DoorOpen
+          if (nameLower.includes('hood')) return Trees
+
+
+            return FolderClosed
+  }
+
+  const IconComponent = getRelaySetIcon(relaySet.name)
+
   return (
     <div
       className={cn(
@@ -25,15 +40,16 @@ export default function RelaySetCard({
           ? 'border-primary bg-primary/5 shadow-sm'
           : 'clickable border-border hover:border-primary/50 hover:bg-accent/50'
       )}
-      onClick={() => onSelectChange(!select)}
-    >
-      <div className="flex items-center justify-between gap-2">
-        <div className="flex min-w-0 flex-1 items-center gap-3">
-          <div className="flex size-6 shrink-0 items-center justify-center">
-            <FolderClosed className="size-5" />
+       onClick={() => onSelectChange(!select)}
+      >
+        <div className="flex items-center justify-between gap-2">
+          <div className="flex min-w-0 flex-1 items-center gap-3">
+            <div className="flex size-6 shrink-0 items-center justify-center">
+      {/* Use the dynamic icon component instead of hardcoded FolderClosed */}
+              <IconComponent className="size-5" />
+            </div>
+            <div className="select-none truncate font-medium">{relaySet.name}</div>
           </div>
-          <div className="select-none truncate font-medium">{relaySet.name}</div>
-        </div>
         <div className="flex shrink-0 items-center gap-1">
           <RelayUrlsExpandToggle expand={expand} onExpandChange={setExpand}>
             {t('n relays', { n: relaySet.relayUrls.length })}