fix: help dialog

Author: izadoesdev

apps/dashboard/components/layout/help-dialog.tsx

@@ -1,8 +1,4 @@
-import {
-	BookOpenIcon,
-	ChatCircleIcon,
-	LaptopIcon,
-} from '@phosphor-icons/react';
+import { BookOpenIcon, ChatCircleIcon, PlayIcon } from '@phosphor-icons/react';
 import Link from 'next/link';
 import { Button } from '@/components/ui/button';
 import {
@@ -18,77 +14,75 @@ interface HelpDialogProps {
 	onOpenChange: (open: boolean) => void;
 }
 
+const helpItems = [
+	{
+		href: 'https://databuddy.com/docs',
+		icon: BookOpenIcon,
+		title: 'Documentation',
+		description: 'Read guides and API references',
+		external: true,
+	},
+	{
+		href: 'mailto:[email protected]',
+		icon: ChatCircleIcon,
+		title: 'Contact Support',
+		description: 'Get help from our support team',
+		external: false,
+	},
+	{
+		href: 'https://www.youtube.com/@trydatabuddy',
+		icon: PlayIcon,
+		title: 'Tutorials',
+		description: 'Learn Databuddy step by step',
+		external: true,
+	},
+] as const;
+
 export function HelpDialog({ open, onOpenChange }: HelpDialogProps) {
 	return (
 		<Dialog onOpenChange={onOpenChange} open={open}>
-			<DialogContent className="sm:max-w-[425px]">
-				<DialogHeader>
+			<DialogContent className="sm:max-w-md">
+				<DialogHeader className="text-center">
 					<DialogTitle>Help & Resources</DialogTitle>
 					<DialogDescription>
 						Get assistance and learn more about Databuddy
 					</DialogDescription>
 				</DialogHeader>
-				<div className="grid gap-3 py-4">
-					<Link href="https://databuddy.com/docs" target="_blank">
-						<Button
-							className="h-auto justify-start py-3 text-left"
-							variant="outline"
-						>
-							<div className="flex items-start gap-3">
-								<BookOpenIcon
-									className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
-									size={32}
-									weight="duotone"
-								/>
-								<div>
-									<h4 className="font-medium text-sm">Documentation</h4>
-									<span className="mt-1 block text-muted-foreground text-xs">
-										Read guides and API references
-									</span>
-								</div>
-							</div>
-						</Button>
-					</Link>
-					<Link href="mailto:[email protected]" target="_blank">
-						<Button
-							className="h-auto justify-start py-3 text-left"
-							variant="outline"
-						>
-							<div className="flex items-start gap-3">
-								<ChatCircleIcon
-									className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
-									size={32}
-									weight="duotone"
-								/>
-								<div>
-									<h4 className="font-medium text-sm">Contact Support</h4>
-									<span className="mt-1 block text-muted-foreground text-xs">
-										Get help from our support team
-									</span>
-								</div>
-							</div>
-						</Button>
-					</Link>
-					<Link href="https://www.youtube.com/trydatabuddy" target="_blank">
-						<Button
-							className="h-auto justify-start py-3 text-left"
-							variant="outline"
-						>
-							<div className="flex items-start gap-3">
-								<LaptopIcon
-									className="mt-0.5 h-5 w-5 flex-shrink-0 text-primary"
-									size={32}
-									weight="duotone"
-								/>
-								<div>
-									<h4 className="font-medium text-sm">Tutorials</h4>
-									<span className="mt-1 block text-muted-foreground text-xs">
-										Learn Databuddy step by step
-									</span>
-								</div>
-							</div>
-						</Button>
-					</Link>
+
+				<div className="space-y-2 py-4">
+					{helpItems.map((item) => {
+						const Icon = item.icon;
+						return (
+							<Link
+								href={item.href}
+								key={item.href}
+								{...(item.external && {
+									target: '_blank',
+									rel: 'noopener noreferrer',
+								})}
+								className="block"
+							>
+								<Button
+									className="h-auto w-full justify-start p-4 text-left transition-colors hover:bg-muted/50"
+									variant="ghost"
+								>
+									<div className="flex items-start gap-4">
+										<div className="rounded-lg bg-primary/10 p-2">
+											<Icon className="h-5 w-5 text-primary" weight="duotone" />
+										</div>
+										<div className="min-w-0 flex-1">
+											<h4 className="font-semibold text-sm leading-none">
+												{item.title}
+											</h4>
+											<p className="mt-2 text-muted-foreground text-xs leading-relaxed">
+												{item.description}
+											</p>
+										</div>
+									</div>
+								</Button>
+							</Link>
+						);
+					})}
 				</div>
 			</DialogContent>
 		</Dialog>