Profile page UI and functionality implemented

app/components/modals/Dialog/Dialog.container.tsx

@@ -0,0 +1,50 @@
+"use client";
+
+import { memo, useId, useRef } from "react";
+import { useCreateModalA11y } from "../Create/useCreateModalA11y";
+import { DialogView } from "./Dialog.view";
+import type { DialogProps } from "./Dialog.types";
+
+const DialogContainer = memo<DialogProps>(
+  ({
+    isOpen,
+    onClose,
+    title,
+    description,
+    footer,
+    children,
+    className = "",
+    ariaLabel,
+    ariaLabelledBy: ariaLabelledByProp,
+    backdropVariant = "default",
+  }) => {
+    const dialogRef = useRef<HTMLDivElement>(null);
+    const overlayRef = useRef<HTMLDivElement>(null);
+    const autoTitleId = useId();
+    const titleId = ariaLabelledByProp ?? autoTitleId;
+
+    useCreateModalA11y(isOpen, onClose, dialogRef);
+
+    return (
+      <DialogView
+        isOpen={isOpen}
+        onClose={onClose}
+        title={title}
+        description={description}
+        footer={footer}
+        children={children}
+        className={className}
+        ariaLabel={ariaLabel}
+        ariaLabelledBy={titleId}
+        titleId={titleId}
+        backdropVariant={backdropVariant}
+        overlayRef={overlayRef}
+        dialogRef={dialogRef}
+      />
+    );
+  },
+);
+
+DialogContainer.displayName = "Dialog";
+
+export default DialogContainer;

app/components/modals/Dialog/Dialog.types.ts

@@ -0,0 +1,37 @@
+import type { ReactNode, RefObject } from "react";
+import type { CreateModalBackdropVariant } from "../Create/CreateModalFrame.view";
+
+export interface DialogProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  /** Primary actions row (e.g. Cancel + Confirm) — use design-system `Button`s. */
+  footer: ReactNode;
+  /** Optional body below the title block (scrolls when tall). */
+  children?: ReactNode;
+  className?: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  /**
+   * Same backdrop options as the Create modal shell.
+   * @default "default"
+   */
+  backdropVariant?: CreateModalBackdropVariant;
+}
+
+export interface DialogViewProps {
+  isOpen: boolean;
+  onClose: () => void;
+  title: string;
+  description?: string;
+  footer: ReactNode;
+  children?: ReactNode;
+  className: string;
+  ariaLabel?: string;
+  ariaLabelledBy?: string;
+  titleId: string;
+  backdropVariant: CreateModalBackdropVariant;
+  overlayRef: RefObject<HTMLDivElement | null>;
+  dialogRef: RefObject<HTMLDivElement | null>;
+}

app/components/modals/Dialog/Dialog.view.tsx

@@ -0,0 +1,68 @@
+"use client";
+
+import { memo } from "react";
+import ContentLockup from "../../type/ContentLockup";
+import ModalFooter from "../../utility/ModalFooter";
+import ModalHeader from "../../utility/ModalHeader";
+import { CreateModalFrameView } from "../Create/CreateModalFrame.view";
+import type { DialogViewProps } from "./Dialog.types";
+
+export const DialogView = memo(function DialogView({
+  isOpen,
+  onClose,
+  title,
+  description,
+  footer,
+  children,
+  className,
+  ariaLabel,
+  ariaLabelledBy,
+  titleId,
+  backdropVariant,
+  overlayRef,
+  dialogRef,
+}: DialogViewProps) {
+  return (
+    <CreateModalFrameView
+      isOpen={isOpen}
+      onOverlayClick={onClose}
+      backdropVariant={backdropVariant}
+      className={className}
+      ariaLabel={ariaLabel}
+      ariaLabelledBy={ariaLabelledBy}
+      overlayRef={overlayRef}
+      dialogRef={dialogRef}
+    >
+      <ModalHeader onClose={onClose} onMoreOptions={onClose} />
+
+      <div className="bg-[var(--color-surface-default-primary)] px-[24px] py-[12px] shrink-0">
+        <ContentLockup
+          title={title}
+          description={description}
+          variant="modal"
+          alignment="left"
+          titleId={titleId}
+        />
+      </div>
+
+      {children ? (
+        <div className="scrollbar-design flex min-h-0 flex-1 flex-col gap-[var(--spacing-scale-024)] overflow-x-clip overflow-y-auto px-[24px] pb-6 pt-0">
+          {children}
+        </div>
+      ) : null}
+
+      <ModalFooter
+        showBackButton={false}
+        showNextButton={false}
+        stepper={false}
+        footerContent={
+          <div className="absolute right-[16px] top-[12px] flex max-w-[calc(100%-32px)] flex-wrap items-center justify-end gap-3">
+            {footer}
+          </div>
+        }
+      />
+    </CreateModalFrameView>
+  );
+});
+
+DialogView.displayName = "DialogView";

app/components/modals/Dialog/index.tsx

@@ -0,0 +1,2 @@
+export { default } from "./Dialog.container";
+export type { DialogProps } from "./Dialog.types";