olly
a7e2a1887d
Publish npm package / publish (push) Successful in 17s
Window children rendered flush against the frame, so content (settings rows, placeholder text) touched the left edge. Wrap children in .modern-sk-window-body with 16px padding for consistent breathing room. Co-Authored-By: Claude Opus 4.8 <noreply@anthropic.com>
27 lines
709 B
TypeScript
27 lines
709 B
TypeScript
import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
|
|
|
|
export const Window = ({
|
|
title,
|
|
badge,
|
|
children,
|
|
...props
|
|
}: ComponentPropsWithoutRef<'div'> & {
|
|
title: string;
|
|
badge?: ReactNode;
|
|
}) => (
|
|
<div className="modern-sk-window" {...props}>
|
|
<div className="modern-sk-titlebar">
|
|
<span className="modern-sk-traffic r" />
|
|
<span className="modern-sk-traffic y" />
|
|
<span className="modern-sk-traffic g" />
|
|
<span className="ttl">{title}</span>
|
|
{badge && (
|
|
<div style={{ marginLeft: 'auto', display: 'flex', gap: 8 }}>
|
|
{badge}
|
|
</div>
|
|
)}
|
|
</div>
|
|
<div className="modern-sk-window-body">{children}</div>
|
|
</div>
|
|
);
|