@linktr.ee/linkapp 0.0.21 → 0.0.23

package/dev-server/preview/Preview.tsx

@@ -1,5 +1,6 @@
 import { Portal } from "@radix-ui/react-portal";
-import { useCallback, useEffect, useRef, useState } from "react";
+import { useCallback, useEffect, useMemo, useRef, useState } from "react";
+import IframeResizer, { IFrameComponent } from "iframe-resizer-react";
 import {
   Dialog,
   DialogContent,
@@ -12,389 +13,102 @@ import {
   TabsList,
   TabsTrigger,
 } from "../components/ui/tabs";
-import { cn } from "../lib/utils";
-
-// Theme presets for testing
-// Based on actual CSS variables from live Linktree profiles
-const THEME_PRESETS = {
-  default: {
-    name: "Default (Light)",
-    variables: {
-      "--button-style-text": "#000000",
-      "--button-style-background": "#ffffff",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #ffffff 93%, #000000 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#000000",
-      "--button-style-radius": "8px",
-      "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
-      "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "8px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#eceef1",
-      "--background-contrast-color": "#000000",
-      "--bodyText": "#000000",
-      "--profileTitleText": "#000000",
-      "--profileDescriptionText": "#000000",
-      "--defaultAvatarBackground": "#000000",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#000000",
-      "--linkBackground": "#ffffff",
-      "--linkText": "#000000",
-      "--linkHoverBackground": "color-mix(in srgb, #ffffff 93%, #000000 7%)",
-      "--linkHoverText": "#000000",
-      "--linkShadow": "#000000",
-      "--bannerBackground": "#ffffff",
-      "--bannerText": "#000000",
-      "--desktop-frame-color": "color-mix(in srgb, #eceef1 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#000000",
-    },
-  },
-  dark: {
-    name: "Dark",
-    variables: {
-      "--button-style-text": "#ffffff",
-      "--button-style-background": "#1f2937",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#ffffff",
-      "--button-style-radius": "8px",
-      "--button-style-inner-radius": "min(8px, max(4px, calc(8px - 8px)))",
-      "--button-style-skeleton-color": "rgba(255, 255, 255, 0.1)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "8px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#111827",
-      "--background-contrast-color": "#ffffff",
-      "--bodyText": "#ffffff",
-      "--profileTitleText": "#ffffff",
-      "--profileDescriptionText": "#ffffff",
-      "--defaultAvatarBackground": "#ffffff",
-      "--defaultAvatarText": "#000000",
-      "--socialLinkFill": "#ffffff",
-      "--linkBackground": "#1f2937",
-      "--linkText": "#ffffff",
-      "--linkHoverBackground": "color-mix(in srgb, #1f2937 93%, #ffffff 7%)",
-      "--linkHoverText": "#ffffff",
-      "--linkShadow": "#000000",
-      "--bannerBackground": "#1f2937",
-      "--bannerText": "#ffffff",
-      "--desktop-frame-color": "color-mix(in srgb, #111827 88%, white 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#ffffff",
-    },
-  },
-  purple: {
-    name: "Purple",
-    variables: {
-      "--button-style-text": "#ffffff",
-      "--button-style-background": "#7c3aed",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#ede9fe",
-      "--button-style-radius": "16px",
-      "--button-style-inner-radius": "min(16px, max(4px, calc(16px - 8px)))",
-      "--button-style-skeleton-color": "rgba(124, 58, 237, 0.1)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "16px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#faf5ff",
-      "--background-contrast-color": "#1f2937",
-      "--bodyText": "#1f2937",
-      "--profileTitleText": "#1f2937",
-      "--profileDescriptionText": "#1f2937",
-      "--defaultAvatarBackground": "#7c3aed",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#1f2937",
-      "--linkBackground": "#7c3aed",
-      "--linkText": "#ffffff",
-      "--linkHoverBackground": "color-mix(in srgb, #7c3aed 93%, #ffffff 7%)",
-      "--linkHoverText": "#ffffff",
-      "--linkShadow": "#7c3aed",
-      "--bannerBackground": "#7c3aed",
-      "--bannerText": "#ffffff",
-      "--desktop-frame-color": "color-mix(in srgb, #faf5ff 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#1f2937",
-    },
-  },
-  outline: {
-    name: "Outline Style",
-    variables: {
-      "--button-style-text": "#000000",
-      "--button-style-background": "transparent",
-      "--button-style-background-hover": "rgba(0, 0, 0, 0.05)",
-      "--button-style-border": "2px solid currentColor",
-      "--button-style-border-color": "#000000",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#ffffff",
-      "--button-style-radius": "24px",
-      "--button-style-inner-radius": "min(24px, max(4px, calc(24px - 8px)))",
-      "--button-style-skeleton-color": "rgba(0, 0, 0, 0.05)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "24px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#ffffff",
-      "--background-contrast-color": "#000000",
-      "--bodyText": "#000000",
-      "--profileTitleText": "#000000",
-      "--profileDescriptionText": "#000000",
-      "--defaultAvatarBackground": "#000000",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#000000",
-      "--linkBackground": "transparent",
-      "--linkText": "#000000",
-      "--linkHoverBackground": "rgba(0, 0, 0, 0.05)",
-      "--linkHoverText": "#000000",
-      "--linkShadow": "#000000",
-      "--bannerBackground": "#ffffff",
-      "--bannerText": "#000000",
-      "--desktop-frame-color": "color-mix(in srgb, #ffffff 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#000000",
-    },
-  },
-  rounded: {
-    name: "Fully Rounded",
-    variables: {
-      "--button-style-text": "#ffffff",
-      "--button-style-background": "#059669",
-      "--button-style-background-hover":
-        "color-mix(in srgb, #059669 93%, #ffffff 7%)",
-      "--button-style-border": "none",
-      "--button-style-border-color": "transparent",
-      "--button-style-shadow": "none",
-      "--button-style-shadow-color": "#000000",
-      "--button-style-contrast-color": "#d1fae5",
-      "--button-style-radius": "9999px",
-      "--button-style-inner-radius": "9999px",
-      "--button-style-skeleton-color": "rgba(5, 150, 105, 0.1)",
-      "--link-gap": "14px",
-      "--link-inner-padding": "7px",
-      "--link-preview-thumbnail-width": "160px",
-      "--linkRadius": "9999px",
-      "--profile-container-desktop-width": "580px",
-      "--profileBackground": "#ecfdf5",
-      "--background-contrast-color": "#1f2937",
-      "--bodyText": "#1f2937",
-      "--profileTitleText": "#1f2937",
-      "--profileDescriptionText": "#1f2937",
-      "--defaultAvatarBackground": "#059669",
-      "--defaultAvatarText": "#ffffff",
-      "--socialLinkFill": "#1f2937",
-      "--linkBackground": "#059669",
-      "--linkText": "#ffffff",
-      "--linkHoverBackground": "color-mix(in srgb, #059669 93%, #ffffff 7%)",
-      "--linkHoverText": "#ffffff",
-      "--linkShadow": "#059669",
-      "--bannerBackground": "#059669",
-      "--bannerText": "#ffffff",
-      "--desktop-frame-color": "color-mix(in srgb, #ecfdf5 88%, black 12%)",
-      "--profileFontFamilyPrimary":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontFamilySecondary":
-        'Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--header-font-family":
-        'Link Sans Product, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
-      "--profileFontWeightNormal": "500",
-      "--profileFontWeightBold": "700",
-      "--profileDescriptionFontWeight": "500",
-      "--linkTextFontWeight": "500",
-      "--headerFontWeight": "700",
-      "--header-font-weight": "600",
-      "--embedLinkTextFontWeight": "500",
-      "--signupSubmitTextFontWeight": "700",
-      "--bannerFontWeight": "700",
-      "--headerFontSize": "normal",
-      "--header-bio-font-size": "16px",
-      "--embedLinkTextFontSize": "14px",
-      "--signupSubmitTextFontSize": "14px",
-      "--linkHeaderFontSize": "14px",
-      "--bannerFontSize": "14px",
-      "--profileDescriptionLineHeight": "1.5",
-      "--headerLineHeight": "1.5",
-      "--header-text-color": "#1f2937",
-    },
-  },
-};
+import { cn, renderCssVariables } from "../lib/utils";
+import { SettingsPreview } from "../components/SettingsPreview";
+import { THEME_PRESETS } from "../shared/theme-presets";
 
 export default function Preview() {
-  const [selectedTab, setSelectedTab] = useState<"classic" | "featured">(
-    "classic",
-  );
-  const [selectedTheme, setSelectedTheme] =
-    useState<keyof typeof THEME_PRESETS>("default");
-  const classicIframeRef = useRef<HTMLIFrameElement>(null);
-  const featuredIframeRef = useRef<HTMLIFrameElement>(null);
+  // Initialize state from localStorage
+  const [selectedTab, setSelectedTab] = useState<"sheet" | "featured" | "settings">(() => {
+    const saved = localStorage.getItem("linkapp-preview-tab");
+    return (saved as "sheet" | "featured" | "settings") || "sheet";
+  });
+  const [selectedTheme, setSelectedTheme] = useState<keyof typeof THEME_PRESETS>(() => {
+    const saved = localStorage.getItem("linkapp-preview-theme");
+    return (saved as keyof typeof THEME_PRESETS) || "default";
+  });
+  const [selectedGroupLayoutOption, setSelectedGroupLayoutOption] = useState<string | undefined>(() => {
+    const saved = localStorage.getItem("linkapp-preview-groupLayoutOption");
+    return saved || undefined;
+  });
 
-  // Send theme update to iframe
-  const sendThemeUpdate = useCallback(
-    (
-      iframe: HTMLIFrameElement | null,
-      themeName: keyof typeof THEME_PRESETS,
-    ) => {
-      if (!iframe || !iframe.contentWindow) return;
+  // Popup dialog state
+  const [isPopupOpen, setIsPopupOpen] = useState(false);
 
-      const theme = THEME_PRESETS[themeName];
-      const message = {
-        type: "THEME_UPDATE",
-        payload: {
-          name: themeName,
-          variables: theme.variables,
-        },
-      };
+  // Generate unique IDs for iframes using timestamp
+  const sheetIframeId = useMemo(() => `preview-iframe-sheet-${Date.now()}`, []);
+  const featuredIframeId = useMemo(() => `preview-iframe-featured-${Date.now()}`, []);
+  const popupIframeId = useMemo(() => `preview-iframe-popup-${Date.now()}`, []);
 
-      iframe.contentWindow.postMessage(message, "*");
-    },
-    [],
-  );
+  // Save selected tab to localStorage
+  useEffect(() => {
+    localStorage.setItem("linkapp-preview-tab", selectedTab);
+  }, [selectedTab]);
+
+  // Save selected theme to localStorage
+  useEffect(() => {
+    localStorage.setItem("linkapp-preview-theme", selectedTheme);
+  }, [selectedTheme]);
 
-  // Send theme update when theme changes or iframes load
+  // Save selected groupLayoutOption to localStorage
   useEffect(() => {
-    const classicIframe = classicIframeRef.current;
-    const featuredIframe = featuredIframeRef.current;
+    if (selectedGroupLayoutOption) {
+      localStorage.setItem("linkapp-preview-groupLayoutOption", selectedGroupLayoutOption);
+    } else {
+      localStorage.removeItem("linkapp-preview-groupLayoutOption");
+    }
+  }, [selectedGroupLayoutOption]);
+
+  // Handle iframe resize events
+  const handleResized = useCallback(
+    (ev: { iframe: IFrameComponent; height: number; width: number; type: string }): void => {
+      // IframeResizer automatically handles height adjustments
+      // This callback is available for debugging if needed
+    },
+    []
+  );
 
-    const handleClassicLoad = () =>
-      sendThemeUpdate(classicIframe, selectedTheme);
-    const handleFeaturedLoad = () =>
-      sendThemeUpdate(featuredIframe, selectedTheme);
+  // Handle postMessage from featured iframe for OPEN_POPUP
+  const handleMessage = useCallback((event: MessageEvent) => {
+    if (
+      event.data &&
+      typeof event.data === 'object' &&
+      event.data.source === 'linkapp' &&
+      event.data.type === 'OPEN_POPUP'
+    ) {
+      setIsPopupOpen(true);
+    }
+  }, []);
 
-    // Send to already loaded iframes
-    sendThemeUpdate(classicIframe, selectedTheme);
-    sendThemeUpdate(featuredIframe, selectedTheme);
+  // Add message listener
+  useEffect(() => {
+    window.addEventListener('message', handleMessage);
+    return () => window.removeEventListener('message', handleMessage);
+  }, [handleMessage]);
 
-    // Listen for iframe load events
-    classicIframe?.addEventListener("load", handleClassicLoad);
-    featuredIframe?.addEventListener("load", handleFeaturedLoad);
 
-    return () => {
-      classicIframe?.removeEventListener("load", handleClassicLoad);
-      featuredIframe?.removeEventListener("load", handleFeaturedLoad);
-    };
-  }, [selectedTheme, sendThemeUpdate]);
+  const renderedCssVariables = useMemo(() => {
+    const themeVariables = THEME_PRESETS[selectedTheme] || THEME_PRESETS.default
+    return renderCssVariables(themeVariables.variables);
+  }, [selectedTheme])
 
   return (
+    <>
+      <style>{`:root {
+        ${renderedCssVariables}
+        }`}</style>
+
     <div
       className={cn("min-h-screen", {
         "bg-black/50": selectedTab === "classic",
-        "bg-gray-200": selectedTab === "featured",
+        "bg-linktree-frame": selectedTab === "featured",
       })}
       id="preview"
     >
       <Tabs
         value={selectedTab}
         onValueChange={(value) =>
-          setSelectedTab(value as "classic" | "featured")
+          setSelectedTab(value as "sheet" | "featured" | "settings")
         }
       >
         <Portal>
@@ -403,8 +117,9 @@ export default function Preview() {
             style={{ zIndex: 1000000 }}
           >
             <TabsList>
-              <TabsTrigger value="classic">Classic</TabsTrigger>
+              <TabsTrigger value="sheet">Sheet</TabsTrigger>
               <TabsTrigger value="featured">Featured</TabsTrigger>
+              <TabsTrigger value="settings">Settings</TabsTrigger>
             </TabsList>
 
             {/* Theme Switcher */}
@@ -427,29 +142,66 @@ export default function Preview() {
                 ))}
               </select>
             </div>
