feat: linkedin preview

QuiiBz · Apr 13, 2024 · 98c0a7e · 98c0a7e
1 parent afc1af2
commit 98c0a7e
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 9 deletions.
diff --git a/apps/dashboard/src/components/ExportModal/Preview.tsx b/apps/dashboard/src/components/ExportModal/Preview.tsx
@@ -9,7 +9,7 @@ interface PreviewProps {
 }
 
 export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
-  const [preview, setPreview] = useState<"x" | "linkedin" | "facebook">("x");
+  const [preview, setPreview] = useState<"x" | "linkedin">("x");
   const elements = useElementsStore((state) => state.elements);
 
   return (
@@ -29,9 +29,6 @@ export function Preview({ dynamicTexts, setDynamicTexts }: PreviewProps) {
             <SegmentedControl.Item value="linkedin">
               LinkedIn
             </SegmentedControl.Item>
-            <SegmentedControl.Item value="facebook">
-              Facebook
-            </SegmentedControl.Item>
           </SegmentedControl.Root>
         </Flex>
       </Flex>

diff --git a/apps/dashboard/src/components/OgImage.tsx b/apps/dashboard/src/components/OgImage.tsx
@@ -81,7 +81,7 @@ interface OgImageProps {
   deletable?: (event: MouseEvent<HTMLSpanElement>) => void;
   size?: "small" | "medium";
   client?: boolean;
-  preview?: "x" | "linkedin" | "facebook";
+  preview?: "x" | "linkedin";
 }
 
 export function OgImage({
@@ -103,11 +103,12 @@ export function OgImage({
   return (
     <Tag
       className={clsx(
-        "h-[157px] w-[300px] min-w-[300px] flex items-center justify-center rounded relative group overflow-hidden",
+        "min-h-[157px] w-[300px] min-w-[300px] flex flex-col items-center justify-center rounded relative group overflow-hidden",
         {
-          "h-[157px] w-[300px] min-w-[300px]": size === "small",
-          "h-[252px] w-[480px] min-w-[480px]": size === "medium",
-          "rounded-2xl": preview === "x", // X has a 16px border radius
+          "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-md": preview === "linkedin",
         },
       )}
       href={href ?? ""}
@@ -184,6 +185,22 @@ export function OgImage({
           Your page title
         </span>
       ) : null}
+      {preview === "linkedin" ? (
+        <div
+          className="px-3 py-2 w-full flex flex-col gap-2"
+          style={{ backgroundColor: "rgb(237, 243, 248)" }}
+        >
+          <span
+            className="text-sm font-semibold"
+            style={{ color: "rgba(0, 0, 0, 0.9)" }}
+          >
+            Your page title
+          </span>
+          <span className="text-xs" style={{ color: "rgba(0, 0, 0, 0.6)" }}>
+            website.com
+          </span>
+        </div>
+      ) : null}
     </Tag>
   );
 }