Schanbro/PsalmTafel
1
1
Fork 0
Code Issues 8 Pull Requests Actions Packages Projects Releases 6 Wiki Activity

style: adjust Callout style

Browse Source
This commit is contained in:
Schanbro
2026-08-25 11:47:06 +02:00
parent a414f80d0d
commit 4ebe47e7fa
2 changed files with 24 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/mdx-components.tsx
+16 -11
View File
@@ -9,21 +9,26 @@ export function Callout({
children: React.ReactNode;
type?: 'info' | 'warning' | 'error' | 'success'
}) {
// Farben für Hintergrund, Text und den linken Akzentstreifen (after)
const variants = {
info: "bg-blue-500/10 border-blue-500 text-blue-200",
warning: "bg-amber-500/10 border-amber-500 text-amber-200",
error: "bg-red-500/10 border-red-500 text-red-200",
success: "bg-emerald-500/10 border-emerald-500 text-emerald-200",
info: "bg-blue-500/10 text-blue-200 after:bg-blue-500",
warning: "bg-amber-500/10 text-amber-200 after:bg-amber-500",
error: "bg-red-500/10 text-red-200 after:bg-red-500",
success: "bg-emerald-500/10 text-emerald-200 after:bg-emerald-500",
};
return (
<div className={`p-4 my-6 rounded-xl border-l-4 ${variants[type]}`}>
<div className="flex gap-3 items-start">
<div className="mt-0.5 shrink-0">
{type === 'info' && <svg className="w-5 h-5 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
{type === 'warning' && <svg className="w-5 h-5 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>}
{type === 'error' && <svg className="w-5 h-5 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
{type === 'success' && <svg className="w-5 h-5 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>}
<div
className={`relative overflow-hidden p-4 my-6 rounded-md
after:content-[''] after:absolute after:top-1 after:left-1 after:bottom-1 after:w-1 after:rounded
${variants[type]}`}
>
<div className="flex gap-3 items-center">
<div className="shrink-0">
{type === 'info' && <svg className="w-6 h-6 text-blue-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M13 16h-1v-4h-1m1-4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
{type === 'warning' && <svg className="w-6 h-6 text-amber-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z" /></svg>}
{type === 'error' && <svg className="w-6 h-6 text-red-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z" /></svg>}
{type === 'success' && <svg className="w-6 h-6 text-emerald-400" fill="none" viewBox="0 0 24 24" stroke="currentColor"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>}
</div>
<div className="text-sm leading-relaxed [&>p]:m-0">{children}</div>
</div>
data/wiki/pages/test.mdx
+8
View File
@@ -35,6 +35,14 @@ Willkommen im offiziellen Wiki! Hier findest du alle Informationen zum Projekt.
Du bist jetzt bereit zum Entwickeln!
</Callout>
<Callout type="info">
Du bist jetzt bereit zum Entwickeln!
</Callout>
<Callout type="error">
Du bist jetzt bereit zum Entwickeln!
</Callout>
```typescript
function sayHello(name: string): string {
return `Hallo, ${name}!`;