mirror of
https://github.com/warmbly/warmbly.git
synced 2026-09-06 00:01:24 +00:00
29 lines
1.1 KiB
Plaintext
29 lines
1.1 KiB
Plaintext
---
|
|
/**
|
|
* Mac-style app window chrome. Renders the traffic-light dots, an
|
|
* optional URL pill, and a slot for the app body.
|
|
*/
|
|
interface Props {
|
|
url?: string;
|
|
class?: string;
|
|
}
|
|
const { url, class: className = '' } = Astro.props;
|
|
---
|
|
<div class={`app-window ${className}`}>
|
|
<div class="flex items-center gap-2 px-3.5 h-9 border-b border-slate-200/80 bg-[#f8f9fb]">
|
|
<div class="flex items-center gap-1.5">
|
|
<span class="w-3 h-3 rounded-full bg-[#ff5f57] border border-black/5"></span>
|
|
<span class="w-3 h-3 rounded-full bg-[#febc2e] border border-black/5"></span>
|
|
<span class="w-3 h-3 rounded-full bg-[#28c840] border border-black/5"></span>
|
|
</div>
|
|
{url && (
|
|
<div class="mx-auto inline-flex items-center gap-2 h-6 px-3 rounded-md bg-white border border-slate-200/80 text-[11.5px] text-slate-500 font-mono">
|
|
<svg width="11" height="11" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><rect x="3" y="11" width="18" height="11" rx="2"/><path d="M7 11V7a5 5 0 0 1 10 0v4"/></svg>
|
|
{url}
|
|
</div>
|
|
)}
|
|
<div class="w-12"></div>
|
|
</div>
|
|
<slot />
|
|
</div>
|