All files / components/Navbar/Sidebar/SidebarButton SidebarButton.tsx

100% Statements 4/4
100% Branches 7/7
66.66% Functions 2/3
100% Lines 3/3

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                                                    94x               876x   423x                                                      
'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>
	)
}