feat: refactor side panels and enabled overlay panels

Signed-off-by: Mason Hu <mason.hu@canonical.com>

src/components/SidePanel.tsx

@@ -0,0 +1,138 @@
+import { FC, PropsWithChildren, ReactNode } from "react";
+import Loader from "components/Loader";
+import classnames from "classnames";
+import { Spinner } from "@canonical/react-components";
+
+interface CommonProps {
+  className?: string;
+}
+
+// Header components
+const HeaderControls: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div className={classnames("p-panel__controls", className)}>{children}</div>
+  );
+};
+
+const HeaderTitle: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <h2 className={classnames("p-panel__title", className)}>{children}</h2>
+  );
+};
+
+const Sticky: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div className={classnames("sticky-wrapper", className)}>{children}</div>
+  );
+};
+
+const Header: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div className={classnames("p-panel__header", className)}>{children}</div>
+  );
+};
+
+// Panel content components
+const Container: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return <div className={classnames("p-panel", className)}>{children}</div>;
+};
+
+const Content: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div className={classnames("p-panel__content", className)}>{children}</div>
+  );
+};
+
+// Footer components
+const Footer: FC<PropsWithChildren & CommonProps> = ({
+  children,
+  className,
+}) => {
+  return (
+    <div className={classnames("panel-footer", className)}>
+      <hr />
+      {children}
+    </div>
+  );
+};
+
+interface SidePanelProps {
+  isOverlay?: boolean;
+  isSplit?: boolean;
+  children: ReactNode;
+  loading: boolean;
+  hasError: boolean;
+  className?: string;
+}
+
+const SidePanelComponent: FC<SidePanelProps> = ({
+  children,
+  isOverlay,
+  isSplit = false,
+  loading = false,
+  hasError,
+  className,
+}) => {
+  return (
+    <aside
+      className={classnames("l-aside", className, {
+        "is-narrow": !isOverlay,
+        "is-pinned": !isOverlay,
+        "is-split": isSplit,
+        "is-overlay": isOverlay,
+      })}
+      aria-label="Side panel"
+    >
+      {loading ? (
+        <div className="loading">
+          <Spinner />
+        </div>
+      ) : (
+        <>
+          {loading && <Loader />}
+          {!loading && hasError && <>Loading failed</>}
+          {!hasError && children}
+        </>
+      )}
+    </aside>
+  );
+};
+
+type SidePanelComponents = FC<SidePanelProps> & {
+  Header: FC<PropsWithChildren & CommonProps>;
+  HeaderTitle: FC<PropsWithChildren & CommonProps>;
+  HeaderControls: FC<PropsWithChildren & CommonProps>;
+  Sticky: FC<PropsWithChildren & CommonProps>;
+  Container: FC<PropsWithChildren & CommonProps>;
+  Content: FC<PropsWithChildren & CommonProps>;
+  Footer: FC<PropsWithChildren & CommonProps>;
+};
+
+const SidePanel = SidePanelComponent as SidePanelComponents;
+SidePanel.Header = Header;
+SidePanel.HeaderTitle = HeaderTitle;
+SidePanel.HeaderControls = HeaderControls;
+SidePanel.Sticky = Sticky;
+SidePanel.Container = Container;
+SidePanel.Content = Content;
+SidePanel.Footer = Footer;
+
+export default SidePanel;