Khối

Press footer

Block: the one inverse block, with contact, Download CV, a LinkedIn QR code slot, the language switch and Back to top.

Nội dung tham khảo viết bằng tiếng Anh; mục “Vietnamese” có ví dụ tiếng Việt.

Install

bash

npx shadcn add @eloquent/press-footer

Usage

tsx

import { PressFooter } from "@/components/blocks/press-footer";

<PressFooter
  name="Pham Do Nhat Minh"
  contactLabel="Contact"
  contacts={[{ label: "Email", value: "name@example.com", href: "mailto:name@example.com" }]}
  cv={{ label: "Download CV", href: "/cv.pdf", download: true }}
  qr={{ src: "/linkedin-qr.svg", alt: "QR code linking to the LinkedIn profile", caption: "LinkedIn" }}
  languageSwitch={{ locale: "en", label: "Language", hrefFor: (locale) => `/${locale}` }}
  backToTop={{ label: "Back to top", href: "#top" }}
/>

The QR code is an image slot: generate the picture yourself and pass it as qr.src. The page needs an element with id="top" for Back to top.

States

State	Treatment
Minimal	No tagline, note or links in the contact list
QR as a link	`qr.href` wraps the picture in a link
Focus	2px outline in the on-press (white) colour, so it shows on black; Download CV keeps its paper fill (no fill change on focus)
Press	Download CV inverts to a black fill with a paper border

Keyboard

Key	Action
Tab	Language link, contact links, Download CV, QR link, Back to top
Enter	Follows the focused link; Download CV downloads the file

Vietnamese

Ink adaptation

Block with no upstream. The only inverse block on a surface: press ground, on-press text, hairlines in on-press-muted, no hover effects. The QR code sits on a paper plate.