Emil
125 lines
4.3 KiB
TypeScript
125 lines
4.3 KiB
TypeScript
'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>
|
|
)
|
|
}
|