diff --git a/website/src/components/BrowserWindow.tsx b/website/src/components/BrowserWindow.tsx index bcf1549a2..0e4ec32f8 100644 --- a/website/src/components/BrowserWindow.tsx +++ b/website/src/components/BrowserWindow.tsx @@ -14,6 +14,7 @@ interface Props { minHeight?: number; url: string; style?: CSSProperties; + styleStr?: string; bodyStyle?: CSSProperties; shadow?: boolean; } @@ -23,7 +24,8 @@ export function BrowserWindow({ minHeight, style, bodyStyle, - shadow = true + shadow = true, + styleStr }: Props) { return (
@@ -36,7 +38,11 @@ export function BrowserWindow({
- {shadow ? {children} : children} + {shadow ? ( + {children} + ) : ( + children + )}
); diff --git a/website/src/components/ShadowDomWrapper.tsx b/website/src/components/ShadowDomWrapper.tsx index c001ad6d6..4ad99e968 100644 --- a/website/src/components/ShadowDomWrapper.tsx +++ b/website/src/components/ShadowDomWrapper.tsx @@ -2,7 +2,13 @@ import style from "!raw-loader!react-day-picker/src/style.css"; import { useColorMode } from "@docusaurus/theme-common"; import root from "react-shadow"; -export function ShadowDomWrapper({ children }: { children: React.ReactNode }) { +export function ShadowDomWrapper({ + children, + styleStr +}: { + children: React.ReactNode; + styleStr: string; +}) { const colorMode = useColorMode(); return ( @@ -18,6 +24,7 @@ export function ShadowDomWrapper({ children }: { children: React.ReactNode }) { } `} )} + {styleStr && } ); } diff --git a/website/src/pages/playground.tsx b/website/src/pages/playground.tsx index 41a0f7f39..32b564ff0 100644 --- a/website/src/pages/playground.tsx +++ b/website/src/pages/playground.tsx @@ -105,21 +105,10 @@ export default function Playground() { locale: (props.locale as locales.Locale) ?? locales.enUS, timeZone: props.timeZone }); - const formatFn = calendar === "Persian" ? "formatPersian" : "formatGregorian"; return ( - DayPicker Playground
- + 
-                  {props.mode === "single" &&
-                    selected &&
-                    dateLib.format(selected as Date, "EEEE, d MMMM yyyy")}
+                  {props.mode === "single" && selected && (
+                    <>
+                      {String(selected)} -{" "}
+                      {dateLib.format(selected as Date, "EEEE, d MMMM yyyy")}
+                    
+                  )}
                   {props.mode === "multiple" &&
                     (selected as Date[] | undefined)?.map((date) => {
                       return (
                         <>
+                          {String(date)} -{" "}
                           {dateLib.format(date, "EEEE, d MMMM yyyy")}
                           

                         
@@ -607,12 +610,20 @@ export default function Playground() {
                   {props.mode === "range" && isDateRange(selected) && (
                     <>
                       From:{" "}
-                      {selected.from &&
-                        dateLib.format(selected.from, "EEEE, d MMMM yyyy")}
+                      {selected.from && (
+                        <>
+                          {String(selected.from)} -{" "}
+                          {dateLib.format(selected.from, "EEEE, d MMMM yyyy")}
+                        
+                      )}
                       

                       To: {"  "}
-                      {selected.to &&
-                        dateLib.format(selected.to, "EEEE, d MMMM yyyy")}
+                      {selected.to && (
+                        <>
+                          {String(selected.to)} -{" "}
+                          {dateLib.format(selected.to, "EEEE, d MMMM yyyy")}
+                        
+                      )}
                     
                   )}