fix: make playground page client

mehdibha · Dec 30, 2023 · 348cfa2 · 348cfa2
1 parent 292e471
commit 348cfa2
Show file tree

Hide file tree

Showing 9 changed files with 23 additions and 17 deletions.
diff --git a/apps/web/next.config.js b/apps/web/next.config.js
@@ -3,12 +3,12 @@
  */
 module.exports = {
   images: {
-    remotePatterns: [],
+    remotePatterns: [
+      {
+        hostname: "github.com",
+      },
+    ],
   },
   reactStrictMode: false,
-  transpilePackages: [
-    "@palettify/ui",
-    "@palettify/utils",
-    "@palettify/database",
-  ],
+  transpilePackages: ["@palettify/ui", "@palettify/utils", "@palettify/database"],
 };
diff --git a/apps/web/package.json b/apps/web/package.json
@@ -60,7 +60,7 @@
     "react-hook-form": "^7.47.0",
     "react-resizable-panels": "^1.0.5",
     "recharts": "^2.10.3",
-    "sharp": "^0.33.0",
+    "sharp": "^0.33.1",
     "sonner": "^1.3.1",
     "stripe": "^14.10.0",
     "sugar-high": "^0.5.6",

diff --git a/apps/web/src/app/(app)/playground/layout.tsx b/apps/web/src/app/(app)/playground/layout.tsx
@@ -1,4 +1,7 @@
+"use client";
+
 import { ReactNode } from "react";
+import { useSearchParams } from "next/navigation";
 import { FormProvider } from "./form-provider";
 import { Preview } from "./preview";
 
@@ -8,6 +11,7 @@ interface DashboardLayoutProps {
 
 export default function DashboardLayout(props: DashboardLayoutProps) {
   const { children } = props;
+  useSearchParams();
 
   return (
     <FormProvider>

diff --git a/apps/web/src/app/(app)/playground/page.tsx b/apps/web/src/app/(app)/playground/page.tsx
@@ -2,7 +2,6 @@ import { useSearchParams } from "next/navigation";
 import { UpdateSiteAppearance } from "@/modules/theme-previewer/components/theme-form";
 
 function PalettesPage() {
-  useSearchParams();
   return <UpdateSiteAppearance />;
 }
 

diff --git a/apps/web/src/components/features.tsx b/apps/web/src/components/features.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import Link from "next/link";
 import { ArrowRightIcon } from "@palettify/ui";
 import { cn, stringReplace } from "@palettify/utils";
@@ -60,7 +61,7 @@ const Feature = (props: FeatureProps) => {
   return (
     <div className="gap4 flex flex-col items-center rounded-3xl border p-10">
       {image && (
-        <img
+        <Image
           alt="feature"
           height={100}
           width={100}

diff --git a/apps/web/src/components/testimonials.tsx b/apps/web/src/components/testimonials.tsx
@@ -1,3 +1,4 @@
+import Image from "next/image";
 import Link from "next/link";
 import { cn, stringReplace } from "@palettify/utils";
 
@@ -45,10 +46,12 @@ export function Testimonials(props: TestimonialProps) {
           >
             <p className="mb-4">{testimonial.content}</p>
             <div className="flex items-center gap-4">
-              <img
-                className="h-8 rounded-full lg:h-10"
+              <Image
+                className="aspect-square h-10 w-10 rounded-full "
+                width={100}
+                height={100}
                 src={testimonial.author.avatar}
-                alt="danielroe"
+                alt={testimonial.author.name}
               />
               <div className="text-sm">
                 <p className="u-text-gray-900 font-semibold">{testimonial.author.name}</p>

diff --git a/apps/web/src/config/site-config.tsx b/apps/web/src/config/site-config.tsx
@@ -116,8 +116,7 @@ export const siteConfig = {
           author: {
             name: "Iyed",
             role: "Passionate developer",
-            avatar:
-              "https://www.iyed.dev/_next/image?url=%2Fimages%2Favatar.png&w=256&q=75",
+            avatar: "https://github.com/imansour12.png",
           },
         },
       ],

diff --git a/apps/web/src/modules/payment/components/subscriptions-list.tsx b/apps/web/src/modules/payment/components/subscriptions-list.tsx
@@ -1,4 +1,5 @@
 import React from "react";
+import Image from "next/image";
 import {
   Badge,
   Button,
@@ -44,9 +45,8 @@ export const SubscriptionsList = (props: SubscriptionsListProps) => {
               subscriptions.map((subscription) => (
                 <TableRow key={subscription.id}>
                   <TableCell className="font-medium">
-                    <img
+                    <Image
                       alt={subscription.siteName ?? ""}
-                      // className="w-20 h-20"
                       className="rounded"
                       src={subscription.image ?? "/images/placeholder.png"}
                     />

diff --git a/yarn.lock b/yarn.lock
@@ -6979,7 +6979,7 @@ set-function-name@^2.0.0, set-function-name@^2.0.1:
     functions-have-names "^1.2.3"
     has-property-descriptors "^1.0.0"
 
-sharp@^0.33.0:
+sharp@^0.33.1:
   version "0.33.1"
   resolved "https://registry.yarnpkg.com/sharp/-/sharp-0.33.1.tgz#81e8778b9f5e2b195666cf56b2e5a110c2399d70"
   integrity sha512-iAYUnOdTqqZDb3QjMneBKINTllCJDZ3em6WaWy7NPECM4aHncvqHRm0v0bN9nqJxMiwamv5KIdauJ6lUzKDpTQ==