feat: health check seo
This commit is contained in:
Kailasdevdas
@@ -7,11 +7,12 @@ interface BytescaleUploaderProps {
|
||||
value: string;
|
||||
onChange: (url: string) => void;
|
||||
folderPath:
|
||||
| "/health-packages"
|
||||
| "/seo"
|
||||
| "/doctors"
|
||||
| "/departments"
|
||||
| "/news"
|
||||
| "/blog"
|
||||
| "/health-packages"
|
||||
| "/doctor-og";
|
||||
}
|
||||
|
||||
|
||||
@@ -0,0 +1,436 @@
|
||||
import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
|
||||
import SeoFields from "@/components/SeoFields/SeoFields";
|
||||
import { useEffect } from "react";
|
||||
|
||||
import {
|
||||
Dialog,
|
||||
DialogContent,
|
||||
DialogFooter,
|
||||
DialogHeader,
|
||||
DialogTitle,
|
||||
} from "@/components/ui/dialog";
|
||||
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
import { Button } from "@/components/ui/button";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Switch } from "@/components/ui/switch";
|
||||
|
||||
import {
|
||||
Select,
|
||||
SelectContent,
|
||||
SelectItem,
|
||||
SelectTrigger,
|
||||
SelectValue,
|
||||
} from "@/components/ui/select";
|
||||
|
||||
import {
|
||||
Accordion,
|
||||
AccordionContent,
|
||||
AccordionItem,
|
||||
AccordionTrigger,
|
||||
} from "@/components/ui/accordion";
|
||||
|
||||
import { Plus, Trash2 } from "lucide-react";
|
||||
|
||||
interface Props {
|
||||
open: boolean;
|
||||
onOpenChange: (open: boolean) => void;
|
||||
editingPackage: any;
|
||||
pkgForm: any;
|
||||
setPkgForm: any;
|
||||
inclusionsList: any[];
|
||||
setInclusionsList: any;
|
||||
categories: any[];
|
||||
onSave: () => void;
|
||||
}
|
||||
|
||||
export default function HealthPackageModal({
|
||||
open,
|
||||
onOpenChange,
|
||||
editingPackage,
|
||||
pkgForm,
|
||||
setPkgForm,
|
||||
inclusionsList,
|
||||
setInclusionsList,
|
||||
categories,
|
||||
onSave,
|
||||
}: Props) {
|
||||
useEffect(() => {
|
||||
if (!editingPackage && pkgForm.name) {
|
||||
setPkgForm((prev: any) => ({
|
||||
...prev,
|
||||
slug: prev.slug
|
||||
? prev.slug
|
||||
: pkgForm.name
|
||||
.toLowerCase()
|
||||
.replace(/[^a-z0-9]+/g, "-")
|
||||
.replace(/(^-|-$)/g, ""),
|
||||
}));
|
||||
}
|
||||
}, [pkgForm.name]);
|
||||
|
||||
const handleAddInclusionField = () => {
|
||||
setInclusionsList([
|
||||
...inclusionsList,
|
||||
{
|
||||
id: Date.now(),
|
||||
category: "",
|
||||
items: "",
|
||||
},
|
||||
]);
|
||||
};
|
||||
|
||||
const handleRemoveInclusionField = (id: number) => {
|
||||
setInclusionsList(inclusionsList.filter((item) => item.id !== id));
|
||||
};
|
||||
|
||||
const handleUpdateInclusionField = (
|
||||
id: number,
|
||||
field: string,
|
||||
value: string,
|
||||
) => {
|
||||
setInclusionsList(
|
||||
inclusionsList.map((item) =>
|
||||
item.id === id
|
||||
? {
|
||||
...item,
|
||||
[field]: value,
|
||||
}
|
||||
: item,
|
||||
),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<Dialog open={open} onOpenChange={onOpenChange}>
|
||||
<DialogContent className="w-full !max-w-7xl h-[92vh] flex flex-col p-0 overflow-hidden">
|
||||
<DialogHeader className="px-6 py-5 border-b bg-background sticky top-0 z-20">
|
||||
<DialogTitle className="text-2xl font-bold">
|
||||
{editingPackage ? "Edit Health Package" : "Create Health Package"}
|
||||
</DialogTitle>
|
||||
</DialogHeader>
|
||||
|
||||
<div className="flex-1 overflow-y-auto">
|
||||
<div className="grid grid-cols-1 xl:grid-cols-[1.2fr_0.8fr] gap-8 p-6">
|
||||
{/* LEFT COLUMN */}
|
||||
<div className="space-y-8">
|
||||
<div className="space-y-5">
|
||||
<div className="sticky top-0 bg-background z-10 pb-2">
|
||||
<h3 className="text-lg font-bold">Profile & Pricing</h3>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Main package information
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-5">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Package Image</Label>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Recommended size: 650 × 250
|
||||
</p>
|
||||
|
||||
<BytescaleUploader
|
||||
value={pkgForm.image || ""}
|
||||
folderPath="/health-packages"
|
||||
onChange={(url) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
image: url,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="flex items-center justify-between border rounded-xl p-4 bg-muted/30">
|
||||
<div>
|
||||
<p className="font-semibold">Active Visibility</p>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Show this package publicly
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Switch
|
||||
checked={pkgForm.isActive}
|
||||
onCheckedChange={(val) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
isActive: val,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-2 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Package Name</Label>
|
||||
|
||||
<Input
|
||||
value={pkgForm.name}
|
||||
onChange={(e) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
name: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">URL Slug</Label>
|
||||
|
||||
<Input
|
||||
value={pkgForm.slug}
|
||||
onChange={(e) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
slug: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Category</Label>
|
||||
|
||||
<Select
|
||||
value={pkgForm.categoryId?.toString()}
|
||||
onValueChange={(v) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
categoryId: Number(v),
|
||||
})
|
||||
}
|
||||
>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="Select category" />
|
||||
</SelectTrigger>
|
||||
|
||||
<SelectContent>
|
||||
{categories.map((c) => (
|
||||
<SelectItem key={c.id} value={c.id.toString()}>
|
||||
{c.name}
|
||||
</SelectItem>
|
||||
))}
|
||||
</SelectContent>
|
||||
</Select>
|
||||
</div>
|
||||
|
||||
<div className="grid grid-cols-1 md:grid-cols-3 gap-4">
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Regular Price (₹)</Label>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
value={pkgForm.price || ""}
|
||||
onChange={(e) => {
|
||||
const value = e.target.value
|
||||
? Number(e.target.value)
|
||||
: undefined;
|
||||
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
price: value,
|
||||
});
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">
|
||||
Discounted Price (₹)
|
||||
</Label>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
disabled={!pkgForm.price}
|
||||
value={pkgForm.discountedPrice || ""}
|
||||
onChange={(e) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
discountedPrice: e.target.value
|
||||
? Number(e.target.value)
|
||||
: undefined,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Sort Priority</Label>
|
||||
|
||||
<Input
|
||||
type="number"
|
||||
value={pkgForm.sortOrder}
|
||||
onChange={(e) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
sortOrder: Number(e.target.value),
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="font-semibold">Description</Label>
|
||||
|
||||
<Textarea
|
||||
rows={5}
|
||||
value={pkgForm.description}
|
||||
onChange={(e) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
description: e.target.value,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* INCLUSIONS */}
|
||||
<div className="space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold">Tests & Inclusions</h3>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Group tests into categories
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Badge variant="outline">
|
||||
{inclusionsList.length} Groups
|
||||
</Badge>
|
||||
</div>
|
||||
|
||||
<Accordion type="multiple" className="space-y-4">
|
||||
{inclusionsList.map((inc, index) => {
|
||||
const testCount = inc.items
|
||||
?.split(",")
|
||||
.filter(Boolean).length;
|
||||
|
||||
return (
|
||||
<AccordionItem
|
||||
key={inc.id}
|
||||
value={inc.id.toString()}
|
||||
className="border rounded-xl bg-background px-5 shadow-sm"
|
||||
>
|
||||
<AccordionTrigger className="hover:no-underline w-full">
|
||||
<div className="flex w-full items-center justify-between">
|
||||
<div className="flex flex-col items-start text-left">
|
||||
<p className="font-semibold">
|
||||
{inc.category || `Group ${index + 1}`}
|
||||
</p>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
{testCount || 0} tests included
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Button
|
||||
variant="ghost"
|
||||
size="sm"
|
||||
className="text-red-500 hover:text-red-600"
|
||||
onClick={() => handleRemoveInclusionField(inc.id)}
|
||||
>
|
||||
<Trash2 className="h-4 w-4 mr-1" />
|
||||
Remove
|
||||
</Button>
|
||||
</div>
|
||||
</AccordionTrigger>
|
||||
|
||||
<AccordionContent className="pt-4">
|
||||
<div className="space-y-4">
|
||||
<div className="space-y-2">
|
||||
<Label>Category Title</Label>
|
||||
|
||||
<Input
|
||||
placeholder="Routine Blood Tests"
|
||||
value={inc.category}
|
||||
onChange={(e) =>
|
||||
handleUpdateInclusionField(
|
||||
inc.id,
|
||||
"category",
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label>Included Tests</Label>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
rows={4}
|
||||
placeholder="CBC, LFT, RFT, TSH"
|
||||
value={inc.items}
|
||||
onChange={(e) =>
|
||||
handleUpdateInclusionField(
|
||||
inc.id,
|
||||
"items",
|
||||
e.target.value,
|
||||
)
|
||||
}
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Separate each test using commas
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</AccordionContent>
|
||||
</AccordionItem>
|
||||
);
|
||||
})}
|
||||
</Accordion>
|
||||
|
||||
<Button
|
||||
variant="outline"
|
||||
className="w-full border-dashed border-2 h-12"
|
||||
onClick={handleAddInclusionField}
|
||||
>
|
||||
<Plus className="h-4 w-4 mr-2" />
|
||||
Add New Inclusion Group
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* RIGHT COLUMN */}
|
||||
<div className="space-y-6">
|
||||
<SeoFields
|
||||
value={pkgForm.seo}
|
||||
slug={pkgForm.slug}
|
||||
folderPath="/seo"
|
||||
onChange={(seo) =>
|
||||
setPkgForm({
|
||||
...pkgForm,
|
||||
seo,
|
||||
})
|
||||
}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<DialogFooter className="p-6 border-t bg-background sticky bottom-0 z-20">
|
||||
<Button variant="ghost" onClick={() => onOpenChange(false)}>
|
||||
Cancel
|
||||
</Button>
|
||||
|
||||
<Button className="px-10" onClick={onSave}>
|
||||
{editingPackage ? "Save Changes" : "Create Package"}
|
||||
</Button>
|
||||
</DialogFooter>
|
||||
</DialogContent>
|
||||
</Dialog>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,211 @@
|
||||
import { BytescaleUploader } from "@/components/BytescaleUploader/BytescaleUploader";
|
||||
|
||||
import { Badge } from "@/components/ui/badge";
|
||||
import { Input } from "@/components/ui/input";
|
||||
import { Label } from "@/components/ui/label";
|
||||
import { Textarea } from "@/components/ui/textarea";
|
||||
|
||||
import { X } from "lucide-react";
|
||||
|
||||
interface SeoData {
|
||||
seoTitle?: string;
|
||||
metaDescription?: string;
|
||||
focusKeyphrase?: string;
|
||||
tags?: string[];
|
||||
ogTitle?: string;
|
||||
ogDescription?: string;
|
||||
ogImage?: string;
|
||||
}
|
||||
|
||||
interface SeoFieldsProps {
|
||||
value?: SeoData;
|
||||
onChange: (seo: SeoData) => void;
|
||||
slug?: string;
|
||||
folderPath?: "/seo";
|
||||
}
|
||||
|
||||
export default function SeoFields({
|
||||
value,
|
||||
onChange,
|
||||
slug,
|
||||
folderPath = "/seo",
|
||||
}: SeoFieldsProps) {
|
||||
const seo = value || {};
|
||||
|
||||
const updateSeo = (field: keyof SeoData, fieldValue: any) => {
|
||||
onChange({
|
||||
...seo,
|
||||
[field]: fieldValue,
|
||||
});
|
||||
};
|
||||
|
||||
const removeTag = (index: number) => {
|
||||
updateSeo(
|
||||
"tags",
|
||||
(seo.tags || []).filter((_, i) => i !== index),
|
||||
);
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="space-y-5 p-5 border rounded-xl bg-muted/20">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h3 className="text-lg font-bold">SEO Settings</h3>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Optimize for Google & social sharing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Badge variant="secondary">Optional</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-semibold">SEO Title</Label>
|
||||
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{seo.seoTitle?.length || 0}/60
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Input
|
||||
placeholder="Best Health Checkup Package in Kochi"
|
||||
value={seo.seoTitle || ""}
|
||||
onChange={(e) => updateSeo("seoTitle", e.target.value)}
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Recommended: 50–60 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<div className="flex items-center justify-between">
|
||||
<Label className="text-sm font-semibold">Meta Description</Label>
|
||||
|
||||
<span className="text-xs text-muted-foreground">
|
||||
{seo.metaDescription?.length || 0}/160
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<Textarea
|
||||
rows={4}
|
||||
placeholder="Short description shown in Google search results"
|
||||
value={seo.metaDescription || ""}
|
||||
onChange={(e) => updateSeo("metaDescription", e.target.value)}
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
Recommended: 150–160 characters
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold">Focus Keyphrase</Label>
|
||||
|
||||
<Input
|
||||
placeholder="health checkup package kochi"
|
||||
value={seo.focusKeyphrase || ""}
|
||||
onChange={(e) => updateSeo("focusKeyphrase", e.target.value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold">Tags / Keywords</Label>
|
||||
|
||||
<div className="flex flex-wrap gap-2 border rounded-md p-3 min-h-[48px] bg-background">
|
||||
{(seo.tags || []).map((tag, index) => (
|
||||
<div
|
||||
key={index}
|
||||
className="bg-primary/10 text-primary px-3 py-1 rounded-full text-sm flex items-center gap-2"
|
||||
>
|
||||
<span>{tag}</span>
|
||||
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => removeTag(index)}
|
||||
className="hover:text-red-500 transition-colors"
|
||||
>
|
||||
<X className="h-3 w-3" />
|
||||
</button>
|
||||
</div>
|
||||
))}
|
||||
|
||||
<Input
|
||||
placeholder="Type keyword and press Enter"
|
||||
className="border-0 shadow-none focus-visible:ring-0 min-w-[220px] flex-1"
|
||||
onKeyDown={(e) => {
|
||||
if (e.key === "Enter" && e.currentTarget.value.trim()) {
|
||||
e.preventDefault();
|
||||
|
||||
const newTag = e.currentTarget.value.trim();
|
||||
|
||||
if (!(seo.tags || []).includes(newTag)) {
|
||||
updateSeo("tags", [...(seo.tags || []), newTag]);
|
||||
}
|
||||
|
||||
e.currentTarget.value = "";
|
||||
}
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<p className="text-xs text-muted-foreground">Press Enter to add tags</p>
|
||||
</div>
|
||||
|
||||
<div className="border-t pt-5 space-y-5">
|
||||
<div className="flex items-center justify-between">
|
||||
<div>
|
||||
<h4 className="font-bold">Open Graph (Social Preview)</h4>
|
||||
|
||||
<p className="text-sm text-muted-foreground">
|
||||
Facebook, WhatsApp & Twitter sharing
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<Badge variant="secondary">Optional</Badge>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold">OG Title</Label>
|
||||
|
||||
<Input
|
||||
placeholder="Title for social sharing"
|
||||
value={seo.ogTitle || ""}
|
||||
onChange={(e) => updateSeo("ogTitle", e.target.value)}
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
If empty, SEO title will be used
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold">OG Description</Label>
|
||||
|
||||
<Textarea
|
||||
rows={4}
|
||||
placeholder="Description for social sharing"
|
||||
value={seo.ogDescription || ""}
|
||||
onChange={(e) => updateSeo("ogDescription", e.target.value)}
|
||||
/>
|
||||
|
||||
<p className="text-xs text-muted-foreground">
|
||||
If empty, meta description will be used
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="space-y-2">
|
||||
<Label className="text-sm font-semibold">OG Image</Label>
|
||||
|
||||
<BytescaleUploader
|
||||
value={seo.ogImage || ""}
|
||||
folderPath={folderPath}
|
||||
onChange={(url) => updateSeo("ogImage", url)}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,79 @@
|
||||
import * as React from "react"
|
||||
import { Accordion as AccordionPrimitive } from "radix-ui"
|
||||
|
||||
import { cn } from "@/lib/utils"
|
||||
import { ChevronDownIcon, ChevronUpIcon } from "lucide-react"
|
||||
|
||||
function Accordion({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Root>) {
|
||||
return (
|
||||
<AccordionPrimitive.Root
|
||||
data-slot="accordion"
|
||||
className={cn("flex w-full flex-col", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionItem({
|
||||
className,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Item>) {
|
||||
return (
|
||||
<AccordionPrimitive.Item
|
||||
data-slot="accordion-item"
|
||||
className={cn("not-last:border-b", className)}
|
||||
{...props}
|
||||
/>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionTrigger({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Trigger>) {
|
||||
return (
|
||||
<AccordionPrimitive.Header className="flex">
|
||||
<AccordionPrimitive.Trigger
|
||||
data-slot="accordion-trigger"
|
||||
className={cn(
|
||||
"group/accordion-trigger relative flex flex-1 items-start justify-between rounded-lg border border-transparent py-2.5 text-left text-sm font-medium transition-all outline-none hover:underline focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50 focus-visible:after:border-ring disabled:pointer-events-none disabled:opacity-50 **:data-[slot=accordion-trigger-icon]:ml-auto **:data-[slot=accordion-trigger-icon]:size-4 **:data-[slot=accordion-trigger-icon]:text-muted-foreground",
|
||||
className
|
||||
)}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronDownIcon data-slot="accordion-trigger-icon" className="pointer-events-none shrink-0 group-aria-expanded/accordion-trigger:hidden" />
|
||||
<ChevronUpIcon data-slot="accordion-trigger-icon" className="pointer-events-none hidden shrink-0 group-aria-expanded/accordion-trigger:inline" />
|
||||
</AccordionPrimitive.Trigger>
|
||||
</AccordionPrimitive.Header>
|
||||
)
|
||||
}
|
||||
|
||||
function AccordionContent({
|
||||
className,
|
||||
children,
|
||||
...props
|
||||
}: React.ComponentProps<typeof AccordionPrimitive.Content>) {
|
||||
return (
|
||||
<AccordionPrimitive.Content
|
||||
data-slot="accordion-content"
|
||||
className="overflow-hidden text-sm data-open:animate-accordion-down data-closed:animate-accordion-up"
|
||||
{...props}
|
||||
>
|
||||
<div
|
||||
className={cn(
|
||||
"h-(--radix-accordion-content-height) pt-0 pb-2.5 [&_a]:underline [&_a]:underline-offset-3 [&_a]:hover:text-foreground [&_p:not(:last-child)]:mb-4",
|
||||
className
|
||||
)}
|
||||
>
|
||||
{children}
|
||||
</div>
|
||||
</AccordionPrimitive.Content>
|
||||
)
|
||||
}
|
||||
|
||||
export { Accordion, AccordionItem, AccordionTrigger, AccordionContent }
|
||||
Reference in New Issue
Block a user