Added extension functionality

2026-02-21 11:39:45 +01:00
parent 2f83f232c6
commit 026497ed75
132 changed files with 3533 additions and 60 deletions
@@ -0,0 +1,124 @@
+'use client'
+
+import { useState } from 'react'
+import { Card, CardContent } from '@/components/ui/card'
+import { Button } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { SECTORS } from '@/lib/extensions/sectors'
+import { resolveIcon } from '@/lib/extensions/icon-resolver'
+import { Briefcase, ArrowRight, Loader2 } from 'lucide-react'
+
+interface Step2SectorSelectionProps {
+  onNext: (data: { sector_slug: string | null }) => void
+  onBack: () => void
+  isSaving: boolean
+}
+
+export default function Step2SectorSelection({ onNext, onBack, isSaving }: Step2SectorSelectionProps) {
+  const [selected, setSelected] = useState<string | null>(null)
+
+  const industrySectors = SECTORS.filter(s => s.slug !== 'general')
+
+  return (
+    <div className="space-y-6">
+      <div>
+        <h2 className="text-lg font-semibold">Vilken bransch verkar du inom?</h2>
+        <p className="text-sm text-muted-foreground mt-1">
+          Vi anpassar verktyg och tillägg baserat på din bransch. Du kan alltid ändra detta senare.
+        </p>
+      </div>
+
+      <div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
+        {industrySectors.map(sector => {
+          const Icon = resolveIcon(sector.icon)
+          const isSelected = selected === sector.slug
+          return (
+            <Card
+              key={sector.slug}
+              className={cn(
+                'cursor-pointer transition-all',
+                isSelected
+                  ? 'border-primary ring-2 ring-primary/20'
+                  : 'hover:border-primary/50'
+              )}
+              onClick={() => setSelected(sector.slug)}
+            >
+              <CardContent className="pt-6">
+                <div className="flex items-start gap-3">
+                  <div className={cn(
+                    'flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0',
+                    isSelected ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
+                  )}>
+                    <Icon className="h-5 w-5" />
+                  </div>
+                  <div>
+                    <p className="text-sm font-medium">{sector.name}</p>
+                    <p className="text-xs text-muted-foreground mt-0.5">{sector.description}</p>
+                    <p className="text-xs text-muted-foreground mt-1">
+                      {sector.extensions.length} branschverktyg
+                    </p>
+                  </div>
+                </div>
+              </CardContent>
+            </Card>
+          )
+        })}
+
+        {/* "Other" option */}
+        <Card
+          className={cn(
+            'cursor-pointer transition-all',
+            selected === 'other'
+              ? 'border-primary ring-2 ring-primary/20'
+              : 'hover:border-primary/50'
+          )}
+          onClick={() => setSelected('other')}
+        >
+          <CardContent className="pt-6">
+            <div className="flex items-start gap-3">
+              <div className={cn(
+                'flex h-10 w-10 items-center justify-center rounded-lg flex-shrink-0',
+                selected === 'other' ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
+              )}>
+                <Briefcase className="h-5 w-5" />
+              </div>
+              <div>
+                <p className="text-sm font-medium">Annan bransch</p>
+                <p className="text-xs text-muted-foreground mt-0.5">
+                  Generella verktyg utan branschspecifika tillägg
+                </p>
+              </div>
+            </div>
+          </CardContent>
+        </Card>
+      </div>
+
+      <div className="flex items-center justify-between pt-4">
+        <div className="flex items-center gap-2">
+          <Button variant="ghost" onClick={onBack}>
+            Tillbaka
+          </Button>
+          <Button variant="ghost" onClick={() => onNext({ sector_slug: null })}>
+            Hoppa över
+          </Button>
+        </div>
+        <Button
+          onClick={() => onNext({ sector_slug: selected === 'other' ? null : selected })}
+          disabled={!selected || isSaving}
+        >
+          {isSaving ? (
+            <>
+              <Loader2 className="mr-2 h-4 w-4 animate-spin" />
+              Sparar...
+            </>
+          ) : (
+            <>
+              Nästa
+              <ArrowRight className="ml-2 h-4 w-4" />
+            </>
+          )}
+        </Button>
+      </div>
+    </div>
+  )
+}