Gitt One Pages
Open menu

DownloadItem

apps/www/src/sections/DownloadItem.astro · 23 lines · group Gallery & files

DownloadItem — one file row of <Downloads>: a paper-clip icon, the name and a download link. Parent: <Downloads> only. No children.

In the fleet

Not used by any site yet.

Samples 1

sampleshown inside <Downloads>

Documents

Everything a buyer or an inspector asks for.

MDX of this sample
<Downloads title="Documents" description="Everything a buyer or an inspector asks for.">
  <DownloadItem title="Station N3 datasheet" href="/downloads/datasheet.pdf" />
  <DownloadItem title="Mounting guide" href="/downloads/mounting.pdf" />
  <DownloadItem title="Certificate of conformity" href="/downloads/certificate.pdf" />
  <DownloadItem title="API reference" href="/downloads/api.pdf" linkText="Open" />
</Downloads>

Props

NameTypeRequiredDefaultDescription
titlestringyesthe name shown in the row
hrefstringyesthe file to download, e.g. "/assets/spec.pdf"
linkTextstring'Download'text of the link (default "Download")

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

---
/**
 * DownloadItem — one file row of <Downloads>: a paper-clip icon, the name and
 *   a download link. Parent: <Downloads> only. No children.
 */
import PaperClip from 'astro-heroicons/outline/PaperClip.astro';

interface Props {
  /** the name shown in the row */
  title: string;
  /** the file to download, e.g. "/assets/spec.pdf" */
  href: string;
  /** text of the link (default "Download") */
  linkText?: string;
}
const { title, href, linkText = 'Download' } = Astro.props;
---

<li class="flex items-center justify-between rounded-md border border-gray-200 py-3 pl-3 pr-4 text-sm text-gray-900">
  <span class="flex w-0 flex-1 items-center"><PaperClip class="h-5 w-5 flex-shrink-0 text-gray-400" aria-hidden="true" /><span class="ml-2 w-0 flex-1 truncate">{title}</span></span>
  <a href={href} download class="ml-4 flex-shrink-0 font-medium text-primary-600 hover:text-primary-500">{linkText}</a>
</li>

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.