Takazudo Modular Styleguide

Shared/ListEndNav

Bottom Aligned
Default
English

Component Source

list-end-nav.tsx

import { ArrowRight } from '@/components/svg';

interface ListEndNavProps {
  /** Link destination, e.g. "/notes/". */
  href: string;
  /** Link label. Defaults to "一覧". */
  label?: string;
  /** Extra classes on the container, e.g. "hidden xl:block xl:mt-auto". */
  className?: string;
}

/**
 * Column-end "一覧" link used on the top page's news / featured columns: a 1px
 * dashed top rule (the same border as the article Outro) spanning the column
 * width, with a right-aligned chevron link below it. To pin sibling columns'
 * links to the same bottom line, make each column `xl:flex xl:flex-col` and
 * pass `xl:mt-auto` via `className`.
 *
 * A plain `<div>` wrapper (not `<nav>`) — this is a single "see all" link, and
 * two of these render on one page, so a `<nav>` landmark would be ambiguous
 * without a label. Mirrors `SectionHeading`'s equivalent link.
 */
export const ListEndNav = ({ href, label = '一覧', className }: ListEndNavProps) => {
  return (
    <div class={`pt-vgap-md ${className ?? ''}`}>
      <div class="border-t-1 border-dashed border-zd-white pt-vgap-sm flex justify-end">
        <a
          href={href}
          class="flex items-center text-sm font-futura xl:text-base zd-invert-color-link"
        >
          <span class="whitespace-nowrap pr-[4px] md:pr-[7px]">{label}</span>
          <ArrowRight aria-hidden="true" className="w-[18px] lg:w-[24px]" />
        </a>
      </div>
    </div>
  );
};

Story Source

list-end-nav.stories.tsx

import { ListEndNav } from './list-end-nav';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * ListEndNav Component
 *
 * Column-end "一覧" nav: a 1px dashed top rule (same as the article Outro
 * border) with a right-aligned chevron link below it.
 *
 * Used at the bottom of the top page's news / featured columns, where the
 * section headings (and their 一覧 links) are hidden at xl.
 */
export const meta = {
  title: 'Shared/ListEndNav',
};

export const controls: ControlsMap = {
  label: { type: 'text', default: '一覧' },
  href: { type: 'text', default: '/notes/' },
};

/**
 * Default - Japanese 一覧 link (news column)
 */
export const Default = {
  args: { label: '一覧', href: '/notes/' },
  render: ({ label, href }: { label: string; href: string }) => (
    <ListEndNav href={href} label={label} />
  ),
};

/**
 * English label variant (EN top page)
 */
export const English = () => <ListEndNav href="/en/products/" label="List" />;

/**
 * Bottom-aligned in equal-height columns — the top-page usage: each column is
 * flex-col and the nav carries mt-auto, so both navs sit on the same line.
 */
export const BottomAligned = () => (
  <div className="grid grid-cols-[1fr_1fr] gap-x-hgap-lg">
    <div className="flex flex-col">
      <p>Short column content</p>
      <ListEndNav href="/notes/" className="mt-auto" />
    </div>
    <div className="flex flex-col">
      <p>
        Taller column content
        <br />
        that determines
        <br />
        the shared height
      </p>
      <ListEndNav href="/products/" className="mt-auto" />
    </div>
  </div>
);