fix preview

VictorVation · May 18, 2023 · f4b94c9 · f4b94c9 · vercel · May 18, 2023
1 parent 311be52
commit f4b94c9
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 24 deletions.
diff --git a/app/editor/[siteId]/SiteSettingsCard.tsx b/app/editor/[siteId]/SiteSettingsCard.tsx
@@ -1,6 +1,12 @@
 "use client";
 
-import { X, Loader2, ChevronsUpDownIcon, Palette } from "lucide-react";
+import {
+  X,
+  Loader2,
+  ChevronsUpDownIcon,
+  Palette,
+  ClipboardCopy,
+} from "lucide-react";
 import { useRouter } from "next/navigation";
 
 import { useForm } from "react-hook-form";
@@ -32,6 +38,14 @@ type Inputs = {
   backgroundColor: string;
 };
 
+async function copyLinkToClipboard(e: React.SyntheticEvent, siteName: string) {
+  e.preventDefault();
+  await navigator.clipboard.writeText(
+    `${process.env.NEXT_PUBLIC_BASE_URL}/${siteName}`
+  );
+  toast.success("Link copied!", { id: "clipboard" });
+}
+
 export default function AddLinkCard({ siteName, siteId }: Props) {
   const router = useRouter();
   const {
@@ -73,24 +87,34 @@ export default function AddLinkCard({ siteName, siteId }: Props) {
           >
             <div className="grid w-full items-center gap-1.5">
               <Label htmlFor="siteName">Site Name</Label>
-              <div
-                className={
-                  "text-md h-13 flex w-full flex-row justify-start rounded-md border border-input bg-transparent px-3 align-middle ring-offset-background"
-                }
-              >
-                <label
-                  htmlFor="siteName"
-                  className=" m-auto block cursor-text select-none text-muted-foreground"
+
+              <div className="flex w-full items-center space-x-2">
+                <div
+                  className={
+                    "text-md h-13 flex w-full flex-row justify-start rounded-md border border-input bg-transparent px-3 align-middle ring-offset-background"
+                  }
                 >
-                  introducty.com/
-                </label>
-                <Input
-                  type="text"
-                  id="siteName"
-                  placeholder="Title"
-                  className="block border-none pl-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
-                  {...register("siteName", { required: true })}
-                />
+                  <label
+                    htmlFor="siteName"
+                    className=" m-auto block cursor-text select-none text-muted-foreground"
+                  >
+                    introducty.com/
+                  </label>
+                  <Input
+                    type="text"
+                    id="siteName"
+                    placeholder="Title"
+                    className="block border-none pl-0 focus-visible:outline-none focus-visible:ring-0 focus-visible:ring-offset-0"
+                    {...register("siteName", { required: true })}
+                  />
+                </div>
+                <Button
+                  className="p-4 py-6"
+                  variant="outline"
+                  onClick={(e) => copyLinkToClipboard(e, siteName)}
+                >
+                  <ClipboardCopy />
+                </Button>
               </div>
               {errors.siteName && (
                 <p className="text-sm text-rose-400">This field is required</p>
@@ -110,6 +134,11 @@ export default function AddLinkCard({ siteName, siteId }: Props) {
                   {...backgroundColorFields}
                 />
                 <Popover>
+                  <PopoverTrigger asChild>
+                    <Button className="p-4 py-6" variant="outline">
+                      <Palette />
+                    </Button>
+                  </PopoverTrigger>
                   <PopoverContent className="w-auto bg-background p-2">
                     <HexColorPicker
                       color={watch("backgroundColor")}
@@ -119,11 +148,6 @@ export default function AddLinkCard({ siteName, siteId }: Props) {
                       }}
                     />
                   </PopoverContent>
-                  <PopoverTrigger asChild>
-                    <Button className="p-4 py-6" variant="outline">
-                      <Palette />
-                    </Button>
-                  </PopoverTrigger>
                 </Popover>
               </div>
               {errors.backgroundColor && (

diff --git a/app/editor/[siteId]/page.tsx b/app/editor/[siteId]/page.tsx
@@ -50,7 +50,9 @@ export default async function Editor({ params }: Props) {
   return (
     <EditorContextProvider>
       <div
-        className={" mx-auto flex max-w-screen-xl justify-between gap-2 py-20 "}
+        className={
+          "mx-auto flex max-w-screen-xl flex-wrap justify-between gap-2 py-20 md:flex-nowrap"
+        }
       >
         <div className="mx-auto grid grid-cols-1 gap-4 xl:grid-flow-col xl:grid-cols-2">
           <SiteSettingsCard siteId={siteId} siteName={siteName} />