Add SEO settings and root admin save flows

components/root/media-field-picker.tsx

@@ -24,6 +24,9 @@ type MediaFieldPickerProps = {
   options: MediaOption[];
   inputName: string;
   fileFieldName: string;
+  fileLabel?: string;
+  externalLabel?: string;
+  libraryLabel?: string;
   accept?: string;
 };
 
@@ -36,6 +39,9 @@ export function MediaFieldPicker({
   options,
   inputName,
   fileFieldName,
+  fileLabel,
+  externalLabel,
+  libraryLabel,
   accept,
 }: MediaFieldPickerProps) {
   const filteredOptions = options.filter((option) => option.kind === value.kind);
@@ -100,14 +106,14 @@ export function MediaFieldPicker({
 
       {value.mode === "upload" ? (
         <div className="space-y-2">
-          <Label>{fileFieldName}</Label>
+          <Label>{fileLabel ?? fileFieldName}</Label>
           <Input name={fileFieldName} type="file" accept={accept} />
         </div>
       ) : null}
 
       {value.mode === "external" ? (
         <div className="space-y-2">
-          <Label>External URL</Label>
+          <Label>{externalLabel ?? "External URL"}</Label>
           <Input
             value={value.url}
             onChange={(event) => onChange({ ...value, url: event.target.value })}
@@ -118,7 +124,7 @@ export function MediaFieldPicker({
 
       {value.mode === "library" ? (
         <div className="space-y-2">
-          <Label>Media Library</Label>
+          <Label>{libraryLabel ?? "Media Library"}</Label>
           <select
             value={value.assetId}
             onChange={(event) => onChange({ ...value, assetId: event.target.value })}