feat: templates, storage

src/pages/_components/form-drawer.tsx

@@ -1,4 +1,5 @@
 import { ColumnWrapper, GSDrawer, ModalFooter } from '@gpustack/core-ui';
+import type { DrawerProps } from 'antd';
 import { Tag } from 'antd';
 import React from 'react';
 
@@ -17,6 +18,7 @@ type AddModalProps = {
   width?: number | string;
   footer?: React.ReactNode;
   subTitle?: React.ReactNode;
+  push?: DrawerProps['push'];
 };
 const FormDrawer: React.FC<AddModalProps> = ({
   title,
@@ -26,7 +28,8 @@ const FormDrawer: React.FC<AddModalProps> = ({
   children,
   width = 600,
   subTitle,
-  footer
+  footer,
+  push
 }) => {
   return (
     <GSDrawer
@@ -58,6 +61,7 @@ const FormDrawer: React.FC<AddModalProps> = ({
         closable: false
       }}
       keyboard={false}
+      push={push}
       styles={{
         wrapper: { width }
       }}

src/pages/_components/form-overlay-view.module.less

@@ -0,0 +1,59 @@
+.overlay {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: auto;
+  left: auto;
+  z-index: 1005;
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  overflow: hidden;
+  background: var(--ant-color-bg-elevated);
+  border-radius: var(--ant-border-radius-lg) 0 0 var(--ant-border-radius-lg);
+  box-shadow:
+    -6px 0 16px 0 rgb(0 0 0 / 8%),
+    -3px 0 6px -4px rgb(0 0 0 / 12%),
+    -9px 0 28px 8px rgb(0 0 0 / 5%);
+}
+
+.header {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 56px;
+  padding: var(--ant-padding) var(--ant-padding-lg);
+  border-bottom: 1px solid var(--ant-color-split);
+  color: var(--ant-color-text);
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 24px;
+}
+
+.title {
+  display: flex;
+  min-width: 0;
+  align-items: center;
+}
+
+.subTitle {
+  margin-left: 8px;
+  border-color: var(--ant-color-border-secondary);
+  border-radius: 4px;
+  color: var(--ant-color-text-secondary);
+  font-size: 12px;
+  font-weight: 400;
+}
+
+.content {
+  padding-block: 16px;
+  flex: 1;
+  height: calc(100vh - 57px);
+  overflow-y: auto;
+}
+
+.footer {
+  display: flex;
+  justify-content: flex-end;
+  padding: 16px 24px 8px;
+}

src/pages/_components/form-overlay-view.tsx

@@ -0,0 +1,90 @@
+import { ColumnWrapper, IconFont } from '@gpustack/core-ui';
+import { Button, Tag } from 'antd';
+import React from 'react';
+import { createPortal } from 'react-dom';
+import styles from './form-overlay-view.module.less';
+
+type FormOverlayViewProps = {
+  title: React.ReactNode;
+  open: boolean;
+  onCancel?: () => void;
+  children?: React.ReactNode;
+  onSubmit?: () => void;
+  footer?: React.ReactNode;
+  subTitle?: React.ReactNode;
+  width?: number | string;
+  className?: string;
+  style?: React.CSSProperties;
+  getContainer?: () => HTMLElement | null | undefined;
+};
+
+const FormOverlayView: React.FC<FormOverlayViewProps> = ({
+  title,
+  open,
+  onCancel,
+  onSubmit,
+  children,
+  subTitle,
+  footer,
+  width = 600,
+  className,
+  style,
+  getContainer
+}) => {
+  const [container, setContainer] = React.useState<HTMLElement | null>(null);
+
+  React.useEffect(() => {
+    if (!open) {
+      setContainer(null);
+      return;
+    }
+
+    setContainer(getContainer?.() ?? null);
+  }, [getContainer, open]);
+
+  if (!open) {
+    return null;
+  }
+
+  if (!container) {
+    return null;
+  }
+
+  return createPortal(
+    <div
+      className={[styles.overlay, className].filter(Boolean).join(' ')}
+      style={{ width, ...style }}
+      role="dialog"
+      aria-modal="true"
+    >
+      <div className={styles.header}>
+        <Button
+          type="text"
+          size="small"
+          style={{ fontWeight: 600, fontSize: 16 }}
+          icon={<IconFont type="icon-down2" rotate={90} />}
+          onClick={onCancel}
+        />
+        <div className={styles.title}>
+          {title}
+          {subTitle && (
+            <Tag variant="outlined" className={styles.subTitle}>
+              {subTitle}
+            </Tag>
+          )}
+        </div>
+      </div>
+      <ColumnWrapper
+        styles={{
+          container: { paddingBlock: 16 }
+        }}
+        footer={footer}
+      >
+        {children}
+      </ColumnWrapper>
+    </div>,
+    container
+  );
+};
+
+export default FormOverlayView;