#Better Impt. of Accordion

9 messages · Page 1 of 1 (latest)

errant fossil
#

about.astro:

---
import FAQ from "@components/FAQ.astro";
---

<FAQ faqs={[
    { 
        question: 'Question 1', 
        answer: '... <a class="link" href="https://www.example.com/">...</a> ...' 
    },
    { 
        question: 'Question 2', 
        answer: 'This is the answer to question 2.' 
    },
]} />

FAQ.astro:

---
interface Props {
    faqs: { question: string, answer: string }[];
}

const { faqs } = Astro.props;

import { Image } from "astro:assets";
import Arrow from '@icons/arrow.svg';
---

<div id="faq">
    {faqs.map((item) => (
        <div class="question">
            <button class="question-toggle">{item.question} <Image src={Arrow} class="question-arrow" alt="Dropdown arrow for answer" width={32} height={32}/></button>
            <div class="answer">
                <p class="answer-text" set:html={item.answer}></p>
        </div>
    </div>
  ))}
</div>

Is there any better way to make this component? I would love to pass a <p> for the answer, since some might have links, but I have to resort to set:html. Thoughts?

#

Better Impt. of Accordion

cloud sage
#

sorry, do you mean creating an Answer component and passing answer as props 🤔 ?

gentle valve
#

Hmm I would have a single question component where you pass in a question and answer... Not the biggest change, but at the moment that component is tied to it's state as in it has to know that you've stored your questions and answers as an array.

Not the biggest thing here tbh but might be easier to read later on.

Also what do you mean pass a <p> can't you just use a slot? Then you can have a dumb component with two slots for question and answer and just pass whatever you want into the slots from the parent

errant fossil
#

@cloud sage and @gentle valve, what I mean by passing a <p> is like this:

<FAQ faqs={[
    { 
        question: 'Question 1', 
        answer: <p><a class="link" href="https://www.example.com/">...</a> ...</p>
    },
    { 
        question: 'Question 2', 
        answer: <p>hi.</p> 
    },
]} />

Going to try to mess with <slot /> I just need somehow multiple instaces of a question.

gentle valve
#

Hmm I mean that's not a bad solution, using set:html if that's how wanna structure your data... My first thought would be using slots for this if you know each question will have the same shape

errant fossil
#

Idealy I would want to do something like this:

<FAQ>
  <FAQ-QUESTION>
    <p>Question</p>
    <p>Answer></p>
  </FAQ-QUESTION>
  <FAQ-QUESTION>
    <p>Question</p>
    <p>Answer></p>
  </FAQ-QUESTION>
</FAQ>
gentle valve
#

Yeah that's absolutely possible! Just put a <slot /> in your FAQ-question.astro and you can pass in whatever you want