+
+            {/* Group Layout Option Switcher - Only show for Featured tab */}
+            {selectedTab === "featured" && (
+              <div className="flex items-center gap-2">
+                <label htmlFor="groupLayoutOption-select" className="text-sm font-medium">
+                  Layout:
+                </label>
+                <select
+                  id="groupLayoutOption-select"
+                  value={selectedGroupLayoutOption || "default"}
+                  onChange={(e) =>
+                    setSelectedGroupLayoutOption(e.target.value === "default" ? undefined : e.target.value)
+                  }
+                  className="h-9 px-3 py-1 text-sm border border-input bg-background rounded-md focus:outline-none focus:ring-2 focus:ring-ring"
+                >
+                  <option value="default">Default</option>
+                  <option value="carousel">Carousel</option>
+                </select>
+              </div>
+            )}
           </div>
         </Portal>
 
         {/* Main Content with Padding for Fixed Tabs */}
         <div className="pt-20">
-          <TabsContent value="classic" className="m-0">
-            {/* Classic Modal - Always Open */}
+          <TabsContent value="sheet" className="m-0">
+            {/* Sheet Modal - Always Open */}
             <Dialog open={true} modal={false}>
               <DialogContent
-                className="max-w-[512px] max-h-[calc(100%-64px)] overflow-auto"
+                className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
                 showCloseButton={false}
               >
                 <DialogHeader className="sticky top-0 bg-white px-4">
