mmintel/klz-cables.com
1
0
Fork 0
Code Issues Pull Requests 2 Actions Packages Projects Releases Wiki Activity

components

Browse Source
This commit is contained in:
Marc Mintel
2026-01-19 01:46:07 +01:00
parent ac2add1984
commit 46266a7bbc
20 changed files with 234 additions and 161 deletions
Download Patch File Download Diff File Expand all files Collapse all files

64
components/blog/Callout.tsx
View File

@@ -1,64 +0,0 @@
import React from 'react';
interface CalloutProps {
type?: 'info' | 'warning' | 'success' | 'tip';
title?: string;
children: React.ReactNode;
}
const icons = {
info: (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a1 1 0 000 2v3a1 1 0 001 1h1a1 1 0 100-2v-3a1 1 0 00-1-1H9z" clipRule="evenodd" />
</svg>
),
warning: (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
</svg>
),
success: (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path fillRule="evenodd" d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.707-9.293a1 1 0 00-1.414-1.414L9 10.586 7.707 9.293a1 1 0 00-1.414 1.414l2 2a1 1 0 001.414 0l4-4z" clipRule="evenodd" />
</svg>
),
tip: (
<svg className="w-6 h-6" fill="currentColor" viewBox="0 0 20 20">
<path d="M9.049 2.927c.3-.921 1.603-.921 1.902 0l1.07 3.292a1 1 0 00.95.69h3.462c.969 0 1.371 1.24.588 1.81l-2.8 2.034a1 1 0 00-.364 1.118l1.07 3.292c.3.921-.755 1.688-1.54 1.118l-2.8-2.034a1 1 0 00-1.175 0l-2.8 2.034c-.784.57-1.838-.197-1.539-1.118l1.07-3.292a1 1 0 00-.364-1.118L2.98 8.72c-.783-.57-.38-1.81.588-1.81h3.461a1 1 0 00.951-.69l1.07-3.292z" />
</svg>
),
};
const styles = {
info: 'bg-blue-50 border-blue-200 text-blue-900',
warning: 'bg-yellow-50 border-yellow-200 text-yellow-900',
success: 'bg-green-50 border-green-200 text-green-900',
tip: 'bg-purple-50 border-purple-200 text-purple-900',
};
const iconColors = {
info: 'text-blue-500',
warning: 'text-yellow-500',
success: 'text-green-500',
tip: 'text-purple-500',
};
export default function Callout({ type = 'info', title, children }: CalloutProps) {
return (
<div className={`my-8 p-6 rounded-xl border-2 ${styles[type]}`}>
<div className="flex gap-4">
<div className={`flex-shrink-0 ${iconColors[type]}`}>
{icons[type]}
</div>
<div className="flex-1">
{title && (
<h4 className="font-bold text-lg mb-2">{title}</h4>
)}
<div className="prose prose-sm max-w-none">
{children}
</div>
</div>
</div>
</div>
);
}