diff --git a/apps/ui-playground/app/components/render.tsx b/apps/ui-playground/app/components/render.tsx index 10f0437ecc6b21..2cb27ceb87961f 100644 --- a/apps/ui-playground/app/components/render.tsx +++ b/apps/ui-playground/app/components/render.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { type PropsWithChildren, useState } from "react"; @@ -11,6 +13,8 @@ type Props = { }; export const RenderComponentWithSnippet: React.FC> = (props) => { +const t = useTranslations("component-code-snippet-renderer"); + const [open, setOpen] = useState(false); // const snippet = // props.customCodeSnippet ?? @@ -32,9 +36,7 @@ export const RenderComponentWithSnippet: React.FC> = (p color="minimal" onClick={() => { setOpen(!open); - }}> - Code (WIP) - + }}>{t('buttons.show-code-wip')}
) { +const t = useTranslations("ui-playground-root-layout"); + return ( - + {children} diff --git a/apps/ui-playground/components/ui/TypeTable.tsx b/apps/ui-playground/components/ui/TypeTable.tsx index f9293e50a84a02..650da6aa6fc3d8 100644 --- a/apps/ui-playground/components/ui/TypeTable.tsx +++ b/apps/ui-playground/components/ui/TypeTable.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { getColorFormats, copyToClipboard } from "@/lib/colorUtils"; import React from "react"; @@ -29,6 +31,8 @@ interface CopyMenuProps { } const CopyMenu: React.FC = ({ color, className, onCopy }) => { +const t = useTranslations("color-type-table"); + const formats = getColorFormats(color, className); if (!formats) return null; @@ -37,24 +41,16 @@ const CopyMenu: React.FC = ({ color, className, onCopy }) => {
+ className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.hex')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.rgb')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.hsl')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('copy-actions.tailwind-class')}
); diff --git a/apps/ui-playground/components/ui/TypographyTable.tsx b/apps/ui-playground/components/ui/TypographyTable.tsx index 15b6f5a4561104..1079a4b5430d58 100644 --- a/apps/ui-playground/components/ui/TypographyTable.tsx +++ b/apps/ui-playground/components/ui/TypographyTable.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import React from "react"; import { Toaster } from "react-hot-toast"; @@ -33,14 +35,14 @@ interface CopyMenuProps { } const CopyMenu: React.FC = ({ style, onCopy }) => { +const t = useTranslations("typography-showcase"); + return (
+ className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-tailwind-class')} + className="hover:bg-subtle w-full rounded px-3 py-1 text-left text-sm">{t('actions.copy-css')}
); @@ -78,7 +78,10 @@ export const TypographyTable: React.FC = ({ sections }) => {section.description &&

{section.description}

}
- {section.styles.map((style, styleIndex) => ( + {section.styles.map((style, styleIndex) => { +const t = useTranslations("typography-showcase"); + +return (
@@ -88,18 +91,19 @@ export const TypographyTable: React.FC = ({ sections }) =>

{style.name}

{style.className}

-
The quick brown fox jumps over the lazy dog
+
{t('sample-text.pangram')}
-

Font: {style.specs.fontFamily}

-

Size: {style.specs.fontSize}px

-

Line Height: {style.specs.lineHeight}

-

Weight: {style.specs.weight}

+

{t('specs.font-family', { "styleSpecsFontFamily": style.specs.fontFamily })}

+

{t('specs.font-size', { "styleSpecsFontSize": style.specs.fontSize })}

+

{t('specs.line-height', { "styleSpecsLineHeight": style.specs.lineHeight })}

+

{t('specs.font-weight', { "styleSpecsWeight": style.specs.weight })}

- ))} + ) +})} ))} diff --git a/apps/ui-playground/content/design/components/alert.customIconColor.tsx b/apps/ui-playground/content/design/components/alert.customIconColor.tsx index efddf9c22bb293..8ceb4ba1752b0e 100644 --- a/apps/ui-playground/content/design/components/alert.customIconColor.tsx +++ b/apps/ui-playground/content/design/components/alert.customIconColor.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -9,16 +11,20 @@ const severities = ["neutral", "info", "warning", "error"] as const; export const CustomIconColorExample: React.FC = () => (
- {severities.map((severity) => ( + {severities.map((severity) => { +const t = useTranslations("ui-playground-alert-custom-icon-color"); + +return ( - ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/alert.customIcons.tsx b/apps/ui-playground/content/design/components/alert.customIcons.tsx index 1819b0dce3cf67..97ffefdd19d476 100644 --- a/apps/ui-playground/content/design/components/alert.customIcons.tsx +++ b/apps/ui-playground/content/design/components/alert.customIcons.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,16 +12,20 @@ const customIcons = ["info", "alert-triangle", "circle-x", "circle-check", "bell export const CustomIconsExample: React.FC = () => (
- {severities.map((severity, index) => ( + {severities.map((severity, index) => { +const t = useTranslations("ui-playground-alert-custom-icons"); + +return ( - ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/avatar.link.tsx b/apps/ui-playground/content/design/components/avatar.link.tsx index 61fc4ecf9e61ce..2795650a149489 100644 --- a/apps/ui-playground/content/design/components/avatar.link.tsx +++ b/apps/ui-playground/content/design/components/avatar.link.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -6,13 +8,17 @@ import { Avatar } from "@calcom/ui/components/avatar"; const sampleImage = "https://cal.com/stakeholder/peer.jpg"; -export const LinkExample: React.FC = () => ( +export const LinkExample: React.FC = () => { +const t = useTranslations("ui-playground-avatar-link"); + +return (
- - Clickable + + {t('labels.clickable-indicator')}
-); +) +}; diff --git a/apps/ui-playground/content/design/components/avatar.sizes.tsx b/apps/ui-playground/content/design/components/avatar.sizes.tsx index 078a626e7bb0b5..27ffe246ceed0d 100644 --- a/apps/ui-playground/content/design/components/avatar.sizes.tsx +++ b/apps/ui-playground/content/design/components/avatar.sizes.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,20 +12,28 @@ const sampleImage = "https://cal.com/stakeholder/peer.jpg"; export const SizesExample: React.FC = () => (
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("avatar-sizes-demo"); + +return (
- + {size}
- ))} + ) +})}
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("avatar-sizes-demo"); + +return (
- + {size}
- ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/badge.icons.tsx b/apps/ui-playground/content/design/components/badge.icons.tsx index de3fe763408fe4..a872618813ce83 100644 --- a/apps/ui-playground/content/design/components/badge.icons.tsx +++ b/apps/ui-playground/content/design/components/badge.icons.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -20,14 +22,18 @@ const variants = [ export const IconsExample: React.FC = () => (
- {variants.map((variant) => ( + {variants.map((variant) => { +const t = useTranslations("ui-playground-badge-icons"); + +return (
{variant} - Icon + {t('labels.icon')}
- ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/badge.interactive.tsx b/apps/ui-playground/content/design/components/badge.interactive.tsx index 03d94ec3685526..8641173640d59a 100644 --- a/apps/ui-playground/content/design/components/badge.interactive.tsx +++ b/apps/ui-playground/content/design/components/badge.interactive.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -20,14 +22,16 @@ const variants = [ export const InteractiveExample: React.FC = () => (
- {variants.map((variant) => ( + {variants.map((variant) => { +const t = useTranslations("ui-playground-badge-interactive"); + +return (
- alert(`${variant} badge clicked!`)}> - Click me - - Clickable + alert(`${variant} badge clicked!`)}>{t('buttons.click-me')} + {t('labels.clickable-description')}
- ))} + ) +})}
); diff --git a/apps/ui-playground/content/design/components/button.loading.tsx b/apps/ui-playground/content/design/components/button.loading.tsx index 4a5b33c34e6bf7..6d41ae637e01dc 100644 --- a/apps/ui-playground/content/design/components/button.loading.tsx +++ b/apps/ui-playground/content/design/components/button.loading.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { Row } from "@/app/components/row"; @@ -8,34 +10,44 @@ import { Button } from "@calcom/ui/components/button"; const colors = ["primary", "secondary", "minimal", "destructive"] as const; export const LoadingExample: React.FC = () => { +const t = useTranslations("ui-playground-button-loading"); + return (
-

Loading State

+

{t('sections.loading-state')}

- {colors.map((color) => ( + {colors.map((color) => { +const t = useTranslations("ui-playground-button-loading"); + +return (
- Loading + {t('labels.loading')}
- ))} + ) +})}
-

Loading with Icons

+

{t('sections.loading-with-icons')}

- {colors.map((color) => ( + {colors.map((color) => { +const t = useTranslations("ui-playground-button-loading"); + +return (
- With Icon + {t('labels.with-icon')}
- ))} + ) +})}
diff --git a/apps/ui-playground/content/design/components/button.onClick.tsx b/apps/ui-playground/content/design/components/button.onClick.tsx index 35f1418cd95f8f..f590d8e73f58c5 100644 --- a/apps/ui-playground/content/design/components/button.onClick.tsx +++ b/apps/ui-playground/content/design/components/button.onClick.tsx @@ -1,14 +1,20 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { Row } from "@/app/components/row"; import { Button } from "@calcom/ui/components/button"; -export const OnClickExample: React.FC = () => ( +export const OnClickExample: React.FC = () => { +const t = useTranslations("button-onclick-demo"); + +return ( - + -); +) +}; diff --git a/apps/ui-playground/content/design/components/checkbox.description.tsx b/apps/ui-playground/content/design/components/checkbox.description.tsx index 8ae2473bcfb77d..4c2ce211c58366 100644 --- a/apps/ui-playground/content/design/components/checkbox.description.tsx +++ b/apps/ui-playground/content/design/components/checkbox.description.tsx @@ -1,15 +1,21 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { CheckboxField } from "@calcom/ui/components/form"; -export const DescriptionExample: React.FC = () => ( +export const DescriptionExample: React.FC = () => { +const t = useTranslations("ui-playground-checkbox-descriptions"); + +return (
- - - + + +
-); +) +}; diff --git a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx index 32e9cdcdc516a2..cea7310eb0766f 100644 --- a/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx +++ b/apps/ui-playground/content/design/components/checkbox.infoIcon.tsx @@ -1,16 +1,22 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { CheckboxField } from "@calcom/ui/components/form"; -export const InfoIconExample: React.FC = () => ( +export const InfoIconExample: React.FC = () => { +const t = useTranslations("ui-playground-checkbox-info-icon"); + +return ( -); +) +}; diff --git a/apps/ui-playground/content/design/components/dialog.confirmation.tsx b/apps/ui-playground/content/design/components/dialog.confirmation.tsx index d3acc63ea37755..8bdb52cf57329d 100644 --- a/apps/ui-playground/content/design/components/dialog.confirmation.tsx +++ b/apps/ui-playground/content/design/components/dialog.confirmation.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; @@ -7,14 +9,14 @@ import { Button } from "@calcom/ui/components/button"; import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/components/dialog"; export const ConfirmationExample: React.FC = () => { +const t = useTranslations("dialog-confirmation-demo"); + const [open, setOpen] = useState(false); return (
- + { color="destructive" onClick={() => { setOpen(false); - }}> - Delete - + }}>{t('buttons.confirm-delete')} diff --git a/apps/ui-playground/content/design/components/dialog.form.tsx b/apps/ui-playground/content/design/components/dialog.form.tsx index 7e7720ea490877..b9166e37d6c63d 100644 --- a/apps/ui-playground/content/design/components/dialog.form.tsx +++ b/apps/ui-playground/content/design/components/dialog.form.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; @@ -8,24 +10,24 @@ import { Dialog, DialogClose, DialogContent, DialogFooter } from "@calcom/ui/com import { TextAreaField } from "@calcom/ui/components/form"; export const FormExample: React.FC = () => { +const t = useTranslations("dialog-form-playground"); + const [open, setOpen] = useState(false); const [formInput, setFormInput] = useState(""); return (
- +
- Your Feedback - (Optional) + <>{t.rich('forms.feedback-label-with-optional', { + component0: (chunks) => {chunks} + })} } value={formInput} @@ -38,14 +40,12 @@ export const FormExample: React.FC = () => { onClick={() => { setOpen(false); setFormInput(""); - }}> - Submit Feedback - + }}>{t('buttons.submit-feedback')}
-

Current Form Input:

+

{t('labels.current-form-input')}

             {formInput || "No input yet"}
diff --git a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx index 10fc247e3752d3..e87cd43593f682 100644 --- a/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx +++ b/apps/ui-playground/content/design/components/dropdown.buttonTrigger.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -24,17 +26,20 @@ const menuItems = [ kbd?: string; }[]; -export const ButtonTriggerExample: React.FC = () => ( +export const ButtonTriggerExample: React.FC = () => { +const t = useTranslations("dropdown-button-trigger-demo"); + +return (
{/* Default Button */}
- + - Actions + {t('labels.actions')} {menuItems.map((item) => ( {item.label} @@ -42,17 +47,17 @@ export const ButtonTriggerExample: React.FC = () => ( ))} - Default + {t('variants.default')}
{/* Button with Icon */}
- + - Quick Actions + {t('labels.quick-actions')} {menuItems.map((item) => ( {item.label} @@ -60,7 +65,7 @@ export const ButtonTriggerExample: React.FC = () => ( ))} - With Icon + {t('variants.with-icon')}
{/* Icon Button */} @@ -77,8 +82,9 @@ export const ButtonTriggerExample: React.FC = () => ( ))} - Icon Only + {t('variants.icon-only')}
-); +) +}; diff --git a/apps/ui-playground/content/design/components/dropdown.complex.tsx b/apps/ui-playground/content/design/components/dropdown.complex.tsx index fed3f374aa6cba..be5a35d0c0724d 100644 --- a/apps/ui-playground/content/design/components/dropdown.complex.tsx +++ b/apps/ui-playground/content/design/components/dropdown.complex.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -13,32 +15,35 @@ import { DropdownMenuSeparator, } from "@calcom/ui/components/dropdown"; -export const ComplexExample: React.FC = () => ( +export const ComplexExample: React.FC = () => { +const t = useTranslations("dropdown-complex-demo"); + +return (
{/* Example 1: Complex Menu Structure */}
- + - My account - Profile - Billing - Settings - Keyboard Shortcuts + {t('labels.my-account')} + {t('menu-items.profile')} + {t('menu-items.billing')} + {t('menu-items.settings')} + {t('menu-items.keyboard-shortcuts')} - Team - Invite users - New team + {t('labels.team')} + {t('menu-items.invite-users')} + {t('menu-items.new-team')} - Github - Support - API + {t('menu-items.github')} + {t('menu-items.support')} + {t('menu-items.api')} - Complex Menu + {t('captions.complex-menu')}
{/* Example 2: Avatar with Icons */} @@ -46,24 +51,22 @@ export const ComplexExample: React.FC = () => ( - peer@cal.com + {t('labels.user-email')} - My account - Plan - Billing - Integrations - Module + {t('menu-items.my-account')} + {t('menu-items.plan')} + {t('menu-items.billing-with-icon')} + {t('menu-items.integrations')} + {t('menu-items.module')} - - Log out - + {t('menu-items.log-out')} - With Icons + {t('captions.with-icons')}
{/* Example 3: Simple Actions */} @@ -73,14 +76,15 @@ export const ComplexExample: React.FC = () => (
-); +) +}; diff --git a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx index 876276957d6030..4169f0e17f82b7 100644 --- a/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx +++ b/apps/ui-playground/content/design/components/emptyScreen.customIcon.tsx @@ -1,18 +1,24 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -export const CustomIconExample: React.FC = () => ( +export const CustomIconExample: React.FC = () => { +const t = useTranslations("empty-screen-custom-icon-demo"); + +return ( alert("Add Members clicked")} /> -); +) +}; diff --git a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx index a51833bc0dc4d3..0d269577bec8eb 100644 --- a/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx +++ b/apps/ui-playground/content/design/components/emptyScreen.htmlContent.tsx @@ -1,28 +1,35 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { EmptyScreen } from "@calcom/ui/components/empty-screen"; -export const HtmlContentExample: React.FC = () => ( +export const HtmlContentExample: React.FC = () => { +const t = useTranslations("empty-screen-html-content-demo"); + +return ( - Custom Headline with HTML + {t.rich('headings.custom-with-html', { + component0: (chunks) => {chunks} + })} } description={
-

This is a custom description with multiple paragraphs.

-

- You can include any HTML content here. -

+

{t('descriptions.first-paragraph')}

+

{t.rich('descriptions.second-paragraph', { + component0: (chunks) => {chunks} + })}

} - buttonText="Learn More" + buttonText={t('buttons.learn-more')} buttonOnClick={() => alert("Learn More clicked")} /> -); +) +}; diff --git a/apps/ui-playground/content/design/components/form.basic.tsx b/apps/ui-playground/content/design/components/form.basic.tsx index 1768e7d50b03c7..57c740bf97c476 100644 --- a/apps/ui-playground/content/design/components/form.basic.tsx +++ b/apps/ui-playground/content/design/components/form.basic.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useForm } from "react-hook-form"; @@ -13,6 +15,8 @@ type FormValues = { }; export const BasicExample: React.FC = () => { +const t = useTranslations("form-basic-demo"); + const form = useForm({ defaultValues: { username: "", @@ -29,29 +33,25 @@ export const BasicExample: React.FC = () => {
- - + +
diff --git a/apps/ui-playground/content/design/components/form.specialFields.tsx b/apps/ui-playground/content/design/components/form.specialFields.tsx index 86dd9258e1b309..91930ea397e462 100644 --- a/apps/ui-playground/content/design/components/form.specialFields.tsx +++ b/apps/ui-playground/content/design/components/form.specialFields.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useForm } from "react-hook-form"; @@ -12,6 +14,8 @@ type FormValues = { }; export const SpecialFieldsExample: React.FC = () => { +const t = useTranslations("form-special-fields-demo"); + const form = useForm({ defaultValues: { age: undefined, @@ -27,25 +31,21 @@ export const SpecialFieldsExample: React.FC = () => {
- - + +
diff --git a/apps/ui-playground/content/design/components/input.values.tsx b/apps/ui-playground/content/design/components/input.values.tsx index c6835482c6439e..9c0466264175c6 100644 --- a/apps/ui-playground/content/design/components/input.values.tsx +++ b/apps/ui-playground/content/design/components/input.values.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,21 +12,25 @@ export const ValuesExample: React.FC = () => (
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("ui-playground-input-examples"); + +return (
-

Size: {size}

+

{t('size-label', { "size": size })}

-

Default Value

+

{t('default-value-heading')}

-

Placeholder

- +

{t('placeholder-heading')}

+
- ))} + ) +})}
diff --git a/apps/ui-playground/content/design/components/input.widths.tsx b/apps/ui-playground/content/design/components/input.widths.tsx index 804f31f466143b..00698d5f1b6ece 100644 --- a/apps/ui-playground/content/design/components/input.widths.tsx +++ b/apps/ui-playground/content/design/components/input.widths.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; @@ -10,21 +12,25 @@ export const WidthsExample: React.FC = () => (
- {sizes.map((size) => ( + {sizes.map((size) => { +const t = useTranslations("ui-playground-input-widths"); + +return (
-

Size: {size}

+

{t('size-label', { "size": size })}

-

Full Width

- +

{t('full-width-heading')}

+
-

Auto Width

- +

{t('auto-width-heading')}

+
- ))} + ) +})}
diff --git a/apps/ui-playground/content/design/components/multiInputField.states.tsx b/apps/ui-playground/content/design/components/multiInputField.states.tsx index 82f4c20678270e..ce43ab9a695c9e 100644 --- a/apps/ui-playground/content/design/components/multiInputField.states.tsx +++ b/apps/ui-playground/content/design/components/multiInputField.states.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useForm, FormProvider } from "react-hook-form"; @@ -12,6 +14,8 @@ type FormValues = { }; export const StatesExample: React.FC = () => { +const t = useTranslations("multi-input-field-states"); + const methods = useForm(); return ( @@ -20,7 +24,7 @@ export const StatesExample: React.FC = () => {
-

Default State

+

{t('states.default.heading')}

fieldArrayName="defaultOptions" optionPlaceholders={["First option", "Second option", "Third option"]} @@ -29,7 +33,7 @@ export const StatesExample: React.FC = () => {
-

Disabled State

+

{t('states.disabled.heading')}

fieldArrayName="disabledOptions" optionPlaceholders={["Disabled option 1", "Disabled option 2"]} @@ -39,7 +43,7 @@ export const StatesExample: React.FC = () => {
-

Minimum Options (2)

+

{t('states.minimum-options.heading')}

fieldArrayName="minOptions" optionPlaceholders={["Required option 1", "Required option 2", "Optional option"]} diff --git a/apps/ui-playground/content/design/components/navigation.items.tsx b/apps/ui-playground/content/design/components/navigation.items.tsx index cc716d34ee326b..f9345189819764 100644 --- a/apps/ui-playground/content/design/components/navigation.items.tsx +++ b/apps/ui-playground/content/design/components/navigation.items.tsx @@ -1,15 +1,20 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { Badge } from "@calcom/ui/components/badge"; import { NavigationItem } from "@calcom/ui/components/navigation"; -export const ItemsExample: React.FC = () => ( +export const ItemsExample: React.FC = () => { +const t = useTranslations("navigation-items-playground"); + +return (
-

Basic Items

+

{t('sections.basic-items')}

(
-

With Badge

+

{t('sections.with-badge')}

( name: "Teams", href: "#teams", icon: "users", - badge: New, + badge: {t('badges.new')}, }} />
-

Active State

+

{t('sections.active-state')}

(
-); +) +}; diff --git a/apps/ui-playground/content/design/components/rangeslider.popover.tsx b/apps/ui-playground/content/design/components/rangeslider.popover.tsx index 8805ed954871ab..d28b6edc1c1f73 100644 --- a/apps/ui-playground/content/design/components/rangeslider.popover.tsx +++ b/apps/ui-playground/content/design/components/rangeslider.popover.tsx @@ -1,4 +1,6 @@ "use client"; +import { useTranslations } from "next-intl"; + import { RenderComponentWithSnippet } from "@/app/components/render"; import { useState } from "react"; @@ -6,6 +8,8 @@ import { useState } from "react"; import { RangeSliderPopover } from "@calcom/ui/components/form"; export const PopoverExample: React.FC = () => { +const t = useTranslations("ui-playground-range-slider-popover"); + const [defaultRange, setDefaultRange] = useState([15, 30]); const [customRange, setCustomRange] = useState([5, 20]); const [largeRange, setLargeRange] = useState([0, 100]); @@ -14,9 +18,9 @@ export const PopoverExample: React.FC = () => {
-

Default Range (15-30 mins)

+

{t('examples.default-range-heading')}

{
-

Custom Range with Success Badge (5-20 mins)

+

{t('examples.custom-range-success-heading')}

{
-

Large Range with Warning Badge (0-100 mins)

+

{t('examples.large-range-warning-heading')}

{
-

Selected Values:

+

{t('results.selected-values-label')}

             {JSON.stringify(
               {
diff --git a/apps/ui-playground/content/design/components/section.basic.tsx b/apps/ui-playground/content/design/components/section.basic.tsx
index 5563890e15cf16..46a3bc2c502e79 100644
--- a/apps/ui-playground/content/design/components/section.basic.tsx
+++ b/apps/ui-playground/content/design/components/section.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -7,6 +9,8 @@ import { Switch } from "@calcom/ui/components/form";
 import { Section } from "@calcom/ui/components/section";
 
 export const BasicExample = () => {
+const t = useTranslations("section-basic-demo");
+
   const [isOpen, setIsOpen] = useState(true);
 
   return (
@@ -19,7 +23,7 @@ export const BasicExample = () => {
         
         {isOpen && (
           
-            
This is the main content of the section.

+            
{t('content.main-text')}

           
         )}
       
diff --git a/apps/ui-playground/content/design/components/select.async.tsx b/apps/ui-playground/content/design/components/select.async.tsx
index e6461cf60ac70f..60c6d758a82ae2 100644
--- a/apps/ui-playground/content/design/components/select.async.tsx
+++ b/apps/ui-playground/content/design/components/select.async.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useCallback, useState } from "react";
@@ -32,6 +34,8 @@ const searchCountries = (query: string) => {
 };
 
 export const AsyncExample: React.FC = () => {
+const t = useTranslations("ui-playground-select-async");
+
   const [asyncOptions, setAsyncOptions] = useState<{ value: string; label: string }[]>([]);
   const [isLoading, setIsLoading] = useState(false);
 
@@ -62,7 +66,7 @@ export const AsyncExample: React.FC = () => {
             }
           }}
           isLoading={isLoading}
-          placeholder="Search for a country..."
+          placeholder={t('placeholders.search-country')}
           noOptionsMessage={({ inputValue }) =>
             inputValue ? "No countries found" : "Start typing to search..."
           }
@@ -76,7 +80,7 @@ export const AsyncExample: React.FC = () => {
             }
           }}
           isLoading={isLoading}
-          placeholder="Search for a country... (small)"
+          placeholder={t('placeholders.search-country-small')}
           noOptionsMessage={({ inputValue }) =>
             inputValue ? "No countries found" : "Start typing to search..."
           }
diff --git a/apps/ui-playground/content/design/components/select.basic.tsx b/apps/ui-playground/content/design/components/select.basic.tsx
index eab7e3da644dcf..37c6598c0c351b 100644
--- a/apps/ui-playground/content/design/components/select.basic.tsx
+++ b/apps/ui-playground/content/design/components/select.basic.tsx
@@ -1,4 +1,6 @@
 "use client";
+import { useTranslations } from "next-intl";
+
 
 import { RenderComponentWithSnippet } from "@/app/components/render";
 import { useState } from "react";
@@ -14,6 +16,8 @@ const options = [
 ];
 
 export const BasicExample: React.FC = () => {
+const t = useTranslations("select-basic-demo");
+
   const [singleValue, setSingleValue] = useState<{ value: string; label: string } | null>(null);
 
   return (
@@ -24,7 +28,7 @@ export const BasicExample: React.FC = () => {
           value={singleValue}
           onChange={(newValue) => setSingleValue(newValue)}
           isClearable
-          placeholder="Choose a flavor..."
+          placeholder={t('placeholders.choose-flavor')}
           size="md"
         />
         
+      
+