initial commit

fluxer_app/src/components/layout/OutlineFrame.tsx

@@ -0,0 +1,83 @@
+/*
+ * Copyright (C) 2026 Fluxer Contributors
+ *
+ * This file is part of Fluxer.
+ *
+ * Fluxer is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Fluxer is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Fluxer. If not, see <https://www.gnu.org/licenses/>.
+ */
+
+import {clsx} from 'clsx';
+import React from 'react';
+import {FrameContext, type FrameSides} from './FrameContext';
+import styles from './OutlineFrame.module.css';
+
+interface OutlineFrameProps {
+	sidebarDivider?: boolean;
+	hideTopBorder?: boolean;
+	sides?: FrameSides;
+	nagbar?: React.ReactNode;
+	topBanner?: React.ReactNode;
+	children: React.ReactNode;
+	className?: string;
+}
+
+export const OutlineFrame: React.FC<OutlineFrameProps> = ({
+	sidebarDivider = false,
+	hideTopBorder = false,
+	sides,
+	topBanner,
+	nagbar,
+	children,
+	className,
+}) => {
+	const ctxSides = React.useMemo<FrameSides>(() => {
+		return {
+			top: !hideTopBorder,
+			right: true,
+			bottom: true,
+			left: true,
+			...sides,
+		};
+	}, [hideTopBorder, sides]);
+
+	const showTopBorder = ctxSides.top !== false;
+	const frameStyle = React.useMemo<React.CSSProperties>(() => {
+		return {
+			borderLeft: ctxSides.left === false ? 'none' : undefined,
+			borderRight: ctxSides.right === false ? 'none' : undefined,
+			borderBottom: ctxSides.bottom === false ? 'none' : undefined,
+		};
+	}, [ctxSides.bottom, ctxSides.left, ctxSides.right]);
+
+	return (
+		<div
+			className={clsx(
+				styles.frame,
+				showTopBorder && styles.frameShowTop,
+				!showTopBorder && styles.frameHideTop,
+				className,
+			)}
+			style={frameStyle}
+		>
+			<FrameContext.Provider value={ctxSides}>
+				{topBanner}
+				{nagbar}
+				<div className={styles.contentWrapper}>
+					{sidebarDivider && <div className={styles.divider} aria-hidden />}
+					<div className={styles.body}>{children}</div>
+				</div>
+			</FrameContext.Provider>
+		</div>
+	);
+};