Skip to content

Commit

Permalink
Merge pull request #47 from MGarcia93/faq
Browse files Browse the repository at this point in the history 
change: ad framer-motion and add animation
  • Loading branch information
@Damian-Zsiros-Prog
Damian-Zsiros-Prog authored Jul 13, 2023
2 parents 0b744a3 + 63f9d43 commit 6fe7927
Show file tree
Hide file tree
Showing 2 changed files with 62 additions and 34 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@
"astro": "^2.7.0",
"atropos": "^1.0.2",
"file-saver": "^2.0.5",
"framer-motion": "^10.12.18",
"html2canvas": "^1.4.1",
"react": "^18.2.0",
"react-dom": "^18.2.0",
Expand Down
95 changes: 61 additions & 34 deletions src/components/Faq.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useState } from 'react'
import { motion, AnimatePresence } from 'framer-motion'
import type { Faq } from '../types/types'

const faq: Faq[] = [
Expand All @@ -12,12 +13,12 @@ const faq: Faq[] = [
},
{
question: '¿Puedo presentar mi charla?',
answer: 'Las inscripciones ya están cerradas, pero puedes votar por las charlas que más te gusten.',
answer: 'Las inscripciones ya están cerradas, puedes ver las seleccionada en el apartado de horarios.',
},
{
/* {
question: '¿Cuántas charlas y/o talleres puedo votar?',
answer: 'Tantas como quieras.',
},
},*/
{
question: '¿Se podrán ver las charlas más tarde?',
answer: 'Sí, todas las charlas se podrán ver más tarde en <a href="https://youtube.com/@afordigital" target="_blank">youtube/@afordigital</a>.',
Expand All @@ -27,50 +28,76 @@ const faq: Faq[] = [
const Faq = () => {
const [openFaq, setOpenFaq] = useState(null)

const handleFaq = index => {
setOpenFaq(prev => {
const handleFaq = (index) => {
setOpenFaq((prev) => {
return prev === index ? null : index
})
}

return (
<div id='faq' className='py-16 bg-light-blue'>
<div className='flex justify-center items-start'>
<div className='w-full sm:w-10/12 xl:w-1/2'>
<h2 className='font-extrabold px-10 text-4xl text-transparent bg-clip-text gradient text-center mb-16 mt-18'>
<div id="faq" className="py-16 bg-light-blue">
<div className="flex justify-center items-start">
<div className="w-full sm:w-10/12 xl:w-1/2">
<h2 className="font-extrabold px-10 text-4xl text-transparent bg-clip-text gradient text-center mb-16 mt-18">
Preguntas Frecuentes
</h2>
<ul className='flex flex-col px-10'>
<ul className="flex flex-col px-10">
{faq.map((item, index) => {
return (
<li
key={index}
className={`my-2 shadow-lg border-2 border-transparent gradient rounded ${openFaq}`}
className={`my-2 shadow-lg border-2 border-transparent gradient rounded `}
>
<div className='bg-[#141414]'>
<h2 className='flex flex-row text-white justify-between items-center font-semibold p-3 cursor-pointer'
onClick={() => handleFaq(index)}
>
<span>{item.question}</span>
<svg
className={`fill-white border-transparent gradient h-6 w-6 transform transition-transform duration-500 rounded-full ${
openFaq === index
? 'rotate-180'
: ''
}`}
viewBox='0 0 20 20'
>
<path d='M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10'></path>
</svg>
</h2>
</div>
<div
className={`bg-[#141414] border-l-2 border-purple-600 overflow-hidden duration-500 transition-all ${
openFaq === index ? '' : 'hidden'
}`}
<motion.header
initial={false}
className="bg-[#141414]"
onClick={() => handleFaq(index)}
>
<p className='p-3 text-white [&>a]:bg-clip-text [&>a]:gradient' dangerouslySetInnerHTML={{__html: item.answer}} />
</div>
<div>
<h2 className="flex flex-row text-white justify-between items-center font-semibold p-3 cursor-pointer">
<span>{item.question}</span>
<svg
className={`fill-white border-transparent gradient h-6 w-6 transform transition-transform duration-500 rounded-full ${
openFaq === index
? 'rotate-180'
: ''
}`}
viewBox="0 0 20 20"
>
<path d="M13.962,8.885l-3.736,3.739c-0.086,0.086-0.201,0.13-0.314,0.13S9.686,12.71,9.6,12.624l-3.562-3.56C5.863,8.892,5.863,8.611,6.036,8.438c0.175-0.173,0.454-0.173,0.626,0l3.25,3.247l3.426-3.424c0.173-0.172,0.451-0.172,0.624,0C14.137,8.434,14.137,8.712,13.962,8.885 M18.406,10c0,4.644-3.763,8.406-8.406,8.406S1.594,14.644,1.594,10S5.356,1.594,10,1.594S18.406,5.356,18.406,10 M17.521,10c0-4.148-3.373-7.521-7.521-7.521c-4.148,0-7.521,3.374-7.521,7.521c0,4.147,3.374,7.521,7.521,7.521C14.148,17.521,17.521,14.147,17.521,10"></path>
</svg>
</h2>
</div>
</motion.header>
<AnimatePresence initial={false}>
{openFaq === index && (
<motion.section
className="bg-[#141414] overflow-hidden "
key="content"
initial="collapsed"
animate="open"
exit="collapsed"
variants={{
open: {
height: 'auto',
},
collapsed: {
height: 0,
},
}}
transition={{
duration: 0.5,
}}
>
<p
className="p-3 text-white [&>a]:text-gradient"
dangerouslySetInnerHTML={{
__html: item.answer,
}}
/>
</motion.section>
)}
</AnimatePresence>
</li>
)
})}
Expand Down

0 comments on commit 6fe7927

Please sign in to comment.