Add extenral link icon to dropdown

Author: MrBartusek

apps/client/src/components/Dropdown/DropdownItem.tsx

@@ -1,6 +1,7 @@
 import classNames from 'classnames';
 import React from 'react';
 import { IconType } from 'react-icons';
+import { BsBoxArrowUpRight } from 'react-icons/bs';
 
 type ButtonProps = React.DetailedHTMLProps<
 	React.ButtonHTMLAttributes<HTMLButtonElement>,
@@ -9,22 +10,33 @@ type ButtonProps = React.DetailedHTMLProps<
 
 export interface DropdownItemProps extends ButtonProps {
 	icon?: IconType;
+	externalLink?: boolean;
 	children: string;
 }
 
-function DropdownItem({ children, icon, className, ...props }: DropdownItemProps) {
+function DropdownItem({
+	children,
+	icon,
+	className,
+	externalLink = false,
+	...props
+}: DropdownItemProps) {
 	const iconElement = icon ? React.createElement(icon) : null;
 
 	return (
 		<button
 			className={classNames(
 				'flex w-full items-center gap-3 px-4 py-2.5 text-gray-700 hover:bg-gray-150',
+				'justify-center',
 				className,
 			)}
 			{...props}
 		>
 			{iconElement}
-			<span>{children}</span>
+			<div className="flex flex-1 items-center justify-between">
+				<span>{children}</span>
+				{externalLink && <BsBoxArrowUpRight />}
+			</div>
 		</button>
 	);
 }

apps/client/src/components/UserInfo.tsx

@@ -32,7 +32,12 @@ function UserInfo() {
 					to="https://github.com/MrBartusek/stocked-up/issues"
 					target="_blank"
 				>
-					<DropdownItem icon={BsExclamationOctagon}>Report issue</DropdownItem>
+					<DropdownItem
+						icon={BsExclamationOctagon}
+						externalLink
+					>
+						Report issue
+					</DropdownItem>
 				</Link>
 				<DropdownItem
 					icon={BsBoxArrowLeft}