Gitt One Pages
Open menu

Faqpopular

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

Faq — questions and answers as an accordion (native <details>, no JavaScript), on a rounded grey panel under the section heading. Use for: FAQ, "common questions", objections handled one by one. Children: <Question q="…">markdown answer</Question> tags; or the `items` prop with plain-text pairs when the answers need no markdown. Both may be combined — `items` render first.

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

NameTypeRequiredDefaultDescription
idstringanchor of the section, e.g. "faq"
titlestringthe section heading
descriptionstringa paragraph under the heading
theme'light' | 'muted' | 'dark' | 'brand' | 'brand-dark''light'background of the section
items{ question: string; answer: string; open?: boolean }[][]plain-text pairs instead of <Question> children; `open` expands one by default

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

---
/**
 * Faq — questions and answers as an accordion (native <details>, no
 *   JavaScript), on a rounded grey panel under the section heading.
 *
 * Use for: FAQ, "common questions", objections handled one by one.
 * Children: <Question q="…">markdown answer</Question> tags; or the `items`
 *   prop with plain-text pairs when the answers need no markdown. Both may be
 *   combined — `items` render first.
 */
import Section from './_Section.astro';
import type { Theme } from './_Section.astro';
import Question from './Question.astro';

interface Props {
  /** anchor of the section, e.g. "faq" */
  id?: string;
  /** the section heading */
  title?: string;
  /** a paragraph under the heading */
  description?: string;
  /** background of the section */
  theme?: Theme;
  /** plain-text pairs instead of <Question> children; `open` expands one by default */
  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@7b686388. Samples are demo content: the components are the real ones, the copy and the pictures are made up.