Faqpopular

apps/www/src/sections/Faq.astro · 27 lines · group Text & prose

Faq — questions and answers, no JS (<details>). Children: <Question q="…">markdown answer</Question>; or `items` array of { question, answer } for plain-text content.

In the fleet

Used on 2 sites built with this engine.

Samples 1

sample

Questions growers ask first

If yours is not here, write to us — we answer in a day.

Does it work without mobile coverage?

Yes. The station talks to a gateway on a licence-free band, and the gateway keeps a week of readings when the uplink drops. Nothing is lost while the network is away.

How long does the battery last?

A full season. The station reports its own battery level, and we send a replacement before it becomes your problem.

Can I take the data with me?

Always. Export as CSV or PDF, or read it through the API. The readings belong to the farm, not to us.

What happens if a sensor breaks?

You hear about it from us first. The spare fits in a pocket and swaps by hand — no tools, no service visit.

MDX of this sample

<Faq title="Questions growers ask first" description="If yours is not here, write to us — we answer in a day.">
  <Question q="Does it work without mobile coverage?" open>
    Yes. The station talks to a gateway on a licence-free band, and the gateway keeps a week of readings when the uplink drops. Nothing is lost while the network is away.
  </Question>
  <Question q="How long does the battery last?">
    A full season. The station reports its own battery level, and we send a replacement before it becomes your problem.
  </Question>
  <Question q="Can I take the data with me?">
    Always. Export as CSV or PDF, or read it through the API. The readings belong to the farm, not to us.
  </Question>
  <Question q="What happens if a sensor breaks?">
    You hear about it from us first. The spare fits in a pocket and swaps by hand — no tools, no service visit.
  </Question>
</Faq>

Props

Name	Type	Default
id	string
title	string
description	string
theme	Theme	'light'
items	{ question: string; answer: string; open?: boolean }[]	[]

Source apps/www/src/sections/Faq.astro @ gitt.one

---
/**
 * Faq — questions and answers, no JS (<details>).
 * Children: <Question q="…">markdown answer</Question>; or `items` array of
 * { question, answer } for plain-text content.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Question from './Question.astro';

interface Props {
  id?: string;
  title?: string;
  description?: string;
  theme?: Theme;
  items?: { question: string; answer: string; open?: boolean }[];
}
const { id, title, description, theme = 'light', items = [] } = Astro.props;
---

<Section id={id} title={title} description={description} theme={theme}>
  <div class="mx-auto max-w-4xl rounded-lg bg-gray-50 px-6 py-2 text-gray-900 shadow-sm">
    {items.map((f) => <Question q={f.question} open={f.open}>{f.answer}</Question>)}
    <slot />
  </div>
</Section>

Source links point to engine-astro@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.