diff --git a/app/components/icons/Logo.tsx b/app/components/icons/Logo.tsx index dde8433..1f4219f 100644 --- a/app/components/icons/Logo.tsx +++ b/app/components/icons/Logo.tsx @@ -15,7 +15,8 @@ interface LogoProps { | "headerLg" | "headerXl" | "footer" - | "footerLg"; + | "footerLg" + | "createFlow"; showText?: boolean; } @@ -114,6 +115,13 @@ const Logo = memo(({ size = "default", showText = true }) => { lineHeight: "leading-[calc(27.05px*2.05)]", iconSize: "w-[calc(27.05px*2.05)] h-[calc(27.05px*2.05)]", }, + createFlow: { + containerHeight: "h-[30px] md:h-[41px]", + gap: "gap-[6px] md:gap-[8.28px]", + textSize: "text-[16.48px] md:text-[21.97px]", + lineHeight: "leading-[20.28px] md:leading-[27.05px]", + iconSize: "w-[20.28px] h-[20.28px] md:w-[27.05px] md:h-[27.05px]", + }, }; const config = @@ -137,8 +145,10 @@ const Logo = memo(({ size = "default", showText = true }) => { ? sizes.headerXl : size === "footer" ? sizes.footer - : size === "footerLg" - ? sizes.footerLg + : size === "footerLg" + ? sizes.footerLg + : size === "createFlow" + ? sizes.createFlow : sizes.default; return ( diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx new file mode 100644 index 0000000..1212196 --- /dev/null +++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.container.tsx @@ -0,0 +1,21 @@ +"use client"; + +import { memo } from "react"; +import { CreateFlowFooterView } from "./CreateFlowFooter.view"; +import type { CreateFlowFooterProps } from "./CreateFlowFooter.types"; + +const CreateFlowFooterContainer = memo( + ({ secondButton, progressBar = true, className = "" }) => { + return ( + + ); + }, +); + +CreateFlowFooterContainer.displayName = "CreateFlowFooter"; + +export default CreateFlowFooterContainer; diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts b/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts new file mode 100644 index 0000000..4bf5d0d --- /dev/null +++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.types.ts @@ -0,0 +1,20 @@ +/** + * Type definitions for CreateFlowFooter component + * + * Footer component for the create rule flow with progress bar and buttons. + */ +export interface CreateFlowFooterProps { + /** + * The second button (typically "Next" button) to display on the right side + */ + secondButton?: React.ReactNode; + /** + * Whether to show the progress bar + * @default true + */ + progressBar?: boolean; + /** + * Additional CSS classes + */ + className?: string; +} diff --git a/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx new file mode 100644 index 0000000..4b9feef --- /dev/null +++ b/app/components/utility/CreateFlowFooter/CreateFlowFooter.view.tsx @@ -0,0 +1,42 @@ +import ProportionBar from "../../progress/ProportionBar"; +import Button from "../../buttons/Button"; +import type { CreateFlowFooterProps } from "./CreateFlowFooter.types"; + +export function CreateFlowFooterView({ + secondButton, + progressBar = true, + className = "", +}: CreateFlowFooterProps) { + return ( +
+ {/* Progress Bar - Top */} + {progressBar && ( +
+ +
+ )} + + {/* Buttons Container */} +
+ {/* Back Button - Left */} + + + {/* Second Button - Right */} + {secondButton && ( +
{secondButton}
+ )} +
+
+ ); +} diff --git a/app/components/utility/CreateFlowFooter/index.tsx b/app/components/utility/CreateFlowFooter/index.tsx new file mode 100644 index 0000000..303a118 --- /dev/null +++ b/app/components/utility/CreateFlowFooter/index.tsx @@ -0,0 +1,2 @@ +export { default } from "./CreateFlowFooter.container"; +export type { CreateFlowFooterProps } from "./CreateFlowFooter.types"; diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx new file mode 100644 index 0000000..56de7eb --- /dev/null +++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.container.tsx @@ -0,0 +1,49 @@ +"use client"; + +import { memo } from "react"; +import { useRouter } from "next/navigation"; +import { CreateFlowTopNavView } from "./CreateFlowTopNav.view"; +import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types"; + +const CreateFlowTopNavContainer = memo( + ({ + hasShare = false, + hasExport = false, + hasEdit = false, + loggedIn = false, + onShare, + onExport, + onEdit, + onExit, + className = "", + }) => { + const router = useRouter(); + + const handleExit = () => { + if (onExit) { + onExit(); + } else { + // Default behavior: navigate to home + router.push("/"); + } + }; + + return ( + + ); + }, +); + +CreateFlowTopNavContainer.displayName = "CreateFlowTopNav"; + +export default CreateFlowTopNavContainer; diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts new file mode 100644 index 0000000..0559ad5 --- /dev/null +++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.types.ts @@ -0,0 +1,49 @@ +/** + * Type definitions for CreateFlowTopNav component + * + * Top navigation bar for the create rule flow. + * Includes logo and action buttons (Share, Export, Edit, Exit). + */ + +export interface CreateFlowTopNavProps { + /** + * Whether to show the Share button + * @default false + */ + hasShare?: boolean; + /** + * Whether to show the Export button + * @default false + */ + hasExport?: boolean; + /** + * Whether to show the Edit button + * @default false + */ + hasEdit?: boolean; + /** + * Whether the user is logged in + * @default false + */ + loggedIn?: boolean; + /** + * Callback when Share button is clicked + */ + onShare?: () => void; + /** + * Callback when Export button is clicked + */ + onExport?: () => void; + /** + * Callback when Edit button is clicked + */ + onEdit?: () => void; + /** + * Callback when Exit/Save & Exit button is clicked + */ + onExit?: () => void; + /** + * Additional CSS classes + */ + className?: string; +} diff --git a/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx new file mode 100644 index 0000000..d132207 --- /dev/null +++ b/app/components/utility/CreateFlowTopNav/CreateFlowTopNav.view.tsx @@ -0,0 +1,101 @@ +import Logo from "../../icons/Logo"; +import Button from "../../buttons/Button"; +import type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types"; + +export function CreateFlowTopNavView({ + hasShare = false, + hasExport = false, + hasEdit = false, + loggedIn = false, + onShare, + onExport, + onEdit, + onExit, + className = "", +}: CreateFlowTopNavProps) { + const exitButtonText = loggedIn ? "Save & Exit" : "Exit"; + + return ( +
+ +
+ ); +} diff --git a/app/components/utility/CreateFlowTopNav/index.tsx b/app/components/utility/CreateFlowTopNav/index.tsx new file mode 100644 index 0000000..e771fb2 --- /dev/null +++ b/app/components/utility/CreateFlowTopNav/index.tsx @@ -0,0 +1,2 @@ +export { default } from "./CreateFlowTopNav.container"; +export type { CreateFlowTopNavProps } from "./CreateFlowTopNav.types"; diff --git a/app/create/layout.tsx b/app/create/layout.tsx index 0ac1448..59a433c 100644 --- a/app/create/layout.tsx +++ b/app/create/layout.tsx @@ -2,12 +2,16 @@ import type { ReactNode } from "react"; import { CreateFlowProvider } from "./context/CreateFlowContext"; +import CreateFlowTopNav from "../components/utility/CreateFlowTopNav"; +import CreateFlowFooter from "../components/utility/CreateFlowFooter"; +import Button from "../components/buttons/Button"; /** * Layout for the Create Rule Flow * * Provides a full-screen layout without the root layout's TopNav/Footer. * This layout wraps all create flow pages and provides the CreateFlowContext. + * Includes the create flow-specific TopNav and Footer components. */ export default function CreateFlowLayout({ children, @@ -17,7 +21,22 @@ export default function CreateFlowLayout({ return (
- {children} + +
+ {children} +
+ + Next + + } + />
);