1import { mergeClasses } from '@expo/styleguide';
2import { ArrowUpRightIcon } from '@expo/styleguide-icons';
3import type { ComponentType, HTMLAttributes } from 'react';
4
5import { A } from '../Text';
6
7type SidebarSingleEntryProps = {
8  href: string;
9  title: string;
10  Icon: ComponentType<HTMLAttributes<SVGSVGElement>>;
11  isActive?: boolean;
12  isExternal?: boolean;
13  secondary?: boolean;
14};
15
16export const SidebarSingleEntry = ({
17  href,
18  title,
19  Icon,
20  isActive = false,
21  isExternal = false,
22  secondary = false,
23}: SidebarSingleEntryProps) => {
24  return (
25    <A
26      href={href}
27      className={mergeClasses(
28        'flex items-center gap-3 text-secondary rounded-md text-sm min-h-[32px] px-2 py-1 !leading-[100%] !opacity-100',
29        'hocus:bg-element',
30        'focus-visible:relative focus-visible:z-10',
31        secondary && 'text-xs',
32        isActive && 'bg-palette-blue3 text-link font-medium hocus:text-link hocus:bg-palette-blue4'
33      )}
34      isStyled>
35      <Icon
36        className={mergeClasses(
37          secondary ? 'icon-xs' : 'icon-sm',
38          isActive ? 'text-palette-blue11' : 'text-icon-tertiary'
39        )}
40      />
41      {title}
42      {isExternal && <ArrowUpRightIcon className="icon-sm text-icon-secondary ml-auto" />}
43    </A>
44  );
45};
46