Added extension functionality
This commit is contained in:
Emil
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,134 @@
|
||||
'use client'
|
||||
|
||||
import { useState } from 'react'
|
||||
import { Button } from '@/components/ui/button'
|
||||
import { Switch } from '@/components/ui/switch'
|
||||
import { cn } from '@/lib/utils'
|
||||
import { getSector } from '@/lib/extensions/sectors'
|
||||
import { resolveIcon } from '@/lib/extensions/icon-resolver'
|
||||
import CategoryBadge from '@/components/extensions/CategoryBadge'
|
||||
import { ArrowRight, Loader2 } from 'lucide-react'
|
||||
import type { SectorSlug, ExtensionDefinition } from '@/lib/extensions/types'
|
||||
|
||||
interface Step3Props {
|
||||
sectorSlug: string | null
|
||||
onNext: (data: { enabled_extensions: { sector_slug: string; extension_slug: string }[] }) => void
|
||||
onBack: () => void
|
||||
isSaving: boolean
|
||||
}
|
||||
|
||||
export default function Step3ExtensionSuggestions({ sectorSlug, onNext, onBack, isSaving }: Step3Props) {
|
||||
const generalSector = getSector('general')
|
||||
const selectedSector = sectorSlug ? getSector(sectorSlug as SectorSlug) : null
|
||||
|
||||
const [toggles, setToggles] = useState<Record<string, boolean>>({})
|
||||
|
||||
const handleToggle = (ext: ExtensionDefinition) => {
|
||||
const key = `${ext.sector}/${ext.slug}`
|
||||
setToggles(prev => ({ ...prev, [key]: !prev[key] }))
|
||||
}
|
||||
|
||||
const handleSubmit = () => {
|
||||
const enabled = Object.entries(toggles)
|
||||
.filter(([, enabled]) => enabled)
|
||||
.map(([key]) => {
|
||||
const [sector_slug, extension_slug] = key.split('/')
|
||||
return { sector_slug, extension_slug }
|
||||
})
|
||||
onNext({ enabled_extensions: enabled })
|
||||
}
|
||||
|
||||
const handleSkip = () => {
|
||||
onNext({ enabled_extensions: [] })
|
||||
}
|
||||
|
||||
// Group: first general, then sector-specific
|
||||
const sections: { label: string; extensions: ExtensionDefinition[] }[] = []
|
||||
if (generalSector) {
|
||||
sections.push({ label: generalSector.name, extensions: generalSector.extensions })
|
||||
}
|
||||
if (selectedSector) {
|
||||
sections.push({ label: selectedSector.name, extensions: selectedSector.extensions })
|
||||
}
|
||||
|
||||
const enabledCount = Object.values(toggles).filter(Boolean).length
|
||||
|
||||
return (
|
||||
<div className="space-y-6">
|
||||
<div>
|
||||
<h2 className="text-lg font-semibold">Välj dina tillägg</h2>
|
||||
<p className="text-sm text-muted-foreground mt-1">
|
||||
Aktivera de verktyg du vill använda. Du kan alltid ändra detta senare under Tillägg.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{sections.map(section => (
|
||||
<div key={section.label}>
|
||||
<h3 className="text-xs font-semibold text-muted-foreground uppercase tracking-wider mb-3">
|
||||
{section.label}
|
||||
</h3>
|
||||
<div className="space-y-2">
|
||||
{section.extensions.map(ext => {
|
||||
const Icon = resolveIcon(ext.icon)
|
||||
const key = `${ext.sector}/${ext.slug}`
|
||||
const isEnabled = toggles[key] ?? false
|
||||
return (
|
||||
<div
|
||||
key={key}
|
||||
className={cn(
|
||||
'flex items-center justify-between gap-3 rounded-lg border p-3 transition-colors',
|
||||
isEnabled && 'border-primary/30 bg-primary/5'
|
||||
)}
|
||||
>
|
||||
<div className="flex items-center gap-3 min-w-0">
|
||||
<div className={cn(
|
||||
'flex h-9 w-9 items-center justify-center rounded-lg flex-shrink-0',
|
||||
isEnabled ? 'bg-primary/10 text-primary' : 'bg-muted/50 text-muted-foreground'
|
||||
)}>
|
||||
<Icon className="h-4 w-4" />
|
||||
</div>
|
||||
<div className="min-w-0">
|
||||
<div className="flex items-center gap-2">
|
||||
<p className="text-sm font-medium">{ext.name}</p>
|
||||
<CategoryBadge category={ext.category} />
|
||||
</div>
|
||||
<p className="text-xs text-muted-foreground line-clamp-1">{ext.description}</p>
|
||||
</div>
|
||||
</div>
|
||||
<Switch
|
||||
checked={isEnabled}
|
||||
onCheckedChange={() => handleToggle(ext)}
|
||||
/>
|
||||
</div>
|
||||
)
|
||||
})}
|
||||
</div>
|
||||
</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={handleSkip}>
|
||||
Hoppa över
|
||||
</Button>
|
||||
</div>
|
||||
<Button onClick={handleSubmit} disabled={isSaving}>
|
||||
{isSaving ? (
|
||||
<>
|
||||
<Loader2 className="mr-2 h-4 w-4 animate-spin" />
|
||||
Sparar...
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
{enabledCount > 0 ? `Nästa (${enabledCount} valda)` : 'Nästa'}
|
||||
<ArrowRight className="ml-2 h-4 w-4" />
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user