41 lines
1.4 KiB
TypeScript
41 lines
1.4 KiB
TypeScript
import React from 'react';
|
|
import Scribble from '@/components/Scribble';
|
|
|
|
interface HighlightBoxProps {
|
|
title?: string;
|
|
children: React.ReactNode;
|
|
color?: 'primary' | 'secondary' | 'accent';
|
|
}
|
|
|
|
const colorStyles = {
|
|
primary: 'bg-gradient-to-br from-primary/5 to-transparent border-primary/20',
|
|
secondary: 'bg-gradient-to-br from-blue-50/50 to-transparent border-blue-200/50',
|
|
accent: 'bg-gradient-to-br from-accent/5 to-transparent border-accent/20',
|
|
};
|
|
|
|
export default function HighlightBox({ title, children, color = 'primary' }: HighlightBoxProps) {
|
|
return (
|
|
<div className={`my-12 p-8 md:p-10 rounded-3xl border ${colorStyles[color]} shadow-sm relative overflow-hidden group`}>
|
|
{/* Industrial accent corner */}
|
|
<div className="absolute top-0 right-0 w-16 h-16 bg-primary/5 -mr-8 -mt-8 rotate-45 transition-transform group-hover:scale-110" />
|
|
|
|
{title && (
|
|
<h3 className="text-2xl font-bold text-text-primary mb-6 flex items-center gap-4 relative">
|
|
<span className="relative">
|
|
{title}
|
|
{color === 'accent' && (
|
|
<Scribble
|
|
variant="underline"
|
|
className="absolute -bottom-2 left-0 w-full h-3 text-accent/40"
|
|
/>
|
|
)}
|
|
</span>
|
|
</h3>
|
|
)}
|
|
<div className="prose prose-lg max-w-none relative z-10">
|
|
{children}
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|