46 lines
1.8 KiB
TypeScript
46 lines
1.8 KiB
TypeScript
"use client"
|
|
|
|
import React from 'react'
|
|
|
|
export default function SidebarComponents({
|
|
onAddHero,
|
|
onAddFAQ,
|
|
onAddCTA,
|
|
onAddFeatures,
|
|
onAddTestimonials,
|
|
}: {
|
|
onAddHero: () => void
|
|
onAddFAQ: () => void
|
|
onAddCTA: () => void
|
|
onAddFeatures: () => void
|
|
onAddTestimonials: () => void
|
|
}) {
|
|
return (
|
|
<div className="space-y-2" data-testid="sidebar-components">
|
|
<h2 className="text-sm font-semibold">Components</h2>
|
|
<div className="grid grid-cols-1 gap-2">
|
|
<button data-testid="card-hero" className="border rounded p-2 text-left" onClick={onAddHero}>
|
|
<div className="text-sm font-medium">Hero</div>
|
|
<div className="text-xs text-gray-500">Large heading + image</div>
|
|
</button>
|
|
<button data-testid="card-faq" className="border rounded p-2 text-left" onClick={onAddFAQ}>
|
|
<div className="text-sm font-medium">FAQ</div>
|
|
<div className="text-xs text-gray-500">Questions & answers</div>
|
|
</button>
|
|
<button data-testid="card-cta" className="border rounded p-2 text-left" onClick={onAddCTA}>
|
|
<div className="text-sm font-medium">CTA</div>
|
|
<div className="text-xs text-gray-500">Action button</div>
|
|
</button>
|
|
<button data-testid="card-features" className="border rounded p-2 text-left" onClick={onAddFeatures}>
|
|
<div className="text-sm font-medium">Features</div>
|
|
<div className="text-xs text-gray-500">List of product features</div>
|
|
</button>
|
|
<button data-testid="card-testimonials" className="border rounded p-2 text-left" onClick={onAddTestimonials}>
|
|
<div className="text-sm font-medium">Testimonials</div>
|
|
<div className="text-xs text-gray-500">Customer quotes</div>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
)
|
|
}
|