-                  <DialogTitle>Classic Layout Preview</DialogTitle>
+                  <div className="grid h-16 grid-cols-[32px_auto_32px] items-center gap-4">
+                    <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"></path></svg>
+                    </button>
+
+                    <DialogTitle className="self-center truncate py-3 text-center">
+                      Sheet
+                    </DialogTitle>
+
+                    <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
+                      <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"></path></svg>
+                    </button>
+                  </div>
                 </DialogHeader>
 
-                <div className="mt-4">
-                  <iframe
-                    ref={classicIframeRef}
-                    src="/classic"
-                    className="w-full h-[600px] border-0 rounded-lg"
-                    title="Classic Layout Preview"
-                  />
+                <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
+                  <div className="h-full overflow-y-auto overflow-x-hidden">
+                    <IframeResizer
+                      key={`sheet-${selectedTheme}`}
+                      id={sheetIframeId}
+                      src={`/sheet?theme=${selectedTheme}`}
+                      style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
+                      checkOrigin={false}
+                      onResized={handleResized}
+                      heightCalculationMethod="max"
+                    />
+                  </div>
                 </div>
               </DialogContent>
             </Dialog>
@@ -457,19 +209,68 @@ export default function Preview() {
 
           <TabsContent value="featured" className="m-0 flex justify-center p-8">
             {/* Featured Iframe - Max Width 524px */}
-            <div className="w-full max-w-[580px] shadow-xl flex flex-col rounded-3xl px-[28px] py-7 items-center bg-gray-100">
+            <div className="w-full max-w-[580px] flex flex-col px-[28px] py-7 items-center bg-linktree-profile-bg">
+
               <div className="w-full max-w-[524px]">
-                <iframe
-                  ref={featuredIframeRef}
-                  src="/featured"
-                  className="w-full border-0 rounded-lg"
-                  title="Featured Layout Preview"
-                />
+                <div className="bg-linktree-button-bg hover:bg-linktree-button-bg-hover border-linktree-button-border text-linktree-button-text rounded-linktree-button shadow-linktree-button overflow-hidden">
+                  <IframeResizer
+                    key={`featured-${selectedTheme}-${selectedGroupLayoutOption || 'default'}`}
+                    id={featuredIframeId}
+                    src={`/featured?theme=${selectedTheme}${selectedGroupLayoutOption ? `&groupLayoutOption=${selectedGroupLayoutOption}` : ''}`}
+                    style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
+                    checkOrigin={false}
+                    onResized={handleResized}
+                    heightCalculationMethod="max"
+                  />
+                </div>
               </div>
             </div>
           </TabsContent>
+
+          <TabsContent value="settings" className="m-0">
+            <SettingsPreview settings={__SETTINGS_CONFIG__} />
+          </TabsContent>
         </div>
       </Tabs>
+
+      {/* Popup Dialog for OPEN_POPUP message */}
+      <Dialog open={isPopupOpen} onOpenChange={setIsPopupOpen} modal={false}>
+        <DialogContent
+          className="h-[calc(100dvh-2rem)] max-w-[608px] md:min-h-[25vh] md:h-[80%] md:max-h-[900px] overflow-auto"
+          showCloseButton={false}
+        >
+          <DialogHeader className="sticky top-0 bg-white px-4">
+            <div className="grid h-16 grid-cols-[32px_auto_32px] items-center gap-4">
+              <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m10.65 3.85.35.36.7-.71-.35-.35-3-3h-.7l-3 3-.36.35.71.7.35-.35L7.5 1.71V10h1V1.7l2.15 2.15ZM1 5.5l.5-.5H4v1H2v9h12V6h-2V5h2.5l.5.5v10l-.5.5h-13l-.5-.5v-10Z"></path></svg>
+              </button>
+
+              <DialogTitle className="self-center truncate py-3 text-center">
+                Sheet
+              </DialogTitle>
+
+              <button className="flex size-8 items-center justify-center rounded-sm focus-visible:outline-none">
+                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg" className=" " role="img" aria-hidden="true"><path fill="currentColor" d="m13.63 3.12.37-.38-.74-.74-.38.37.75.75ZM2.37 12.89l-.37.37.74.74.38-.37-.75-.75Zm.75-10.52L2.74 2 2 2.74l.37.38.75-.75Zm9.76 11.26.38.37.74-.74-.37-.38-.75.75Zm0-11.26L2.38 12.9l.74.74 10.5-10.51-.74-.75Zm-10.5.75 10.5 10.5.75-.73L3.12 2.37l-.75.75Z"></path></svg>
+              </button>
+            </div>
+          </DialogHeader>
+
+          <div className="flex h-[calc(100%-64px)] flex-1 flex-col justify-between overflow-hidden">
+            <div className="h-full overflow-y-auto overflow-x-hidden">
+              <IframeResizer
+                key={`popup-${selectedTheme}`}
+                id={popupIframeId}
+                src={`/sheet?theme=${selectedTheme}`}
+                style={{ height: '0px', width: '1px', minWidth: '100%', border: 0 }}
+                checkOrigin={false}
+                onResized={handleResized}
+                heightCalculationMethod="max"
+              />
+            </div>
+          </div>
+        </DialogContent>
+      </Dialog>
     </div>
+    </>
   );
 }