Tags

<div class="tags">
    <ul class="tags__list plain-list no-margin no-padding flex flex--wrap">
        <li class="tags__tag font-HNL5-s font-WB7-m margin-right-s2 margin-bottom-s2" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;tag:click&quot;,&quot;label&quot;:&quot;text:Event, url:#&quot;}"><a class="plain-link flex font-white bg-black rounded-diagonal
    bg-hover-green transition-bg
    padding-top-s1 padding-bottom-s1
    padding-left-s2 padding-right-s2" href="#">Event</a>
        </li>
        <li class="tags__tag font-HNL5-s font-WB7-m margin-right-s2 margin-bottom-s2" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;tag:click&quot;,&quot;label&quot;:&quot;text:Walking tour&quot;}">
            <div class="plain-link flex font-white bg-black rounded-diagonal
    
    padding-top-s1 padding-bottom-s1
    padding-left-s2 padding-right-s2">Walking tour</div>
        </li>
        <li class="tags__tag font-HNL5-s font-WB7-m margin-right-s2 margin-bottom-s2" data-track-event="{&quot;category&quot;:&quot;component&quot;,&quot;action&quot;:&quot;tag:click&quot;,&quot;label&quot;:&quot;text:A Museum of Modern Nature, url:/components/preview/exhibition-template.html&quot;}"><a class="plain-link flex font-white bg-black rounded-diagonal
    bg-hover-green transition-bg
    padding-top-s1 padding-bottom-s1
    padding-left-s2 padding-right-s2" href="/components/preview/exhibition-template.html">A Museum of Modern Nature</a>
        </li>
    </ul>
</div>
// @flow
import NextLink from 'next/link';
import { spacing, font } from '../../../utils/classnames';
import ReactGA from 'react-ga';

export type TagProps = {|
  text: string,
  url?: string
|}

export type Props = {|
  tags: TagProps[]
|}

const Tags = ({ tags }: Props) => {
  return (
    <div className='tags'>
      <ul className='tags__list plain-list no-margin no-padding flex flex--wrap'>
        {tags.map(({ text, url }) => (
          <Tag key={text} text={text} url={url} />
        ))}
      </ul>
    </div>
  );
};

const Tag = ({text, url}: TagProps) => {
  function trackTagClick() {
    ReactGA.event({
      category: 'component',
      action: 'Tag:click',
      label: `text:${text}${url ? `, url:${url}` : ''}`
    });
  }

  const className =
    `plain-link flex font-white bg-black rounded-diagonal
    ${url ? 'bg-hover-green transition-bg' : ''}
    ${spacing({s: 1}, {padding: ['top', 'bottom']})}
    ${spacing({s: 2}, {padding: ['left', 'right']})}`;

  return (
    <li onClick={trackTagClick} className={`tags__tag ${font({s: 'HNL5', m: 'WB7'})} ${spacing({s: 2}, {margin: ['right', 'bottom']})}`}
      data-track-event={JSON.stringify({
        category: 'component',
        action: 'tag:click',
        label: `text:${text}${url ? `, url:${url}` : ''}`
      })}>
      {url &&
        <NextLink href={url}>
          <a className={className}>{text}</a>
        </NextLink>
      }
      {!url && <div className={className}>{text}</div>}
    </li>
  );
};

export default Tags;
{
  "tags": [
    {
      "text": "Event",
      "url": "#"
    },
    {
      "text": "Walking tour"
    },
    {
      "text": "A Museum of Modern Nature",
      "url": "/components/preview/exhibition-template.html"
    }
  ]
}

There are no notes for this item.