Press n or j to go to the next uncovered block, b, p or k for the previous block.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | 45x 918x 435x | 'use client' import Link from 'next/link' import React from 'react' import { routes } from '../../../../services/routes/routes' import { useAppSelector } from '../../../../store/hooks' import { SidebarButtonState, SidebarPages } from '../../../../types/sidebar' import { IconButton } from '../../../IconButton/IconButton' export type SidebarButtonProps = { /** Id for identification in sidebar. */ type: SidebarPages /** Title text shown in button. */ title: string /** Description text shown in button. */ description?: string /** State of button. */ state: SidebarButtonState /** Datacy attribute for testing. */ datacy?: string /** Click event for link click */ onClick?: React.MouseEventHandler<HTMLAnchorElement> } /** * Sidebar button component to be used in Sidebar. */ export const SidebarButton: React.FC<SidebarButtonProps> = ({ type, title, description, state, datacy, onClick = () => {}, }: SidebarButtonProps) => { const _id = useAppSelector((state) => state.lastWill.data._id) return ( <Link datacy={datacy} onClick={onClick} href={routes.lastWill[type](_id)} className={`flex h-[5rem] select-none items-center justify-between p-4 pl-6 pr-2 ${ state === SidebarButtonState.ACTIVE ? 'bg-black text-white' : state === SidebarButtonState.DEFAULT ? 'text-black' : 'text-black text-opacity-50' }`} > <div className={`flex w-5/6 flex-col`}> <div datacy={`${datacy}-title`} className="text-base font-bold"> {title} </div> <div datacy={`${datacy}-description`} className="text-xs font-medium"> {description} </div> </div> {state === SidebarButtonState.DEFAULT && ( <IconButton datacy={`${datacy}-icon`} icon="edit_square" iconClassName="text-[18px]" color="black" /> )} </Link> ) } |