Spaces:
Configuration error
Configuration error
File size: 3,727 Bytes
bcce530 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 | "use client"
import { useState } from 'react'
import { Framework, getAllFrameworks } from '@/lib/frameworks'
import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
import { Badge } from '@/components/ui/badge'
import { Button } from '@/components/ui/button'
import { Check } from 'lucide-react'
interface FrameworkSelectorProps {
selectedFramework?: string
onSelect: (frameworkId: string | null) => void
className?: string
}
export function FrameworkSelector({ selectedFramework, onSelect, className = '' }: FrameworkSelectorProps) {
const frameworks = getAllFrameworks()
return (
<div className={`space-y-4 ${className}`}>
<div>
<h3 className="text-lg font-semibold mb-2">Choose a Framework (Optional)</h3>
<p className="text-sm text-muted-foreground">
Structured frameworks help you write better prompts. Select one to get started with a template.
</p>
</div>
<div className="grid md:grid-cols-2 gap-3">
{/* No Framework Option */}
<Card
className={`cursor-pointer transition-all hover:border-primary ${!selectedFramework ? 'border-primary bg-primary/5' : ''}`}
onClick={() => onSelect(null)}
>
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div>
<CardTitle className="text-base">No Framework</CardTitle>
<CardDescription className="text-xs mt-1">
Start from scratch
</CardDescription>
</div>
{!selectedFramework && (
<Check className="h-5 w-5 text-primary" />
)}
</div>
</CardHeader>
</Card>
{/* Framework Options */}
{frameworks.map((framework) => (
<Card
key={framework.id}
className={`cursor-pointer transition-all hover:border-primary ${selectedFramework === framework.id ? 'border-primary bg-primary/5' : ''
}`}
onClick={() => onSelect(framework.id)}
>
<CardHeader className="pb-3">
<div className="flex items-start justify-between">
<div>
<div className="flex items-center gap-2 mb-1">
<CardTitle className="text-base">{framework.name}</CardTitle>
<Badge variant="outline" className="text-xs">
{framework.sections.length} sections
</Badge>
</div>
<CardDescription className="text-xs">
{framework.description}
</CardDescription>
</div>
{selectedFramework === framework.id && (
<Check className="h-5 w-5 text-primary flex-shrink-0" />
)}
</div>
</CardHeader>
</Card>
))}
</div>
</div>
)
}
|