Gitt One Pages
Open menu

DownloadItem

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

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
titlestringyes
hrefstringyes
linkTextstring'Download'

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

---
/** DownloadItem — one file of <Downloads>: the name and a download link. */
import PaperClip from 'astro-heroicons/outline/PaperClip.astro';

interface Props {
  title: string;
  href: string;
  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@38c294d9. Samples are demo content: the components are the real ones, the copy and the pictures are made up.