website: update playground

gpbl · Dec 26, 2024 · b1cbfe8 · b1cbfe8
1 parent 99a45a9
commit b1cbfe8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 22 deletions.
diff --git 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 (
     <div className={styles.browserWindow} style={{ ...style, minHeight }}>
@@ -36,7 +38,11 @@ export function BrowserWindow({
       </div>
 
       <div className={styles.browserWindowBody} style={bodyStyle}>
-        {shadow ? <ShadowDomWrapper>{children}</ShadowDomWrapper> : children}
+        {shadow ? (
+          <ShadowDomWrapper styleStr={styleStr}>{children}</ShadowDomWrapper>
+        ) : (
+          children
+        )}
       </div>
     </div>
   );

diff --git 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 (
     <root.div>
@@ -18,6 +24,7 @@ export function ShadowDomWrapper({ children }: { children: React.ReactNode }) {
             }
           `}</style>
       )}
+      {styleStr && <style>{styleStr}</style>}
     </root.div>
   );
 }
diff --git 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 (
     <Layout>
       <Head>
-        <style>
-          {`
-          .rdp-root,
-          [data-theme="dark"] .rdp-root {
-            ${accentColor ? `--rdp-accent-color: ${accentColor} !important` : ""};
-            ${backgroundAccentColor ? `--rdp-accent-background-color: ${backgroundAccentColor} !important` : ""};
-            ${rangeMiddleColor ? `--rdp-range_middle-color: ${rangeMiddleColor} !important` : ""};
-          }
-        `}
-        </style>
         <title>DayPicker Playground</title>
         <meta
           name="description"
@@ -577,7 +566,17 @@ export default function Playground() {
           </fieldset>
         </form>
         <div className={styles.browserWindow}>
-          <BrowserWindow url="">
+          <BrowserWindow
+            url=""
+            styleStr={`
+          .rdp-root,
+          [data-theme="dark"] .rdp-root {
+            ${accentColor ? `--rdp-accent-color: ${accentColor} !important` : ""};
+            ${backgroundAccentColor ? `--rdp-accent-background-color: ${backgroundAccentColor} !important` : ""};
+            ${rangeMiddleColor ? `--rdp-range_middle-color: ${rangeMiddleColor} !important` : ""};
+          }
+        `}
+          >
             <DayPickerComponent
               {...props}
               onSelect={setSelected}
@@ -592,13 +591,17 @@ export default function Playground() {
             {selected ? (
               <div>
                 <pre>
-                  {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")}
                           <br />
                         </>
@@ -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")}
+                        </>
+                      )}
                       <br />
                       To: {"  "}
-                      {selected.to &&
-                        dateLib.format(selected.to, "EEEE, d MMMM yyyy")}
+                      {selected.to && (
+                        <>
+                          {String(selected.to)} -{" "}
+                          {dateLib.format(selected.to, "EEEE, d MMMM yyyy")}
+                        </>
+                      )}
                     </>
                   )}
                 </pre>