Shared/ArrowNavLink

Default

labelhref

English

Guide Articles

Stacked

Component Source

arrow-nav-link.tsx

import type { FunctionComponent, ComponentChildren } from 'preact';
import { ArrowRight } from '@/components/svg';
import { Link } from '@/components/shared/link';

interface ArrowNavLinkProps {
  href: string;
  children: ComponentChildren;
  className?: string;
}

/**
 * Reusable "see all" navigation link with ArrowRight icon
 * Used for section-level navigation (e.g., "すべてのシリーズを見る")
 */
export const ArrowNavLink: FunctionComponent<ArrowNavLinkProps> = ({
  href,
  children,
  className,
}) => {
  return (
    <Link
      to={href}
      className={`inline-flex items-center zd-invert-color-link font-futura ${className || ''}`}
    >
      <ArrowRight aria-hidden="true" className="w-[18px] lg:w-[24px] mr-[5px]" />
      <span>{children}</span>
    </Link>
  );
};

Story Source

arrow-nav-link.stories.tsx

import { ArrowNavLink } from './arrow-nav-link';
import type { ControlsMap } from '../../sub-packages/styleguide-v2/src/data/control-types';

/**
 * ArrowNavLink Component
 *
 * A reusable navigation link with ArrowRight icon prefix.
 * Used for "see all" type navigation at the end of sections.
 *
 * Common use cases:
 * - "すべてのシリーズを見る" on guides page
 * - "すべてのガイドを見る" on guides page
 * - Any section-level "see all" navigation
 */
export const meta = {
  title: 'Shared/ArrowNavLink',
};

export const controls: ControlsMap = {
  label: { type: 'text', default: 'すべてのシリーズを見る' },
  href: { type: 'text', default: '/guides/series/' },
};

/**
 * Default - Japanese "see all series" link
 */
export const Default = {
  args: { label: 'すべてのシリーズを見る', href: '/guides/series/' },
  render: ({ label, href }: { label: string; href: string }) => (
    <ArrowNavLink href={href}>{label}</ArrowNavLink>
  ),
};

/**
 * Guide articles variant
 */
export const GuideArticles = () => (
  <ArrowNavLink href="/guides/archive/">すべてのガイドを見る</ArrowNavLink>
);

/**
 * English text example
 */
export const English = () => <ArrowNavLink href="/notes/">View all articles</ArrowNavLink>;

/**
 * Multiple links stacked vertically
 */
export const Stacked = () => (
  <div className="flex flex-col gap-vgap-sm">
    <ArrowNavLink href="/guides/series/">すべてのシリーズを見る</ArrowNavLink>
    <ArrowNavLink href="/guides/archive/">すべてのガイドを見る</ArrowNavLink>
    <ArrowNavLink href="/notes/">すべての記事を見る</ArrowNavLink>
  </div>
);