shrimbly
6 months ago
10 changed files with 239 additions and 266 deletions
@ -1,65 +0,0 @@ |
|||
"use client"; |
|||
|
|||
import { ContentLevel } from "@/lib/quickstart/templates"; |
|||
|
|||
interface ContentLevelSelectorProps { |
|||
value: ContentLevel; |
|||
onChange: (level: ContentLevel) => void; |
|||
disabled?: boolean; |
|||
} |
|||
|
|||
const CONTENT_LEVELS: { value: ContentLevel; label: string; description: string }[] = [ |
|||
{ |
|||
value: "empty", |
|||
label: "Empty", |
|||
description: "Structure only, no prompts", |
|||
}, |
|||
{ |
|||
value: "minimal", |
|||
label: "Minimal", |
|||
description: "Placeholder prompts", |
|||
}, |
|||
{ |
|||
value: "full", |
|||
label: "Full", |
|||
description: "Complete example prompts", |
|||
}, |
|||
]; |
|||
|
|||
export function ContentLevelSelector({ |
|||
value, |
|||
onChange, |
|||
disabled = false, |
|||
}: ContentLevelSelectorProps) { |
|||
return ( |
|||
<div className="flex flex-col gap-2"> |
|||
<label className="text-xs font-medium text-neutral-400"> |
|||
Content Level |
|||
</label> |
|||
<div className="flex gap-1 p-1 bg-neutral-900 rounded-lg border border-neutral-700"> |
|||
{CONTENT_LEVELS.map((level) => ( |
|||
<button |
|||
key={level.value} |
|||
onClick={() => onChange(level.value)} |
|||
disabled={disabled} |
|||
className={` |
|||
flex-1 px-3 py-2 rounded-md text-xs font-medium transition-all |
|||
${ |
|||
value === level.value |
|||
? "bg-neutral-700 text-neutral-100 shadow-sm" |
|||
: "text-neutral-400 hover:text-neutral-200 hover:bg-neutral-800" |
|||
} |
|||
${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} |
|||
`}
|
|||
title={level.description} |
|||
> |
|||
{level.label} |
|||
</button> |
|||
))} |
|||
</div> |
|||
<p className="text-[10px] text-neutral-500"> |
|||
{CONTENT_LEVELS.find((l) => l.value === value)?.description} |
|||
</p> |
|||
</div> |
|||
); |
|||
} |
|||
@ -1,62 +0,0 @@ |
|||
"use client"; |
|||
|
|||
import { getAllPresets } from "@/lib/quickstart/templates"; |
|||
|
|||
interface QuickstartPresetChipsProps { |
|||
selectedId: string | null; |
|||
onSelect: (templateId: string | null) => void; |
|||
disabled?: boolean; |
|||
} |
|||
|
|||
export function QuickstartPresetChips({ |
|||
selectedId, |
|||
onSelect, |
|||
disabled = false, |
|||
}: QuickstartPresetChipsProps) { |
|||
const presets = getAllPresets(); |
|||
|
|||
return ( |
|||
<div className="flex flex-col gap-3"> |
|||
<label className="text-xs font-medium text-neutral-400"> |
|||
Quick Start Templates |
|||
</label> |
|||
<div className="flex flex-wrap gap-2"> |
|||
{presets.map((preset) => ( |
|||
<button |
|||
key={preset.id} |
|||
onClick={() => onSelect(selectedId === preset.id ? null : preset.id)} |
|||
disabled={disabled} |
|||
className={` |
|||
group flex items-center gap-2 px-3 py-2 rounded-lg border transition-all |
|||
${ |
|||
selectedId === preset.id |
|||
? "bg-blue-600/20 border-blue-500/50 text-blue-300" |
|||
: "bg-neutral-800/50 border-neutral-700 text-neutral-300 hover:border-neutral-600 hover:bg-neutral-800" |
|||
} |
|||
${disabled ? "opacity-50 cursor-not-allowed" : "cursor-pointer"} |
|||
`}
|
|||
title={preset.description} |
|||
> |
|||
<svg |
|||
className={`w-4 h-4 ${ |
|||
selectedId === preset.id ? "text-blue-400" : "text-neutral-500 group-hover:text-neutral-400" |
|||
}`}
|
|||
fill="none" |
|||
viewBox="0 0 24 24" |
|||
stroke="currentColor" |
|||
strokeWidth={1.5} |
|||
> |
|||
<path strokeLinecap="round" strokeLinejoin="round" d={preset.icon} /> |
|||
</svg> |
|||
<span className="text-xs font-medium">{preset.name}</span> |
|||
</button> |
|||
))} |
|||
</div> |
|||
{selectedId && ( |
|||
<p className="text-[10px] text-neutral-500"> |
|||
{presets.find((p) => p.id === selectedId)?.description} |
|||
</p> |
|||
)} |
|||
</div> |
|||
); |
|||
} |
|||
@ -1,7 +1,5 @@ |
|||
export { AIQuickstartWelcome } from "./AIQuickstartWelcome"; |
|||
export { ContentLevelSelector } from "./ContentLevelSelector"; |
|||
export { QuickstartPresetChips } from "./QuickstartPresetChips"; |
|||
export { WelcomeModal } from "./WelcomeModal"; |
|||
export { QuickstartBackButton } from "./QuickstartBackButton"; |
|||
export { QuickstartInitialView } from "./QuickstartInitialView"; |
|||
export { QuickstartTemplatesView } from "./QuickstartTemplatesView"; |
|||
export { QuickstartVibeView } from "./QuickstartVibeView"; |
|||
export { PromptWorkflowView } from "./PromptWorkflowView"; |
|||
|
|||
Loading…
Reference in new issue