Gabriel Kaszewski
294814d131
All checks were successful
Build and Deploy Blog / build-and-deploy-local (push) Successful in 38s
80 lines
1.9 KiB
TypeScript
80 lines
1.9 KiB
TypeScript
import Link from "next/link";
|
|
import React from "react";
|
|
|
|
const CloseIcon = () => (
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path
|
|
d="M1 1L11 11M1 11L11 1"
|
|
stroke="white"
|
|
strokeWidth="2"
|
|
strokeLinecap="round"
|
|
/>
|
|
</svg>
|
|
);
|
|
const MaximizeIcon = () => (
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<rect x="1" y="1" width="10" height="10" stroke="white" strokeWidth="2" />
|
|
</svg>
|
|
);
|
|
const MinimizeIcon = () => (
|
|
<svg
|
|
width="12"
|
|
height="12"
|
|
viewBox="0 0 12 12"
|
|
fill="none"
|
|
xmlns="http://www.w3.org/2000/svg"
|
|
>
|
|
<path d="M1 6H11" stroke="white" strokeWidth="2" strokeLinecap="round" />
|
|
</svg>
|
|
);
|
|
|
|
interface WindowProps {
|
|
title: string;
|
|
children: React.ReactNode;
|
|
className?: string;
|
|
}
|
|
|
|
export default function Window({
|
|
title,
|
|
children,
|
|
className = "",
|
|
}: WindowProps) {
|
|
return (
|
|
<div
|
|
className={`rounded-lg border border-white/30 bg-white/70 shadow-window backdrop-blur-xl ${className}`}
|
|
>
|
|
{/* Title Bar with gradient and controls */}
|
|
<div className="flex select-none items-center justify-between rounded-t-md bg-gradient-to-b from-blue-500 to-window-title px-4 py-1.5 font-bold text-white text-sm">
|
|
<span>{title}</span>
|
|
<div className="flex items-center space-x-2">
|
|
<div className="flex h-4 w-4 items-center justify-center opacity-80">
|
|
<MinimizeIcon />
|
|
</div>
|
|
<div className="flex h-4 w-4 items-center justify-center opacity-80">
|
|
<MaximizeIcon />
|
|
</div>
|
|
<Link
|
|
href="/"
|
|
className="flex h-4 w-4 items-center justify-center opacity-80"
|
|
>
|
|
<CloseIcon />
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
<div className="p-6">{children}</div>
|
|
</div>
|
|
);
|
|
}
|