131c1a24cSBartosz Kaszubowskiimport { mergeClasses } from '@expo/styleguide';
2f4b1168bSBartosz Kaszubowskiimport { ArrowUpRightIcon } from '@expo/styleguide-icons';
3f4b1168bSBartosz Kaszubowskiimport type { ComponentType, HTMLAttributes } from 'react';
4b4bb5e4dSBartosz Kaszubowski
5b4bb5e4dSBartosz Kaszubowskiimport { A } from '../Text';
6b4bb5e4dSBartosz Kaszubowski
7b4bb5e4dSBartosz Kaszubowskitype SidebarSingleEntryProps = {
8b4bb5e4dSBartosz Kaszubowski  href: string;
9b4bb5e4dSBartosz Kaszubowski  title: string;
10f4b1168bSBartosz Kaszubowski  Icon: ComponentType<HTMLAttributes<SVGSVGElement>>;
11b4bb5e4dSBartosz Kaszubowski  isActive?: boolean;
12b4bb5e4dSBartosz Kaszubowski  isExternal?: boolean;
1300f79093SBartosz Kaszubowski  secondary?: boolean;
14b4bb5e4dSBartosz Kaszubowski};
15b4bb5e4dSBartosz Kaszubowski
16b4bb5e4dSBartosz Kaszubowskiexport const SidebarSingleEntry = ({
17b4bb5e4dSBartosz Kaszubowski  href,
18b4bb5e4dSBartosz Kaszubowski  title,
19b4bb5e4dSBartosz Kaszubowski  Icon,
20b4bb5e4dSBartosz Kaszubowski  isActive = false,
21b4bb5e4dSBartosz Kaszubowski  isExternal = false,
2200f79093SBartosz Kaszubowski  secondary = false,
23b4bb5e4dSBartosz Kaszubowski}: SidebarSingleEntryProps) => {
24b4bb5e4dSBartosz Kaszubowski  return (
2500f79093SBartosz Kaszubowski    <A
2600f79093SBartosz Kaszubowski      href={href}
2731c1a24cSBartosz Kaszubowski      className={mergeClasses(
28*da461daeSBartosz Kaszubowski        'flex items-center gap-3 text-secondary rounded-md text-sm min-h-[32px] px-2 py-1 !leading-[100%] !opacity-100',
2931c1a24cSBartosz Kaszubowski        'hocus:bg-element',
308c97fc97SBartosz Kaszubowski        'focus-visible:relative focus-visible:z-10',
3131c1a24cSBartosz Kaszubowski        secondary && 'text-xs',
3231c1a24cSBartosz Kaszubowski        isActive && 'bg-palette-blue3 text-link font-medium hocus:text-link hocus:bg-palette-blue4'
3331c1a24cSBartosz Kaszubowski      )}
3400f79093SBartosz Kaszubowski      isStyled>
35b4bb5e4dSBartosz Kaszubowski      <Icon
36f4b1168bSBartosz Kaszubowski        className={mergeClasses(
3731c1a24cSBartosz Kaszubowski          secondary ? 'icon-xs' : 'icon-sm',
3831c1a24cSBartosz Kaszubowski          isActive ? 'text-palette-blue11' : 'text-icon-tertiary'
39f4b1168bSBartosz Kaszubowski        )}
40b4bb5e4dSBartosz Kaszubowski      />
4100f79093SBartosz Kaszubowski      {title}
42f4b1168bSBartosz Kaszubowski      {isExternal && <ArrowUpRightIcon className="icon-sm text-icon-secondary ml-auto" />}
43b4bb5e4dSBartosz Kaszubowski    </A>
44b4bb5e4dSBartosz Kaszubowski  );
45b4bb5e4dSBartosz Kaszubowski};
46