feat: preview on template splash (#85)

QuiiBz · Apr 14, 2024 · 9f1d957 · 9f1d957
1 parent 7387ca4
commit 9f1d957
Show file tree

Hide file tree

Showing 10 changed files with 97 additions and 30 deletions.
diff --git a/apps/dashboard/public/images/linkedin.png b/apps/dashboard/public/images/linkedin.png
diff --git a/apps/dashboard/public/images/x.png b/apps/dashboard/public/images/x.png
diff --git a/apps/dashboard/src/components/ExportModal/Embed.tsx b/apps/dashboard/src/components/ExportModal/Embed.tsx
@@ -10,6 +10,7 @@ import {
   Tooltip,
   IconButton,
 } from "@radix-ui/themes";
+import { toast } from "sonner";
 import { useUser } from "../../lib/hooks/useUser";
 import { CopyIcon } from "../icons/CopyIcon";
 
@@ -69,6 +70,8 @@ export function Embed({ exportedKey, dynamicTexts }: EmbedProps) {
 
     if (embed?.textContent) {
       void navigator.clipboard.writeText(embed.textContent);
+
+      toast.success("Copied to clipboard!");
     }
   }
 

diff --git a/apps/dashboard/src/components/ExportModal/Preview.tsx b/apps/dashboard/src/components/ExportModal/Preview.tsx
@@ -1,36 +1,23 @@
-import { Flex, SegmentedControl, Text, TextField } from "@radix-ui/themes";
-import { startTransition, useState } from "react";
+import { Flex, Text, TextField } from "@radix-ui/themes";
+import { startTransition } from "react";
 import { OgImage } from "../OgImage";
 import { useElementsStore } from "../../stores/elementsStore";
+import { usePreviewControls } from "../../lib/hooks/usePreviewControls";
 
 interface PreviewProps {
   dynamicTexts: Record<string, string>;
   setDynamicTexts: (dynamicTexts: Record<string, string>) => void;
 }
 
 export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
-  const [preview, setPreview] = useState<"x" | "linkedin">("x");
+  const { preview, PreviewControls } = usePreviewControls();
   const elements = useElementsStore((state) => state.elements);
 
   return (
     <Flex direction="column" gap="4">
       <Flex align="center" justify="between">
         <Text size="5">Preview</Text>
-        <Flex align="center" gap="4">
-          <SegmentedControl.Root
-            onValueChange={(value) => {
-              startTransition(() => {
-                setPreview(value as typeof preview);
-              });
-            }}
-            value={preview}
-          >
-            <SegmentedControl.Item value="x">X (Twitter)</SegmentedControl.Item>
-            <SegmentedControl.Item value="linkedin">
-              LinkedIn
-            </SegmentedControl.Item>
-          </SegmentedControl.Root>
-        </Flex>
+        <PreviewControls />
       </Flex>
       <Flex gap="6" justify="between">
         <OgImage

diff --git a/apps/dashboard/src/components/OgImage.tsx b/apps/dashboard/src/components/OgImage.tsx
@@ -44,7 +44,7 @@ function OgImageInnerClient({
   return <img alt="" src={src} />;
 }
 
-async function OgImageInnerServer({
+export async function OgImageInnerServer({
   elements,
   dynamicTexts,
   mockDynamicTexts,

diff --git a/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx b/apps/dashboard/src/components/Splash/HomeSplashMyImages.tsx
@@ -30,10 +30,12 @@ export function HomeSplashMyImages() {
             router.push(`/editor/${id}`);
           }}
         >
-          <AddIcon height="1.4em" width="1.4em" />
-          <Text as="span" size="2">
-            Start from scratch
-          </Text>
+          <Flex align="center" gap="1">
+            <AddIcon height="1.4em" width="1.4em" />
+            <Text as="span" size="2">
+              Start from scratch
+            </Text>
+          </Flex>
         </OgImage>
         {images.slice(0, 2).map((image) => (
           <OgImage

diff --git a/apps/dashboard/src/components/Splash/MyImagesSplash.tsx b/apps/dashboard/src/components/Splash/MyImagesSplash.tsx
@@ -34,10 +34,12 @@ export function MyImagesSplash() {
             router.push(`/editor/${id}`);
           }}
         >
-          <AddIcon height="1.4em" width="1.4em" />
-          <Text as="span" size="2">
-            Start from scratch
-          </Text>
+          <Flex align="center" gap="1">
+            <AddIcon height="1.4em" width="1.4em" />
+            <Text as="span" size="2">
+              Start from scratch
+            </Text>
+          </Flex>
         </OgImage>
         {images.map((image) => (
           <OgImage

diff --git a/apps/dashboard/src/components/Splash/TemplateSplash.tsx b/apps/dashboard/src/components/Splash/TemplateSplash.tsx
@@ -2,8 +2,9 @@ import Link from "next/link";
 import { Button, Flex, Text } from "@radix-ui/themes";
 import { ArrowLeftIcon } from "../icons/ArrowLeftIcon";
 import type { Template } from "../../lib/templates";
-import { OgImage } from "../OgImage";
+import { OgImageInnerServer } from "../OgImage";
 import { TemplateSplashButton } from "./TemplateSplashButton";
+import { TemplateSplashPreview } from "./TemplateSplashPreview";
 
 interface TemplateSplashProps {
   template: Template;
@@ -21,8 +22,10 @@ export function TemplateSplash({ template }: TemplateSplashProps) {
           </Link>
         </Button>
       </Flex>
-      <Flex gap="4" justify="between">
-        <OgImage elements={template.elements} size="medium" />
+      <Flex gap="8" justify="between">
+        <TemplateSplashPreview
+          image={<OgImageInnerServer elements={template.elements} />}
+        />
         <Flex direction="column" gap="4">
           <Text as="p" size="2">
             {template.description}

diff --git a/apps/dashboard/src/components/Splash/TemplateSplashPreview.tsx b/apps/dashboard/src/components/Splash/TemplateSplashPreview.tsx
@@ -0,0 +1,22 @@
+"use client";
+import { Flex } from "@radix-ui/themes";
+import type { ReactNode } from "react";
+import { OgImage } from "../OgImage";
+import { usePreviewControls } from "../../lib/hooks/usePreviewControls";
+
+interface TemplateSplashPreviewProps {
+  image: ReactNode;
+}
+
+export function TemplateSplashPreview({ image }: TemplateSplashPreviewProps) {
+  const { preview, PreviewControls } = usePreviewControls();
+
+  return (
+    <Flex direction="column" gap="4">
+      <OgImage preview={preview} size="medium">
+        {image}
+      </OgImage>
+      <PreviewControls />
+    </Flex>
+  );
+}
diff --git a/apps/dashboard/src/lib/hooks/usePreviewControls.tsx b/apps/dashboard/src/lib/hooks/usePreviewControls.tsx
@@ -0,0 +1,48 @@
+import { Flex, SegmentedControl } from "@radix-ui/themes";
+import Image from "next/image";
+import { useMemo, useState } from "react";
+
+export function usePreviewControls() {
+  const [preview, setPreview] = useState<"x" | "linkedin">("x");
+
+  const PreviewControls = useMemo(() => {
+    return function Controls() {
+      return (
+        <SegmentedControl.Root
+          onValueChange={(value) => {
+            setPreview(value as typeof preview);
+          }}
+          value={preview}
+        >
+          <SegmentedControl.Item value="x">
+            <Flex align="center" gap="1">
+              <Image
+                alt="X (Twitter) logo"
+                height="16"
+                src="/images/x.png"
+                width="16"
+              />
+              X (Twitter)
+            </Flex>
+          </SegmentedControl.Item>
+          <SegmentedControl.Item value="linkedin">
+            <Flex align="center" gap="1">
+              <Image
+                alt="LinkedIn logo"
+                height="16"
+                src="/images/linkedin.png"
+                width="16"
+              />
+              LinkedIn
+            </Flex>
+          </SegmentedControl.Item>
+        </SegmentedControl.Root>
+      );
+    };
+  }, [preview]);
+
+  return {
+    preview,
+    PreviewControls,
+  };
+}