"use client"; import { IconChevronLeftLine, IconXmarkLine } from "@karrotmarket/react-monochrome-icon"; // "@daangn/react-monochrome-icon"과 동일합니다. import { VStack } from "@seed-design/react"; import { AppBar as SeedAppBar, type AppBarIconButtonProps } from "@seed-design/stackflow"; import { useActions, useActivity } from "@stackflow/react"; import * as React from "react"; import { forwardRef } from "react"; export interface AppBarProps extends SeedAppBar.RootProps {} export const AppBar = SeedAppBar.Root; export interface AppBarLeftProps extends SeedAppBar.LeftProps {} export const AppBarLeft = SeedAppBar.Left; export interface AppBarRightProps extends SeedAppBar.RightProps {} export const AppBarRight = SeedAppBar.Right; export interface AppBarMainProps extends Omit { /** * The title of the app bar. * If children is provided as ReactElement, this prop will be ignored. */ title?: string; /** * The subtitle of the app bar. * If children is provided as ReactElement, this prop will be ignored. */ subtitle?: string; } export const AppBarMain = forwardRef( ({ title, subtitle, children, ...otherProps }, ref) => { if (React.isValidElement(children)) { return ( {children} ); } return ( {children ?? title} {subtitle ? {subtitle} : null} ); }, ); AppBarMain.displayName = "AppBarMain"; export const AppBarIconButton = SeedAppBar.IconButton; export const AppBarBackButton = forwardRef( ({ children = , onClick, ...otherProps }, ref) => { const activity = useActivity(); const actions = useActions(); const handleOnClick = (e: React.MouseEvent) => { onClick?.(e); if (!e.defaultPrevented) { actions.pop(); } }; if (!activity) { return null; } if (activity.isRoot) { return null; } return ( {children} ); }, ); AppBarBackButton.displayName = "AppBarBackButton"; export const AppBarCloseButton = forwardRef( ({ children = , onClick, ...otherProps }, ref) => { const activity = useActivity(); const handleOnClick = (e: React.MouseEvent) => { onClick?.(e); if (!e.defaultPrevented) { // you can do something here } }; const isRoot = !activity || activity.isRoot; if (!isRoot) { return null; } return ( {children} ); }, ); AppBarCloseButton.displayName = "AppBarCloseButton";

App Screen

Manual Installation

On this page