Questionpopular

apps/www/src/sections/Question.astro · 19 lines · group Text & prose

In the fleet

Used on 2 sites built with this engine.

Samples 1

sampleshown inside <Faq>

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
qstringyes
openbooleanfalse

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

---
/** Question — one item of <Faq>: the question, the answer in the slot. */
import ChevronDown from 'astro-heroicons/outline/ChevronDown.astro';

interface Props {
  q: string;
  open?: boolean;
}
const { q, open = false } = Astro.props;
---

<details class="group border-b border-gray-200 last:border-b-0" open={open}>
  <summary class="flex w-full cursor-pointer list-none items-center justify-between py-6 text-left marker:hidden focus:outline-none focus-visible:ring-2 focus-visible:ring-inset focus-visible:ring-primary-500 [&::-webkit-details-marker]:hidden">
    <h3 class="pr-4 text-lg font-medium text-gray-900">{q}</h3>
    <ChevronDown class="h-5 w-5 flex-shrink-0 text-gray-500 transition-transform duration-200 group-open:-rotate-180" aria-hidden="true" />
  </summary>
  <div class="prose prose-sm max-w-none pb-6 text-gray-600"><slot /></div>
</details>

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.