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

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>
	)
}