@tapie-kr/inspire-react/dist/esm/components/molecules/Sheet/header.js

React Component Collection for INSPIRE

'use client';
/* eslint-disable */
/*
 * INSPIRE : Creative Kit
 * React Component Collection for INSPIRE
 *
 * This file is generated automatically. Do not modify it manually
 * Generated at : 2025. 3. 4. 오후 6:18:13
 * @tapie-kr/inspire-react version: 0.2.15
 *
 * (c) 2025 TAPIE. All rights reserved.
 * MIT License
*/
import { jsxs, jsx } from 'react/jsx-runtime';
import { title, handleBar, bar } from './styles/header.css.js';
import { spacingVars } from '../../../lib/style/contract/component.css.js';
import { Button } from '../../atoms/Button/index.js';
import { GlyphIcon } from '../../foundations/Icon/icon-set.js';
import { Typography } from '../../foundations/Typography/index.js';
import { Box } from '../../miscellaneous/layout/Box/index.js';
import { HStack } from '../../miscellaneous/layout/HStack/index.js';
import { Stack } from '../../miscellaneous/layout/Stack/index.js';
import { useContext, useMemo } from 'react';
import { ButtonSize, ButtonVariant } from '../../atoms/Button/shared.js';
import { BackdropContext } from '../../miscellaneous/overlay/Backdrop/shared.js';
import { useMediaQuery } from '../../../hooks/use-media-query.js';
import { SheetDirection, SheetHeaderType } from './shared.js';

function SheetHeader(props){const isMobile=useMediaQuery();const{title: title$1,direction}=props;const{close}=useContext(BackdropContext);const type=useMemo(()=>{if(isMobile&&direction===SheetDirection.BOTTOM){return SheetHeaderType.HANDLE_BAR}return SheetHeaderType.TITLE},[]);return type===SheetHeaderType.TITLE?jsxs(HStack,{fullWidth:true,className:title,spacing:spacingVars.mini,children:[jsx(Box,{fullWidth:true,children:jsx(Typography.Base,{children:title$1})}),jsx(Button.Icon,{icon:GlyphIcon.CLOSE,variant:ButtonVariant.SECONDARY,size:ButtonSize.SMALL,onClick:close})]}):jsx(Stack,{fullWidth:true,className:handleBar,children:jsx(Box,{className:bar})})}

export { SheetHeader };