Reach UIを利用してPR TIMESのフロントエンドを実装した話

import { Tabs, TabPanels, TabPanel, TabList, Tab } from '@reach/tabs';
import { SearchBox, TabTitle } from '@/components/pc';

export const CompanyTab = () => {
	return (
		<Tabs
		    index={currentTab}
				onChange={(index) => setCurrentTab(index)}
		>
			{/*
				SearchBoxとDropdownメニュー表示
				UIの並び順と同じように実装
			*/}
			<TabPanels css={topTabPanels}>
				<TabPanel css={topTabPanel}>
					<div css={topTabPanelWrapper}>
						<SearchBox />
		        <Dropdown />
					</div>
			</TabPanel>

			{/*
				Tabのタイトル
			*/}
			<div css={tabWrapper}>
				<TabList css={tabList}>
					<Tab>
						<TabTitle
							index={0}
		          title='プレスリリース'
		          count={totalPressReleasesCount}
						/>
					</Tab>
					<Tab>
						<TabTitle index={1} title='ストーリー' count={storiesCount} />
					</Tab>
					<Tab>
						<TabTitle index={2} title='プレスキット' />
					</Tab>
				</TabList>
				<RssShare />
			</div>

			{/*
				各Tabのコンテンツ
			*/}
			<TabPanels>
				<TabPanel css={tabContent}>
					...省略（１番目Tabのコンテンツ）
				</TabPanel>
				<TabPanel css={tabContent}>
					...省略（２番目Tabのコンテンツ）
				</TabPanel>
				<TabPanel css={tabContent}>
					...省略（３番目Tabのコンテンツ）
				</TabPanel>
			</TabPanels>
		</Tabs>
	); 
}

import {
  ListboxButton,
  ListboxInput,
  ListboxList,
  ListboxOption,
  ListboxPopover,
} from '@reach/listbox';
import { positionRight } from '@reach/popover';
import '@reach/listbox/styles.css';
import { AnimatePresence, motion } from 'framer-motion';

// Framer Motionにwrap
const MotionListboxPopover = motion(ListboxPopover, {
  forwardMotionProps: true,
});

export const DropdownMenu = () => {

	const onDropboxChange = (value: string) => {
    // データ取得など〜
  };

	return (
		<ListboxInput 
			value={value}
      onChange={onDropboxChange}
		>
			{({ isExpanded }) => (
        <div>
          <ListboxButton
            css={[
              listboxButton,
              variant === 'PC' ? listboxButtonPC : listboxButtonSP,
            ]}
            arrow={<ArrowIcon variant='gray' direction='down' />}
          >
            {title}
          </ListboxButton>
          <AnimatePresence>
            <MotionListboxPopover
              key='listboxPopover'
              data-testid='dropdown-popover'
              position={positionRight}
              css={[popOver, variant === 'PC' ? popOverPC : null]}
              initial='collapsed'
              animate={isExpanded ? 'open' : 'collapsed'}
              exit='collapsed'
              variants={popoverAnimation}
            >
              {isExpanded && (
                <ListboxList>
                  {options.map((option) => (
                    <ListboxOption
                      key={option.key}
                      css={[
                        listboxOption,
                        isSelected(option) ? selected : null,
                      ]}
                      value={option.value}
                      label={option.key}
                    >
                      <div css={optionWrapper}>
                        <DropdownCheckIcon
                          data-testid='dropdown-check-icon'
                          css={[
                            dropdownCheck,
                            isSelected(option)
                              ? css`
                                  visibility: visible;
                                `
                              : css`
                                  visibility: hidden;
                                `,
                          ]}
                        />
                        <span>{option.key}</span>
                      </div>
                    </ListboxOption>
                  ))}
                </ListboxList>
              )}
            </MotionListboxPopover>
          </AnimatePresence>
        </div>
      )}
		</ListboxInput>
	);
}

[data-reach-listbox-popover]:focus-within {
  box-shadow: 0 0 4px Highlight;
  outline: -webkit-focus-ring-color auto 4px;
}

// @reach/listbox/styles.css
[data-reach-listbox-option][data-current-nav] {
	background: hsl(211, 81%, 46%);
	color: hsl(0, 0%, 100%);
}

// Dropdownの中
const listboxOption = css`
	&[data-current-nav] {
    background: ${colors.white};
    color: ${colors.text.primary};
  }
`;