Initial commit: dashboard
Co-authored-by: Cursor <cursoragent@cursor.com>
This commit is contained in:
@@ -0,0 +1,70 @@
|
||||
"use client";
|
||||
|
||||
import formStyles from "@/components/catalog/CatalogForm.module.css";
|
||||
import styles from "./SeoMetaFields.module.css";
|
||||
|
||||
const TITLE_MAX = 70;
|
||||
const DESCRIPTION_MAX = 160;
|
||||
|
||||
/** Optional SEO overrides — same control used by Meshkee category/content forms. */
|
||||
export default function SeoMetaFields({
|
||||
seoMetaTitle,
|
||||
seoMetaDescription,
|
||||
onTitleChange,
|
||||
onDescriptionChange,
|
||||
disabled = false,
|
||||
showHeading = true,
|
||||
}: {
|
||||
seoMetaTitle: string;
|
||||
seoMetaDescription: string;
|
||||
onTitleChange: (value: string) => void;
|
||||
onDescriptionChange: (value: string) => void;
|
||||
disabled?: boolean;
|
||||
showHeading?: boolean;
|
||||
}) {
|
||||
return (
|
||||
<div className={styles.block}>
|
||||
{showHeading ? <h3 className={styles.heading}>SEO</h3> : null}
|
||||
<p className={styles.hint}>
|
||||
Optional overrides for search results. Leave blank to use the category
|
||||
name and description.
|
||||
</p>
|
||||
<label className={formStyles.field}>
|
||||
<span>
|
||||
SEO title <em className={formStyles.optional}>(optional)</em>
|
||||
</span>
|
||||
<input
|
||||
type="text"
|
||||
value={seoMetaTitle}
|
||||
disabled={disabled}
|
||||
maxLength={TITLE_MAX}
|
||||
placeholder="Custom title for search engines"
|
||||
onChange={(event) =>
|
||||
onTitleChange(event.target.value.slice(0, TITLE_MAX))
|
||||
}
|
||||
/>
|
||||
<span className={styles.counter}>
|
||||
{seoMetaTitle.length} / {TITLE_MAX}
|
||||
</span>
|
||||
</label>
|
||||
<label className={formStyles.field}>
|
||||
<span>
|
||||
SEO description <em className={formStyles.optional}>(optional)</em>
|
||||
</span>
|
||||
<textarea
|
||||
rows={3}
|
||||
value={seoMetaDescription}
|
||||
disabled={disabled}
|
||||
maxLength={DESCRIPTION_MAX}
|
||||
placeholder="Custom description for search engines"
|
||||
onChange={(event) =>
|
||||
onDescriptionChange(event.target.value.slice(0, DESCRIPTION_MAX))
|
||||
}
|
||||
/>
|
||||
<span className={styles.counter}>
|
||||
{seoMetaDescription.length} / {DESCRIPTION_MAX}
|
||||
</span>
|
||||
</label>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
Reference in New Issue
Block a user