1
1
'use client'
2
2
3
- import React , { useEffect , useRef , useState } from 'react'
3
+ import React , { useEffect , useRef , useState } from 'react'
4
4
import AnimateHeight from '@/components/AnimateHeight'
5
- import ArrowRight from " @/images/icons8-arrow-white.png"
6
- import Image from " next/image" ;
5
+ import ArrowRight from ' @/images/icons8-arrow-white.png'
6
+ import Image from ' next/image'
7
7
8
8
const Accordion = ( { data } ) => {
9
9
return (
@@ -23,60 +23,76 @@ const AccordionCard = ({ data }) => {
23
23
const [ titleHeight , setTitleHeight ] = useState ( 50 )
24
24
const titleRef = useRef ( null )
25
25
26
- useEffect ( ( ) => {
27
- if ( ! titleRef . current ) return
26
+ useEffect ( ( ) => {
27
+ if ( ! titleRef . current ) return
28
28
29
- const getTitleHeight = ( ) => {
29
+ const getTitleHeight = ( ) => {
30
30
const height = titleRef . current . getBoundingClientRect ( ) . height
31
31
setTitleHeight ( height + 35 )
32
32
}
33
33
34
34
getTitleHeight ( )
35
35
36
- window . addEventListener ( " resize" , getTitleHeight )
36
+ window . addEventListener ( ' resize' , getTitleHeight )
37
37
38
38
return ( ) => {
39
- window . removeEventListener ( " resize" , getTitleHeight )
39
+ window . removeEventListener ( ' resize' , getTitleHeight )
40
40
}
41
- } , [ titleRef . current ] )
41
+ } , [ titleRef . current ] )
42
42
43
43
return (
44
44
< div
45
- className = { `relative flex flex-col gap-1 overflow-hidden rounded-md p-2 transition-all duration-500 cursor-pointer group border border-slate-200 dark:border-slate-800` }
45
+ className = { `group relative flex cursor-pointer flex-col gap-1 overflow-hidden rounded-md border border-slate-200 p-2 transition-all duration-500 dark:border-slate-800` }
46
46
style = { {
47
47
height : titleHeight + height ,
48
48
} }
49
49
onClick = { ( ) => {
50
50
setIsOpen ( ( prevState ) => ! prevState )
51
51
} }
52
52
>
53
- < div className = "absolute inset-0 rounded-md border-2 border-transparent opacity-0 transition-opacity duration-500 group-hover:opacity-100 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] dark:[--quick-links-hover-bg:theme(colors.slate.800)] pointer-events-none" style = { { clipPath : 'inset(0 round var(--rounded-md))' } } />
53
+ < div
54
+ className = "pointer-events-none absolute inset-0 rounded-md border-2 border-transparent opacity-0 transition-opacity duration-500 [background:linear-gradient(var(--quick-links-hover-bg,theme(colors.sky.50)),var(--quick-links-hover-bg,theme(colors.sky.50)))_padding-box,linear-gradient(to_top,theme(colors.indigo.400),theme(colors.cyan.400),theme(colors.sky.500))_border-box] group-hover:opacity-100 dark:[--quick-links-hover-bg:theme(colors.slate.800)]"
55
+ style = { { clipPath : 'inset(0 round var(--rounded-md))' } }
56
+ />
54
57
< div
55
58
className = "absolute inset-0 rounded-md transition-opacity duration-300"
56
59
style = { {
57
60
background : isOpen
58
- ? 'linear-gradient(136deg, rgba(56, 189, 248, 1) 0%, rgb(129, 140, 248,1)50%, rgba(56, 189, 248, 1) 100%)' :
59
- 'transparent'
61
+ ? 'linear-gradient(136deg, rgba(56, 189, 248, 1) 0%, rgb(129, 140, 248,1)50%, rgba(56, 189, 248, 1) 100%)'
62
+ : 'transparent' ,
60
63
} }
61
64
/>
62
65
63
66
< div className = "absolute inset-[1px] top-[1px] z-10 flex flex-col rounded-md bg-slate-900 p-4" >
64
67
< div className = { `flex flex-col` } >
65
68
< div className = { `flex justify-between gap-2` } >
66
- < span ref = { titleRef } className = { `font-semibold text-sm md:text-xl` } > { data . title } </ span >
67
- < button
68
- >
69
+ < span ref = { titleRef } className = { `text-sm font-semibold md:text-xl` } >
70
+ { data . title }
71
+ </ span >
72
+ < button >
69
73
< Image
70
74
src = { ArrowRight }
71
75
alt = { 'arrow-right' }
72
76
width = { 20 }
73
77
height = { 20 }
74
- className = { `transition-all duration-500 ${ isOpen ? 'rotate-90' : '' } ` }
78
+ className = { `transition-all duration-500 ${
79
+ isOpen ? 'rotate-90' : ''
80
+ } `}
81
+ unoptimized
75
82
/>
76
83
</ button >
77
84
</ div >
78
- < AnimateHeight onChange = { ( w ) => { setHeight ( w ) } } customAnimation = { 'duration-300' } >
79
- { isOpen && < span className = { `text-gray-400 pt-4 text-xs md:text-sm` } > { data . description } </ span > }
85
+ < AnimateHeight
86
+ onChange = { ( w ) => {
87
+ setHeight ( w )
88
+ } }
89
+ customAnimation = { 'duration-300' }
90
+ >
91
+ { isOpen && (
92
+ < span className = { `pt-4 text-xs text-gray-400 md:text-sm` } >
93
+ { data . description }
94
+ </ span >
95
+ ) }
80
96
</ AnimateHeight >
81
97
</ div >
82
98
</ div >
0 commit comments