GGH/gg-backend
5
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add seo reusable component

Browse Source
This commit is contained in:
Rishal KV
2026-05-26 11:38:34 +05:30
parent fc491f4050
commit fa06126219
2 changed files with 138 additions and 91 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/pages/Doctor.tsx
+7 -91
View File
@@ -28,6 +28,7 @@ import {
DialogTitle,
DialogFooter,
} from "@/components/ui/dialog";
import SeoPreview from "@/components/SeoPreview/SeoPreview";
import { Input } from "@/components/ui/input";
import { Badge } from "@/components/ui/badge";
import { Switch } from "@/components/ui/switch";
@@ -1159,97 +1160,12 @@ export default function DoctorPage() {
</DialogFooter>
</DialogContent>
</Dialog>
<Dialog open={openOgPreview} onOpenChange={setOpenOgPreview}>
<DialogContent className="sm:!max-w-4xl overflow-hidden">
<DialogHeader>
<DialogTitle className="text-xl">SEO Preview</DialogTitle>
</DialogHeader>
{previewDoctor && (
<div className="space-y-10 py-2">
{/* SOCIAL MEDIA PREVIEW */}
<div>
<p className="mb-4 text-sm font-semibold text-muted-foreground">
Social Media Preview (WhatsApp / Facebook)
</p>
<a
href={getDoctorUrl(previewDoctor)}
target="_blank"
rel="noopener noreferrer"
className="block max-w-[560px] overflow-hidden rounded-xl border bg-white shadow-sm transition hover:shadow-md"
>
{/* IMAGE */}
<div className="aspect-[1.91/1] overflow-hidden bg-muted">
<img
src={
previewDoctor?.seo?.ogImage ||
"https://placehold.co/1200x630?text=GG+Hospital"
}
alt="OG Preview"
className="h-full w-full object-cover"
/>
</div>
{/* CONTENT */}
<div className="border-t bg-[#f0f2f5] px-4 py-3">
<p className="truncate text-[11px] uppercase tracking-wide text-[#65676b]">
gg-hospital.com
</p>
<h3 className="mt-1 line-clamp-2 text-[18px] font-semibold leading-snug text-[#1c1e21]">
{previewDoctor?.seo?.ogTitle ||
previewDoctor?.seo?.seoTitle ||
"GG Hospital"}
</h3>
<p className="mt-1 line-clamp-2 text-[14px] text-[#65676b]">
{previewDoctor?.seo?.ogDescription ||
previewDoctor?.seo?.metaDescription ||
"No description available"}
</p>
</div>
</a>
</div>
{/* GOOGLE SEARCH PREVIEW */}
<div>
<p className="mb-4 text-sm font-semibold text-muted-foreground">
Google Search Preview
</p>
<div className="rounded-xl border bg-white p-6">
<a
href={getDoctorUrl(previewDoctor)}
target="_blank"
rel="noopener noreferrer"
className="block"
>
{/* URL */}
<p className="truncate text-[14px] text-[#202124] hover:underline">
{getDoctorUrl(previewDoctor)}
</p>
{/* TITLE */}
<h3 className="mt-1 text-[22px] leading-tight text-[#1a0dab] hover:underline">
{previewDoctor?.seo?.seoTitle ||
previewDoctor?.seo?.ogTitle ||
"SEO title preview"}
</h3>
</a>
{/* DESCRIPTION */}
<p className="mt-2 line-clamp-3 text-[14px] leading-6 text-[#4d5156]">
{previewDoctor?.seo?.metaDescription ||
previewDoctor?.seo?.ogDescription ||
"No meta description available"}
</p>
</div>
</div>
</div>
)}
</DialogContent>
</Dialog>
<SeoPreview
open={openOgPreview}
onOpenChange={setOpenOgPreview}
previewData={previewDoctor}
url={getDoctorUrl(previewDoctor)}
/>
</div>
);
}