blog.hangerthem.com/components/common/BlockquoteWrapper.tsx

28 lines
854 B
TypeScript

import type { NoteType } from '@/types/Note.type'
import { Lightbulb, FileWarning, TriangleAlert, Quote } from 'lucide-react'
type BlockquoteWrapperProps = {
type?: NoteType
children: React.ReactNode
}
const noteTypeIcons: Record<NoteType, React.ReactNode> = {
warning: <TriangleAlert className="w-4 h-4" />,
tip: <Lightbulb className="w-4 h-4" />,
info: <FileWarning className="w-4 h-4" />,
quote: <Quote className="w-4 h-4" />,
}
export function BlockquoteWrapper({ type, children }: BlockquoteWrapperProps) {
return (
<blockquote className={`note ${type}`}>
{type && (
<div className="note-icon flex items-center gap-2 mb-2">
{noteTypeIcons[type]}
<span className="capitalize font-bold">{type}</span>
</div>
)}
<div className="italic">{children}</div>
</blockquote>
)
}