Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
12 changes: 7 additions & 5 deletions packages/components/react/src/Panels/PreviewPanel.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,7 @@ export const PreviewPanel = memo(
first={index === 0}
last={index === previews.length - 1}
toggleTerminal={toggleTerminal}
i18n={i18n}
/>
</Panel>,
);
Expand All @@ -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(() => {
Expand All @@ -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
Expand All @@ -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>
Expand Down Expand Up @@ -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}`;
Expand Down
7 changes: 7 additions & 0 deletions packages/types/src/schemas/i18n.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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.
*
Expand Down