yusufipek/RepoHub
1
0
Fork 0
mirror of https://github.com/yusufipk/RepoHub.git synced 2026-09-12 02:56:07 +00:00
Code Issues Packages Projects Releases Wiki Activity

refactor: Remove experience level selection and simplify category display in onboarding modal.

Browse Source
This commit is contained in:
Yusuf İpek
2025-11-23 13:43:31 +03:00
parent 4eac0917d0
commit 24c80559c8
5 changed files with 278 additions and 648 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/OnboardingModal.tsx
+20 -66
View File
@@ -5,9 +5,8 @@ import { Button } from '@/components/ui/button'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from '@/components/ui/select'
import { X, ChevronRight, ChevronLeft, Sparkles } from 'lucide-react'
import { UserCategory, ExperienceLevel } from '@/types/recommendations'
import { UserCategory } from '@/types/recommendations'
import { useLocale } from '@/contexts/LocaleContext'
import { RECOMMENDATION_PRESETS } from '@/data/recommendationPresets'
import { CATEGORY_ICONS } from '@/constants/categoryIcons'
interface OnboardingModalProps {
@@ -16,7 +15,6 @@ interface OnboardingModalProps {
onComplete: (data: {
categories: UserCategory[]
selectedOS?: string
experienceLevel: ExperienceLevel
}) => void
detectedOS: string
}
@@ -54,7 +52,6 @@ export function OnboardingModal({
const [selectedOS, setSelectedOS] = useState<string>(
detectedOS !== 'unknown' ? detectedOS : 'ubuntu'
)
const [experienceLevel, setExperienceLevel] = useState<ExperienceLevel>('beginner')
// Reset state when modal opens
useEffect(() => {
@@ -72,16 +69,12 @@ export function OnboardingModal({
if (prev.includes(category)) {
return prev.filter(c => c !== category)
}
// Limit to 3 categories
if (prev.length >= 3) {
return [...prev.slice(1), category]
}
return [...prev, category]
})
}
const handleNext = () => {
if (step < 3) {
if (step < 2) {
setStep(step + 1)
}
}
@@ -99,8 +92,7 @@ export function OnboardingModal({
onComplete({
categories: selectedCategories,
selectedOS: selectedOS,
experienceLevel
selectedOS: selectedOS
})
// Close modal
@@ -109,8 +101,7 @@ export function OnboardingModal({
const canProceed = () => {
if (step === 1) return selectedCategories.length > 0
if (step === 2) return selectedOS !== 'unknown'
if (step === 3) return true
if (step === 2) return true
return false
}
@@ -136,7 +127,7 @@ export function OnboardingModal({
{/* Progress indicator */}
<div className="flex gap-2 mt-4">
{[1, 2, 3].map(i => (
{[1, 2].map(i => (
<div
key={i}
className={`h-2 flex-1 rounded-full transition-colors ${i <= step ? 'bg-primary' : 'bg-secondary'
@@ -160,30 +151,25 @@ export function OnboardingModal({
</div>
<div className="grid grid-cols-1 sm:grid-cols-2 gap-3">
{RECOMMENDATION_PRESETS.map(preset => {
const Icon = CATEGORY_ICONS[preset.category]
{(Object.entries(CATEGORY_ICONS) as [UserCategory, any][]).map(([category, Icon]) => {
return (
<button
key={preset.category}
onClick={() => handleCategoryToggle(preset.category)}
className={`p-4 rounded-lg border-2 text-left transition-all hover:scale-105 ${selectedCategories.includes(preset.category)
key={category}
onClick={() => handleCategoryToggle(category)}
className={`p-4 rounded-lg border-2 text-left transition-all hover:scale-105 ${selectedCategories.includes(category)
? 'border-primary bg-primary/10'
: 'border-border hover:border-primary/50'
}`}
>
<div className="flex items-start gap-3">
<div className="p-2 rounded-md bg-background border">
{Icon && <Icon className="h-6 w-6 text-primary" />}
</div>
<div className="flex-1 min-w-0">
<h4 className="font-semibold capitalize">
{t(`categories.${preset.category}.name`)}
</h4>
<p className="text-xs text-muted-foreground mt-1 line-clamp-2">
{t(`categories.${preset.category}.description`)}
</p>
</div>
<div className="flex items-center gap-3 mb-2">
<Icon className="h-6 w-6 text-primary" />
<h4 className="font-semibold capitalize">
{t(`categories.${category}.name`)}
</h4>
</div>
<p className="text-sm text-muted-foreground">
{t(`categories.${category}.description`)}
</p>
</button>
)
})}
@@ -245,39 +231,7 @@ export function OnboardingModal({
</div>
)}
{/* Step 3: Experience Level */}
{step === 3 && (
<div className="space-y-4">
<div>
<h3 className="text-lg font-semibold mb-2">
{t('onboarding.step3.title')}
</h3>
<p className="text-sm text-muted-foreground mb-4">
{t('onboarding.step3.description')}
</p>
</div>
<div className="space-y-3">
{(['beginner', 'intermediate', 'advanced'] as ExperienceLevel[]).map(level => (
<button
key={level}
onClick={() => setExperienceLevel(level)}
className={`w-full p-4 rounded-lg border-2 text-left transition-all hover:scale-[1.02] ${experienceLevel === level
? 'border-primary bg-primary/10'
: 'border-border hover:border-primary/50'
}`}
>
<h4 className="font-semibold capitalize mb-1">
{t(`onboarding.step3.levels.${level}.name`)}
</h4>
<p className="text-sm text-muted-foreground">
{t(`onboarding.step3.levels.${level}.description`)}
</p>
</button>
))}
</div>
</div>
)}
{/* Navigation Buttons */}
<div className="flex gap-3 pt-4">
@@ -292,7 +246,7 @@ export function OnboardingModal({
</Button>
)}
{step < 3 ? (
{step < 2 ? (
<Button
onClick={handleNext}
disabled={!canProceed()}
@@ -307,8 +261,8 @@ export function OnboardingModal({
disabled={!canProceed()}
className="flex-1"
>
{t('onboarding.complete')}
<Sparkles className="h-4 w-4 ml-2" />
<Sparkles className="h-4 w-4 mr-2" />
{t('common.finish')}
</Button>
)}
</div>