Refactor code to address issues

src/pages/DesignerRides.tsx

@@ -16,6 +16,7 @@ import { useAuth } from '@/hooks/useAuth';
 import { toast } from '@/hooks/use-toast';
 import { useAuthModal } from '@/hooks/useAuthModal';
 import { useDocumentTitle } from '@/hooks/useDocumentTitle';
+import { useOpenGraph } from '@/hooks/useOpenGraph';
 
 export default function DesignerRides() {
   const { designerSlug } = useParams<{ designerSlug: string }>();
@@ -104,6 +105,17 @@ export default function DesignerRides() {
     ride.park?.name?.toLowerCase().includes(searchQuery.toLowerCase())
   );
 
+  useOpenGraph({
+    title: designer ? `${designer.name} - Rides` : 'Designer Rides',
+    description: designer 
+      ? `Explore ${filteredRides.length} rides designed by ${designer.name}` 
+      : undefined,
+    imageUrl: designer?.banner_image_url || filteredRides[0]?.banner_image_url,
+    imageId: designer?.banner_image_id || filteredRides[0]?.banner_image_id,
+    type: 'website',
+    enabled: !!designer && !loading
+  });
+
   const handleCreateSubmit = async (data: any) => {
     try {
       if (!designer) {