feat: add side panel component

ArdentHQ · Jan 17, 2025 · 483f095 · 483f095
1 parent 0c728e2
commit 483f095
Showing 1 changed file with 23 additions and 4 deletions.
diff --git a/src/app/components/SidePanel/SidePanel.tsx b/src/app/components/SidePanel/SidePanel.tsx
@@ -10,14 +10,17 @@ import {
 	useTransitionStyles,
 } from "@floating-ui/react";
 import React from "react";
+import { Button } from "@/app/components/Button";
+import { Icon } from "@/app/components/Icon";
 
 interface SidePanelProps {
 	children: React.ReactNode;
 	open: boolean;
 	onOpenChange: (open: boolean) => void;
+	header?: React.ReactNode | string;
 }
 
-export const SidePanel = ({ children, open, onOpenChange }: SidePanelProps): JSX.Element => {
+export const SidePanel = ({ children, open, onOpenChange, header }: SidePanelProps): JSX.Element => {
 	const { refs, context } = useFloating({
 		onOpenChange,
 		open,
@@ -46,9 +49,25 @@ export const SidePanel = ({ children, open, onOpenChange }: SidePanelProps): JSX
 					>
 						<FloatingFocusManager context={context}>
 							<div className="Dialog" ref={refs.setFloating} {...getFloatingProps()}>
-								<div className="custom-scroll fixed right-0 top-0 h-screen w-full overflow-y-scroll bg-theme-background p-4 shadow-[0_15px_35px_0px_rgba(33,34,37,0.08)] md:w-[512px] md:p-8">
-									{children}
-									<button onClick={() => onOpenChange(false)}>Cancel</button>
+								<div className="custom-scroll fixed right-0 top-0 h-screen w-full text-theme-text overflow-y-scroll bg-theme-background p-4 shadow-[0_15px_35px_0px_rgba(33,34,37,0.08)] md:w-[512px] md:p-8">
+									<div className="relative flex justify-between items-center mb-4">
+										{typeof header === "string" ? (<h2 className="mb-0 text-lg font-bold md:pt-0 md:text-2xl">{header}</h2>) : <>{header}</>}
+										<div
+											className="w-8 h-8 rounded bg-theme-primary-100 transition-all duration-100 ease-linear hover:bg-theme-primary-800 hover:text-white green:hover:bg-theme-primary-700 dark:bg-theme-secondary-800 dark:text-theme-secondary-200 dark:hover:bg-theme-primary-500 dark:hover:text-white">
+											<Button
+												data-testid="SidePanel__close-button"
+												variant="transparent"
+												size="icon"
+												onClick={() => onOpenChange(false)}
+												className="h-8 w-8"
+											>
+												<Icon name="Cross" />
+											</Button>
+										</div>
+									</div>
+									<div>
+										{children}
+									</div>
 								</div>
 							</div>
 						</FloatingFocusManager>