Fix preview i18n

Author: ycs77

packages/astro/src/default/utils/content/default-localization.ts

@@ -8,6 +8,7 @@ export const DEFAULT_LOCALIZATION = {
   webcontainerLinkText: 'Powered by WebContainers',
   filesTitleText: 'Files',
   prepareEnvironmentTitleText: 'Preparing Environment',
+  previewTitleText: 'Preview',
   toggleTerminalButtonText: 'Toggle Terminal',
   solveButtonText: 'Solve',
   resetButtonText: 'Reset',

packages/components/react/src/Panels/PreviewPanel.tsx

@@ -122,6 +122,7 @@ export const PreviewPanel = memo(
             first={index === 0}
             last={index === previews.length - 1}
             toggleTerminal={toggleTerminal}
+            i18n={i18n}
           />
         </Panel>,
       );
@@ -143,9 +144,10 @@ interface PreviewProps {
   first?: boolean;
   last?: boolean;
   toggleTerminal?: () => void;
+  i18n: I18n;
 }
 
-function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }: PreviewProps) {
+function Preview({ preview, iframe, previewCount, first, last, toggleTerminal, i18n }: PreviewProps) {
   const previewContainerRef = useRef<HTMLDivElement>(null);
 
   useEffect(() => {
@@ -169,7 +171,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }:
       >
         <div className="panel-title">
           <div className="panel-icon i-ph-globe-duotone"></div>
-          <span className="text-sm truncate">{previewTitle(preview, previewCount)}</span>
+          <span className="text-sm truncate">{previewTitle(preview, previewCount, i18n)}</span>
         </div>
         {last && (
           <button
@@ -178,7 +180,7 @@ function Preview({ preview, iframe, previewCount, first, last, toggleTerminal }:
             onClick={() => toggleTerminal?.()}
           >
             <div className="panel-button-icon i-ph-terminal-window-duotone"></div>
-            <span className="text-sm">Toggle Terminal</span>
+            <span className="text-sm">{i18n.toggleTerminalButtonText}</span>
           </button>
         )}
       </div>
@@ -207,13 +209,13 @@ function requestAnimationFrameLoop(loop: () => void): () => void {
   };
 }
 
-function previewTitle(preview: PreviewInfo, previewCount: number) {
+function previewTitle(preview: PreviewInfo, previewCount: number, i18n: I18n) {
   if (preview.title) {
     return preview.title;
   }
 
   if (previewCount === 1) {
-    return 'Preview';
+    return i18n.previewTitleText;
   }
 
   return `Preview on port ${preview.port}`;

packages/types/src/schemas/i18n.ts

@@ -56,6 +56,13 @@ export const i18nSchema = z.object({
    */
   prepareEnvironmentTitleText: z.string().optional().describe('Text shown on top of the steps section.'),
 
+  /**
+   * Text shown on top of the preview section.
+   *
+   * @default 'Preview'
+   */
+  previewTitleText: z.string().optional().describe('Text shown on top of the preview section.'),
+
   /**
    * Text for the toggle terminal button.
    *