diff --git a/src/components/frontend/page/home/results.tsx b/src/components/frontend/page/home/results.tsx index 85f6dbc..178ab5c 100644 --- a/src/components/frontend/page/home/results.tsx +++ b/src/components/frontend/page/home/results.tsx @@ -1,6 +1,6 @@ "use client"; import { Button } from '@/components/ui/button'; -import { downloadBase64Image, getBase64MimeType, getImageMimeType } from '@/lib/utils'; +import { downloadBase64Image, getBase64MimeType, getImageMimeType, isBrowser } from '@/lib/utils'; import { ResponseInfo } from '@/types'; import { saveAs } from 'file-saver'; import JSZip from 'jszip'; @@ -51,9 +51,7 @@ const downloadImagesAsZip = async (icons: { href: string, sizes?: string }[], do }); } -function isBrowser() { - return typeof window !== 'undefined' && typeof navigator !== 'undefined'; -} + const IconImage = ({ icon, index, onLoad, domain }: { icon: any; index: number; domain: string; onLoad?: (sizes: string)=> void }) => { if (!isBrowser()) { return null; @@ -62,7 +60,7 @@ const IconImage = ({ icon, index, onLoad, domain }: { icon: any; index: number; const imgRef = useRef(null); const t = useTranslations(); useEffect(() => { - if (isBrowser() && imgRef.current) { + if (imgRef.current) { const img = imgRef.current; const handleImageLoad = () => { setSizes(`${img.naturalWidth}x${img.naturalHeight}`); diff --git a/src/components/frontend/shared/image-code.tsx b/src/components/frontend/shared/image-code.tsx index 0d195d6..3837399 100644 --- a/src/components/frontend/shared/image-code.tsx +++ b/src/components/frontend/shared/image-code.tsx @@ -1,10 +1,12 @@ "use client"; -import Image from "next/image"; - -import CodeCopyBtn from "@/components/shared/CodeCopyBtn"; import { Skeleton } from "@/components/ui/skeleton"; +import dynamic from 'next/dynamic'; +import Image from "next/image"; import { useEffect, useState } from "react"; +const CodeCopyBtn = dynamic(() => import('@/components/shared/CodeCopyBtn'), { ssr: false }) + + const ImageCode = ({ alt, title, src, codeStr, className}: { src: string; codeStr: string; title: string; alt: string; className?: string; }) => { const [dimensions, setDimensions] = useState<{ width: number; height: number } | null>(null); useEffect(() => { diff --git a/src/lib/utils.ts b/src/lib/utils.ts index 2c8dc69..1dd0427 100644 --- a/src/lib/utils.ts +++ b/src/lib/utils.ts @@ -6,7 +6,9 @@ import { twMerge } from "tailwind-merge"; export function cn(...inputs: ClassValue[]) { return twMerge(clsx(inputs)); } - +export function isBrowser() { + return typeof window !== 'undefined' && window.navigator != null; +} export const getOrigin = ({ headers }: { headers: Headers }) => { const url = new URL(headers.get("x-request-url")!); return `${url.protocol}//${url.host}`;