File size: 1,912 Bytes
a9df3bb |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 |
'use client'
import type { FC, ReactNode } from 'react'
import React from 'react'
import cn from 'classnames'
import { useTranslation } from 'react-i18next'
import s from './style.module.css'
import { StarIcon } from '@/app/components//welcome/massive-component'
import Button from '@/app/components/base/button'
export type ITemplateVarPanelProps = {
className?: string
header: ReactNode
children?: ReactNode | null
isFold: boolean
}
const TemplateVarPanel: FC<ITemplateVarPanelProps> = ({
className,
header,
children,
isFold,
}) => {
return (
<div className={cn(isFold ? 'border border-indigo-100' : s.boxShodow, className, 'rounded-xl ')}>
{/* header */}
<div
className={cn(isFold && 'rounded-b-xl', 'rounded-t-xl px-6 py-4 bg-indigo-25 text-xs')}
>
{header}
</div>
{/* body */}
{!isFold && children && (
<div className='rounded-b-xl p-6'>
{children}
</div>
)}
</div>
)
}
export const PanelTitle: FC<{ title: string; className?: string }> = ({
title,
className,
}) => {
return (
<div className={cn(className, 'flex items-center space-x-1 text-indigo-600')}>
<StarIcon />
<span className='text-xs'>{title}</span>
</div>
)
}
export const VarOpBtnGroup: FC<{ className?: string; onConfirm: () => void; onCancel: () => void }> = ({
className,
onConfirm,
onCancel,
}) => {
const { t } = useTranslation()
return (
<div className={cn(className, 'flex mt-3 space-x-2 mobile:ml-0 tablet:ml-[128px] text-sm')}>
<Button
className='text-sm'
type='primary'
onClick={onConfirm}
>
{t('common.operation.save')}
</Button>
<Button
className='text-sm'
onClick={onCancel}
>
{t('common.operation.cancel')}
</Button>
</div >
)
}
export default React.memo(TemplateVarPanel)
|