update tailwind config

VictorVation · May 19, 2023 · e5e5a1c · e5e5a1c
1 parent d8fe20e
commit e5e5a1c
Show file tree

Hide file tree

Showing 8 changed files with 29 additions and 17 deletions.
diff --git a/app/(introducty)/api/sites/route.ts b/app/(introducty)/api/sites/route.ts
@@ -86,11 +86,14 @@ export async function POST(req: Request) {
         style: "capital",
         separator: "",
       });
-    const site = await supabase.from("sites").insert({
+    const { site, error: insertError } = await supabase.from("sites").insert({
       site_name: siteName,
       creator_id: authUser.id,
+      design: null,
     });
 
+    console.log(insertError);
+
     return new Response(JSON.stringify(site));
   } catch (error) {
     if (error instanceof z.ZodError) {

diff --git a/app/(introducty)/editor/[siteId]/LinksPreviewCard.tsx b/app/(introducty)/editor/[siteId]/LinksPreviewCard.tsx
@@ -6,7 +6,7 @@ import DeviceFrame from "./DeviceFrame";
 import { EditorContext } from "./EditorContext";
 import { useContext } from "react";
 import { cn } from "~/lib/utils";
-import { GradientIdsType, gradientVariant } from "~/config/gradients";
+import { GradientIdsType, gradientVariant } from "~/lib/gradients";
 
 type Props = {
   siteName: string;
@@ -21,7 +21,7 @@ export default function LinksPreviewComponent({ links, siteName }: Props) {
     <DeviceFrame>
       <div
         className={cn(
-          "h-full w-full rounded-[68px] bg-background",
+          "h-full w-full rounded-[68px]",
           backgroundType === "gradient" &&
             gradientVariant({ gradientId: gradientId as GradientIdsType })
         )}
@@ -30,12 +30,14 @@ export default function LinksPreviewComponent({ links, siteName }: Props) {
         }}
       >
         <div className="grid gap-8 p-10 pt-32">
-          <h4 className="text-md text-center font-bold">{siteName}</h4>
+          <h4 className="text-md text-black text-center font-bold">
+            {siteName}
+          </h4>
           <div className="grid gap-2">
             {renderedLinks.map((link) => (
               <Link
                 className={
-                  "w-full rounded-lg border bg-background p-4 text-center"
+                  "w-full rounded-lg border bg-slate-50 border-slate-200 text-black p-4 text-center"
                 }
                 key={link.id}
                 href={link.url}

diff --git a/app/(introducty)/editor/[siteId]/SiteDesignCard.tsx b/app/(introducty)/editor/[siteId]/SiteDesignCard.tsx
@@ -31,11 +31,7 @@ import { RadioGroup, RadioGroupItem } from "~/components/ui/radio-group";
 import { cn } from "~/lib/utils";
 import { Tabs, TabsList, TabsContent, TabsTrigger } from "~/components/ui/tabs";
 import { Alert, AlertDescription } from "~/components/ui/alert";
-import {
-  GradientIds,
-  GradientIdsType,
-  gradientVariant,
-} from "~/config/gradients";
+import { GradientIds, GradientIdsType, gradientVariant } from "~/lib/gradients";
 
 type Props = {
   //   siteDesign: Pick<
@@ -60,7 +56,7 @@ export default function SiteDesignCard({ siteDesignId }: Props) {
     backgroundType,
     setBackgroundType,
   } = useContext(EditorContext);
-  console.log(backgroundType);
+
   const {
     register,
     handleSubmit,
@@ -110,6 +106,12 @@ export default function SiteDesignCard({ siteDesignId }: Props) {
     }
   }
 
+  console.log(
+    gradientVariant({
+      gradientId: gradientId as GradientIdsType,
+    })
+  );
+
   return (
     <div className="w-sm row-span-2 transition-all duration-500">
       <Card>
@@ -160,7 +162,7 @@ export default function SiteDesignCard({ siteDesignId }: Props) {
                           key={gradientId}
                           htmlFor={gradientId}
                           className={cn(
-                            "flex aspect-square flex-col rounded-md border-2 border-muted bg-popover hover:border-black hover:text-accent-foreground [&:has([data-state=checked])]:border-black",
+                            "flex aspect-square flex-col cursor-pointer rounded-md border-2 border-muted bg-popover hover:border-black hover:text-accent-foreground [&:has([data-state=checked])]:border-black",
                             gradientVariant({
                               gradientId: gradientId as GradientIdsType,
                             })

diff --git a/app/(introducty)/layout.tsx b/app/(introducty)/layout.tsx
@@ -1,4 +1,5 @@
 import "~/app/globals.css";
+
 import SupabaseProvider from "~/app/supabase-provider";
 import { Toaster } from "react-hot-toast";
 import { ThemeProvider } from "~/components/ThemeProvider";

diff --git a/app/(public)/[siteName]/page.tsx b/app/(public)/[siteName]/page.tsx
@@ -4,7 +4,7 @@ import { headers, cookies } from "next/headers";
 import { notFound } from "next/navigation";
 import { Database } from "~/types/supabase";
 import { cn } from "~/lib/utils";
-import { GradientIdsType, gradientVariant } from "~/config/gradients";
+import { GradientIdsType, gradientVariant } from "~/lib/gradients";
 import { Metadata } from "next";
 
 type Props = {
@@ -32,6 +32,7 @@ export default async function CreatorPage({ params: { siteName } }: Props) {
   if (fetchSiteError) {
     return notFound();
   }
+
   const links = Array.isArray(site.links)
     ? site.links
     : site.links != null
@@ -59,7 +60,9 @@ export default async function CreatorPage({ params: { siteName } }: Props) {
       <div className="flex h-full w-96 flex-col justify-center gap-4">
         {links.map((link) => (
           <Link
-            className={"w-full rounded-lg border bg-white p-4 text-center"}
+            className={
+              "w-full rounded-lg border bg-slate-50 p-4 border-slate-200 text-center hover:-translate-y-1 hover:scale-105 hover:bg-slate-200 hover:border-slate-300 duration-150"
+            }
             key={link.id}
             href={link.url}
           >

diff --git a/config/gradients.ts → lib/gradients.ts b/config/gradients.ts → lib/gradients.ts
diff --git a/tailwind.config.js b/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
     "./pages/**/*.{js,ts,jsx,tsx}",
     "./components/**/*.{js,ts,jsx,tsx}",
     "./app/**/*.{js,ts,jsx,tsx}",
+    "./lib/**/*.{js,ts,jsx,tsx}",
   ],
   darkMode: ["class"],
   theme: {

diff --git a/types/supabase.ts b/types/supabase.ts
@@ -62,23 +62,23 @@ export interface Database {
         Row: {
           created_at: string;
           creator_id: string | null;
-          design: number;
+          design: number | null;
           hideBranding: boolean;
           id: string;
           site_name: string;
         };
         Insert: {
           created_at?: string;
           creator_id?: string | null;
-          design: number;
+          design?: number | null;
           hideBranding?: boolean;
           id?: string;
           site_name: string;
         };
         Update: {
           created_at?: string;
           creator_id?: string | null;
-          design?: number;
+          design?: number | null;
           hideBranding?: boolean;
           id?: string;
           site_name?: string;