GKaszewski/blog
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add showProgress prop to Window with reading progress strip

Browse Source
This commit is contained in:
Gabriel Kaszewski
2026-03-31 02:27:13 +02:00
parent 5e11d3e13e
commit c0229f28a9
1 changed files with 24 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

42
components/window.tsx
View File

@@ -1,6 +1,7 @@
import Link from "next/link"; import Link from "next/link";
import React from "react"; import React from "react";
import RSSIcon from "./rss-icon"; import RSSIcon from "./rss-icon";
import ReadingProgress from "./reading-progress";
const CloseIcon = () => ( const CloseIcon = () => (
<svg <svg
@@ -45,38 +46,43 @@ interface WindowProps {
title: string; title: string;
children: React.ReactNode; children: React.ReactNode;
className?: string; className?: string;
showProgress?: boolean;
} }
export default function Window({ export default function Window({
title, title,
children, children,
className = "", className = "",
showProgress = false,
}: WindowProps) { }: WindowProps) {
return ( return (
<div <div
className={`rounded-lg border border-white/30 bg-white/70 shadow-window backdrop-blur-xl ${className}`} className={`rounded-lg border border-white/30 bg-white/70 shadow-window backdrop-blur-xl ${className}`}
> >
<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"> <div className="rounded-t-md overflow-hidden">
<div className="flex items-center space-x-2"> <div className="flex select-none items-center justify-between 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">
<Link href="/feed.xml" title="RSS Feed"> <span>{title}</span>
<RSSIcon className="h-4 w-4 opacity-80 hover:opacity-100" /> <Link href="/feed.xml" title="RSS Feed">
</Link> <RSSIcon className="h-4 w-4 opacity-80 hover:opacity-100" />
</div> </Link>
<div className="flex items-center space-x-2">
<div className="flex h-4 w-4 items-center justify-center opacity-80">
<MinimizeIcon />
</div> </div>
<div className="flex h-4 w-4 items-center justify-center opacity-80"> <div className="flex items-center space-x-2">
<MaximizeIcon /> <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>
<Link
href="/"
className="flex h-4 w-4 items-center justify-center opacity-80"
>
<CloseIcon />
</Link>
</div> </div>
{showProgress && <ReadingProgress />}
</div> </div>
<div className="p-6">{children}</div> <div className="p-6">{children}</div>
</div> </div>