Split with image and search

A site search beside a photo.

Last updated

Open page
Show code
---
/**
 * Split with image and search: A site search beside a photo.
 *
 * @page not-found
 */
import { Search } from '@lucide/astro'
import NotFound from '@/components/apogee/sections/NotFound/NotFound.astro'
import Input from '@/components/apogee/Input/Input.astro'
import Button from '@/components/apogee/Button/Button.astro'
import Image from '@/components/apogee/Image/Image.astro'
---

<NotFound fullHeight layout="split" code="404 error" heading="Uh oh, we can't find that page..." description="Sorry, the page you are looking for doesn't exist. Try searching our site:">
  <form role="search" action="/search" method="get" class="flex w-full max-w-md flex-col gap-3 sm:flex-row">
    <Input type="search" name="q" aria-label="Search the site" placeholder="Search our site" class="flex-1">
      <Search slot="start" aria-hidden="true" />
    </Input>
    <Button type="submit" variant="outline" color="neutral">Search</Button>
  </form>
  <Image slot="media" src="https://picsum.photos/seed/apogee-404-3/1200/1000" alt="" width={1200} height={1000} fit="cover" radius="xl" class="aspect-[6/5] w-full" />
</NotFound>

Add

npx @ava-ui/apogee add not-found/split-image-search

This copies the page to src/components/apogee/pages/not-found/ with everything it uses: Button, Image, Input, NotFound. Render it from src/pages/404.astro, or use Copy code above.

Accessibility

  • The page heading is the h1.
  • The search is a role="search" form that sends q to /search with GET; point action at your own search page.

Related

Not foundThe 404 page body; a status line, heading, description and a way back, centred, left-aligned or beside media.
ImageA responsive, lazy-loaded image — wraps astro:assets Image with sensible defaults.
InputA labeled text field with hint/error messaging, wired for accessibility — plus a pure-CSS floating label.