feat: Slack preview, better export modal (#109)

QuiiBz · Dec 1, 2024 · 59cf894 · 59cf894
1 parent ccdee41
commit 59cf894
Show file tree

Hide file tree

Showing 10 changed files with 61 additions and 34 deletions.
diff --git a/apps/dashboard/public/images/slack.png b/apps/dashboard/public/images/slack.png
diff --git a/apps/dashboard/public/images/x.png → apps/dashboard/public/images/x-dark.png b/apps/dashboard/public/images/x.png → apps/dashboard/public/images/x-dark.png
diff --git a/apps/dashboard/public/images/x-light.png b/apps/dashboard/public/images/x-light.png
diff --git a/apps/dashboard/src/components/ExportModal/Download.tsx b/apps/dashboard/src/components/ExportModal/Download.tsx
@@ -58,24 +58,24 @@ export function Download({ dynamicTexts }: DownloadProps) {
   return (
     <Flex direction="column" gap="4">
       <Text size="5">Download</Text>
-      <Flex direction="column" gap="2">
+      <Flex gap="2" mt="2">
         <Button
-          color="gray"
+          color="green"
           disabled={isLoading}
           onClick={() => exportSvg()}
           variant="soft"
         >
           <SvgIcon />
-          Download as SVG
+          Download SVG
         </Button>
         <Button
-          color="gray"
+          color="green"
           disabled={isLoading}
           onClick={() => exportPng()}
           variant="soft"
         >
           <PngIcon />
-          Download as PNG
+          Download PNG
         </Button>
       </Flex>
     </Flex>

diff --git a/apps/dashboard/src/components/ExportModal/ExportURL.tsx b/apps/dashboard/src/components/ExportModal/ExportURL.tsx
@@ -49,11 +49,11 @@ export function ExportURL({ exportedKey, dynamicTexts }: ExportURLProps) {
 
   const code = (
     <Code
-      className="p-3 overflow-x-scroll whitespace-nowrap"
+      className="p-3 overflow-x-scroll whitespace-nowrap no-scrollbar"
       color="gray"
       highContrast
       id="embed-code"
-      size="4"
+      size="2"
     >
       {type === "html" ? (
         <>
@@ -76,7 +76,7 @@ export function ExportURL({ exportedKey, dynamicTexts }: ExportURLProps) {
   }
 
   return (
-    <Flex direction="column" gap="4" maxWidth="70%">
+    <Flex direction="column" gap="4" maxWidth="60%">
       <Flex align="center" justify="between">
         <Text size="5">Export to URL</Text>
         <Flex align="center" gap="4">

diff --git a/apps/dashboard/src/components/ExportModal/Preview.tsx b/apps/dashboard/src/components/ExportModal/Preview.tsx
@@ -15,22 +15,29 @@ export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
 
   return (
     <Flex direction="column" gap="4">
-      <Flex align="center" justify="between">
-        <Text size="5">Preview</Text>
-        <PreviewControls />
-      </Flex>
-      <Flex gap="6" justify="between">
-        <OgImage
-          client
-          dynamicTexts={dynamicTexts}
-          elements={elements}
-          preview={preview}
-          size="medium"
-        />
-        <Flex direction="column" flexGrow="1" gap="4">
+      <Text size="5">Live Preview</Text>
+      <Flex gap="6" justify="between" align="start" minHeight="353px">
+        <Flex direction="column" gap="2">
+          <PreviewControls />
+          <OgImage
+            client
+            dynamicTexts={dynamicTexts}
+            elements={elements}
+            preview={preview}
+            size="medium"
+          />
+        </Flex>
+        <Flex direction="column" flexGrow="1" gap="4" mt="7">
+          {Object.keys(dynamicTexts).length === 0 ? (
+            <Text as="p" size="2">
+              No dynamic texts found.
+            </Text>
+          ) : null}
           {Object.entries(dynamicTexts).map(([key, value]) => (
-            <Flex direction="column" gap="2" key={key}>
-              <Text size="1">{key}</Text>
+            <Flex direction="column" gap="1" key={key}>
+              <Text as="p" size="1">
+                {key}
+              </Text>
               <TextField.Root
                 defaultValue={value}
                 onChange={(event) => {

diff --git a/apps/dashboard/src/components/ExportModal/index.tsx b/apps/dashboard/src/components/ExportModal/index.tsx
@@ -1,5 +1,5 @@
 import { useEffect, useMemo, useState } from "react";
-import { Text, Button, Flex, Dialog, Separator } from "@radix-ui/themes";
+import { Button, Flex, Dialog, Separator } from "@radix-ui/themes";
 import { useElementsStore } from "../../stores/elementsStore";
 import type {
   ExportRequest,
@@ -58,19 +58,21 @@ export function ExportModal() {
     <>
       <Flex direction="column" gap="4">
         <Flex align="center" justify="between">
-          <Text size="6">Export image</Text>
+          <Dialog.Title size="6" weight="regular" mb="0">
+            Export image
+          </Dialog.Title>
           <Dialog.Close>
             <Button color="gray" radius="full" variant="ghost">
               <ArrowLeftIcon />
               Continue editing
             </Button>
           </Dialog.Close>
         </Flex>
-        <Text as="p" className="w-2/3" size="2">
+        <Dialog.Description className="w-2/3" size="2">
           Export your Open Graph image to SVG, PNG or an URL that you can then
           use in your website. You can also see a preview of the OG Image and
           edit any dynamic text in real-time.
-        </Text>
+        </Dialog.Description>
       </Flex>
       <Separator className="opacity-50" my="6" size="4" />
       <Preview dynamicTexts={dynamicTexts} setDynamicTexts={setDynamicTexts} />

diff --git a/apps/dashboard/src/components/OgImage.tsx b/apps/dashboard/src/components/OgImage.tsx
@@ -80,7 +80,7 @@ interface OgImageProps {
   deletable?: (event: MouseEvent<HTMLSpanElement>) => void;
   size?: "small" | "medium";
   client?: boolean;
-  preview?: "x" | "linkedin";
+  preview?: "x" | "slack" | "linkedin";
   className?: string;
 }
 
@@ -110,6 +110,7 @@ export function OgImage({
           "min-h-[157px] w-[300px] min-w-[300px]": size === "small",
           "min-h-[252px] w-[480px] min-w-[480px]": size === "medium",
           "rounded-2xl": preview === "x",
+          "rounded-lg": preview === "slack",
           "rounded-md": preview === "linkedin",
         },
       )}
@@ -182,7 +183,7 @@ export function OgImage({
       ) : null}
       {preview === "x" ? (
         <span
-          className="absolute bottom-3 left-3 text-white h-5 px-1 rounded text-[13px]"
+          className="absolute bottom-3 left-3 text-white h-5 px-2 rounded text-[13px]"
           style={{ backgroundColor: "rgba(0, 0, 0, 0.77)" }}
         >
           Your page title

diff --git a/apps/dashboard/src/components/Splash/TemplateSplashPreview.tsx b/apps/dashboard/src/components/Splash/TemplateSplashPreview.tsx
@@ -27,11 +27,11 @@ export function TemplateSplashPreview({ image }: TemplateSplashPreviewProps) {
   }, []);
 
   return (
-    <Flex direction="column" gap="4">
+    <Flex direction="column" gap="2">
+      <PreviewControls />
       <OgImage preview={preview} size={isMobile ? "small" : "medium"}>
         {image}
       </OgImage>
-      <PreviewControls />
     </Flex>
   );
 }
diff --git a/apps/dashboard/src/lib/hooks/usePreviewControls.tsx b/apps/dashboard/src/lib/hooks/usePreviewControls.tsx
@@ -1,9 +1,11 @@
 import { Flex, SegmentedControl } from "@radix-ui/themes";
+import { useTheme } from "next-themes";
 import Image from "next/image";
 import { useMemo, useState } from "react";
 
 export function usePreviewControls() {
-  const [preview, setPreview] = useState<"x" | "linkedin">("x");
+  const [preview, setPreview] = useState<"x" | "slack" | "linkedin">("x");
+  const { resolvedTheme } = useTheme();
 
   const PreviewControls = useMemo(() => {
     return function Controls() {
@@ -19,12 +21,27 @@ export function usePreviewControls() {
               <Image
                 alt="X (Twitter) logo"
                 height="16"
-                src="/images/x.png"
+                src={
+                  resolvedTheme === "dark"
+                    ? "/images/x-light.png"
+                    : "/images/x-dark.png"
+                }
                 width="16"
               />
               X (Twitter)
             </Flex>
           </SegmentedControl.Item>
+          <SegmentedControl.Item value="slack">
+            <Flex align="center" gap="1">
+              <Image
+                alt="Slack logo"
+                height="16"
+                src="/images/slack.png"
+                width="16"
+              />
+              Slack
+            </Flex>
+          </SegmentedControl.Item>
           <SegmentedControl.Item value="linkedin">
             <Flex align="center" gap="1">
               <Image
@@ -39,7 +56,7 @@ export function usePreviewControls() {
         </SegmentedControl.Root>
       );
     };
-  }, [preview]);
+  }, [preview, resolvedTheme]);
 
   return {
     preview,