redirect url + accordion + blog + ...

src/components/Accordion.tsx

@@ -0,0 +1,47 @@
+'use client'
+import { AddCircle } from 'iconsax-react'
+import React, { FC, useState, useRef, useEffect } from 'react'
+
+type Props = {
+    title: string
+    content: string
+}
+
+const Accordion: FC<Props> = ({ title, content }) => {
+    const [isOpen, setIsOpen] = useState(false)
+    const contentRef = useRef<HTMLDivElement>(null)
+    const [contentHeight, setContentHeight] = useState(0)
+
+    useEffect(() => {
+        if (contentRef.current) {
+            setContentHeight(isOpen ? contentRef.current.scrollHeight : 0)
+        }
+    }, [isOpen])
+
+    return (
+        <div className='bg-white rounded-xl p-3 flex-1 h-fit'>
+            <div className='flex justify-between items-center cursor-pointer accordion-trigger' onClick={() => setIsOpen(!isOpen)}>
+                <div className='font-bold'>
+                    {title}
+                </div>
+
+                <AddCircle
+                    size={24}
+                    color='black'
+                    className={`transition-transform duration-300 accordion-icon ${isOpen ? 'rotate-45' : 'rotate-0'}`}
+                />
+            </div>
+            <div
+                ref={contentRef}
+                className='overflow-hidden transition-all duration-300 accordion-content'
+                style={{ maxHeight: `${contentHeight}px` }}
+            >
+                <p className='text-sm leading-6 py-2 text-[#7D818C]'>
+                    {content}
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default Accordion

src/components/Input.tsx

@@ -33,7 +33,7 @@ const Input: FC<Props> = (props: Props) => {
     const [search, setSearch] = useState<string>('')
 
     const inputClass = clx(
-        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-border',
+        'w-full h-10 text-black block px-4 text-xs rounded-xl border border-[#D0D0D0]',
         props.readOnly && 'bg-gray-100 border-0 text-description',
         props.variant === 'search' && 'bg-[#EEF0F7] border-0 ps-10',
         props.className
@@ -80,7 +80,7 @@ const Input: FC<Props> = (props: Props) => {
 
     return (
         <div className='w-full'>
-            <label className='text-sm'>
+            <label className='text-sm text-black'>
                 {props.label}
             </label>
 

src/components/Textarea.tsx

@@ -12,7 +12,7 @@ const Textarea: FC<Props> = (props: Props) => {
         <div className='w-full relative'>
             {
                 props.label &&
-                <div className='text-sm' >
+                <div className='text-sm text-black' >
                     {props.label}
                 </div>
             }
@@ -20,7 +20,7 @@ const Textarea: FC<Props> = (props: Props) => {
             <textarea
                 {...props}
                 className={clx(
-                    'border border-border leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
+                    'border border-[#D0D0D0] leading-7 w-full rounded-xl px-4 py-3 min-h-[100px] mt-1 text-xs',
                     props.className
                 )}
             >