MythEclipse/imphnen-frontend-service
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: modify accordion component

Browse Source
This commit is contained in:
euxzy
2025-06-29 21:40:08 +07:00
parent 9851c3b9e4
commit 81894bf0cb
1 changed files with 5 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
libs/ui/src/molecules/accordion/accordion.tsx
+5 -5
View File
@@ -20,13 +20,13 @@ export const Accordion: FC<AccordionProps> = ({ title, description, className, t
const [expand, setExpand] = useState(false) const [expand, setExpand] = useState(false)
const variants: Variants = { const variants: Variants = {
expand: { opacity: 1, y: 0, marginBottom: 16, height: 'auto' }, expand: { opacity: 1, y: 0, marginTop: 16, height: 'auto' },
collapse: { opacity: 0, y: -10, marginBottom: 0, height: 0 }, collapse: { opacity: 0, y: -10, marginTop: 0, height: 0 },
} }
return ( return (
<div className={cn("bg-white rounded-lg shadow cursor-pointer", className)} {...rest}> <div className={cn("bg-white rounded-lg shadow cursor-pointer pb-4", className)} {...rest}>
<div className="px-5 py-4 select-none flex justify-between items-center gap-x-2" onClick={() => setExpand(prev => !prev)}> <div className="px-5 pt-4 select-none flex justify-between items-center gap-x-2" onClick={() => setExpand(prev => !prev)}>
<h4 className={cn("text-primary-500 font-semibold text-lg leading-tight md:text-xl", titleClassName)}>{title}</h4> <h4 className={cn("text-primary-500 font-semibold text-lg leading-tight md:text-xl", titleClassName)}>{title}</h4>
<div className={cn("text-primary-500 transition-all duration-300", expand && "rotate-90")}> <div className={cn("text-primary-500 transition-all duration-300", expand && "rotate-90")}>
<Show condition={expand} fallback={<PlusOutlined />}> <Show condition={expand} fallback={<PlusOutlined />}>
@@ -37,7 +37,7 @@ export const Accordion: FC<AccordionProps> = ({ title, description, className, t
<AnimatePresence> <AnimatePresence>
{expand && ( {expand && (
<motion.p <motion.p
className={cn("px-5 text-neutral-500 text-sm font-medium cursor-text md:text-base", contentClassName)} className={cn("mt-4 px-5 text-neutral-500 text-sm font-medium cursor-text md:text-base", contentClassName)}
variants={variants} variants={variants}
initial="collapse" initial="collapse"
animate="expand" animate="expand"