Address code review feedback: Remove unused state, export Dialog prop types, improve accessibility

Co-authored-by: rafiqul4 <124497017+rafiqul4@users.noreply.github.com>

Author: Copilot

package-lock.json

@@ -1,6 +1,5 @@
 "use client"
 
-import { useState } from "react"
 import Image from "next/image"
 import { Card, CardContent, CardDescription, CardHeader, CardTitle } from "@/components/ui/card"
 import { Container } from "@/components/ui/container"
@@ -97,8 +96,6 @@ interface ProductsSectionProps {
 }
 
 export default function ProductsSection({ className }: ProductsSectionProps) {
-  const [selectedProduct, setSelectedProduct] = useState<Product | null>(null)
-
   return (
     <section className={className} aria-labelledby="products-heading">
       <Container className="py-16 sm:py-24">
@@ -172,7 +169,6 @@ export default function ProductsSection({ className }: ProductsSectionProps) {
                             variant="outline" 
                             size="sm" 
                             className="flex-1"
-                            onClick={() => setSelectedProduct(product)}
                           >
                             View Details
                           </Button>
@@ -193,7 +189,10 @@ export default function ProductsSection({ className }: ProductsSectionProps) {
                 </Card>
 
                 {/* Product Detail Modal */}
-                <DialogContent className="max-w-5xl max-h-[90vh] overflow-y-auto">
+                <DialogContent 
+                  className="max-w-5xl max-h-[90vh] overflow-y-auto"
+                  aria-describedby="product-description"
+                >
                   <DialogHeader>
                     <div className="flex items-center gap-3">
                       <div className="w-12 h-12 rounded-xl bg-primary/20 flex items-center justify-center">
@@ -222,7 +221,7 @@ export default function ProductsSection({ className }: ProductsSectionProps) {
                     </div>
 
                     {/* Description */}
-                    <div className="space-y-3">
+                    <div className="space-y-3" id="product-description">
                       <h4 className="text-lg font-semibold">About {product.name}</h4>
                       <div className="text-muted-foreground whitespace-pre-line leading-relaxed">
                         {product.fullDescription}

src/components/home/products-section.tsx

@@ -29,6 +29,8 @@ const DialogOverlay = React.forwardRef<
 ))
 DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
+type DialogOverlayProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
+
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
@@ -53,6 +55,8 @@ const DialogContent = React.forwardRef<
 ))
 DialogContent.displayName = DialogPrimitive.Content.displayName
 
+type DialogContentProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
+
 const DialogHeader = ({
   className,
   ...props
@@ -67,6 +71,8 @@ const DialogHeader = ({
 )
 DialogHeader.displayName = "DialogHeader"
 
+type DialogHeaderProps = React.HTMLAttributes<HTMLDivElement>
+
 const DialogFooter = ({
   className,
   ...props
@@ -81,6 +87,8 @@ const DialogFooter = ({
 )
 DialogFooter.displayName = "DialogFooter"
 
+type DialogFooterProps = React.HTMLAttributes<HTMLDivElement>
+
 const DialogTitle = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Title>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
@@ -96,6 +104,8 @@ const DialogTitle = React.forwardRef<
 ))
 DialogTitle.displayName = DialogPrimitive.Title.displayName
 
+type DialogTitleProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Title>
+
 const DialogDescription = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Description>,
   React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
@@ -108,6 +118,8 @@ const DialogDescription = React.forwardRef<
 ))
 DialogDescription.displayName = DialogPrimitive.Description.displayName
 
+type DialogDescriptionProps = React.ComponentPropsWithoutRef<typeof DialogPrimitive.Description>
+
 export {
   Dialog,
   DialogPortal,
@@ -120,3 +132,12 @@ export {
   DialogTitle,
   DialogDescription,
 }
+
+export type {
+  DialogOverlayProps,
+  DialogContentProps,
+  DialogHeaderProps,
+  DialogFooterProps,
+  DialogTitleProps,
+  DialogDescriptionProps,
+}