fix: UI and 'use client' directive fix (#151)

* Update .env.example typo fix * Update .env.example Pascal Case :) * fix: project proview link and some directive fix
loglib · Jan 12, 2024 · ba379c8 · ba379c8
1 parent be6c295
commit ba379c8
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 50 deletions.
diff --git a/apps/www/src/components/wireframes/AppWindow.tsx b/apps/www/src/components/wireframes/AppWindow.tsx
@@ -1,8 +1,6 @@
-import clsx from 'clsx';
-
-import { SkeletonMd } from '@/components/wireframes/Skeletons';
-
-import type { PropsWithChildren, ReactNode } from 'react';
+import clsx from "clsx";
+import { SkeletonMd } from "@/components/wireframes/Skeletons";
+import type { PropsWithChildren, ReactNode } from "react";
 
 interface BrowserTabProps {
   icon: ReactNode;
@@ -13,83 +11,82 @@ interface BrowserTabProps {
 function BrowserTab({ icon, title, isActive }: BrowserTabProps) {
   return (
     <div
-      className={clsx('flex h-6 items-center truncate rounded-lg', [
+      className={clsx("flex h-6 items-center truncate rounded-lg", [
         isActive
           ? [
-              'bg-slate-200 text-slate-600',
-              'dark:bg-slate-100/20 dark:text-slate-300',
+              "bg-slate-200 text-slate-600",
+              "dark:bg-slate-100/20 dark:text-slate-300",
             ]
-          : ['bg-slate-200/50 text-slate-500', 'dark:bg-slate-100/5'],
+          : ["bg-slate-200/50 text-slate-500", "dark:bg-slate-100/5"],
       ])}
       style={{ width: 200 }}
     >
-      <div className={clsx('flex w-full gap-2 px-2 text-xs')}>
+      <div className={clsx("flex w-full gap-2 px-2 text-xs")}>
         {icon}
-        <div className={clsx('flex-1 truncate')}>{title}</div>
+        <div className={clsx("flex-1 truncate")}>{title}</div>
       </div>
     </div>
   );
 }
 
 interface AppWindowProps {
-  type?: 'browser' | 'app';
+  type?: "browser" | "app";
   browserTabs?: Array<BrowserTabProps>;
 }
 
 function AppWindow({
   children = null,
-  type = 'app',
+  type = "app",
   browserTabs = [],
 }: PropsWithChildren<AppWindowProps>) {
-  const isWithBrowserTabs = type === 'browser' && browserTabs;
+  const isWithBrowserTabs = type === "browser" && browserTabs;
 
   return (
     <div
       role="presentation"
       className={clsx(
-        'border-divider-light pointer-events-none flex h-full w-full select-none flex-col overflow-hidden rounded-xl border bg-white',
-        'dark:border-divider-dark  from-stone-900 bg-gradient-to-br to-[#080812]   '
+        "border-divider-light  flex h-full w-full  flex-col overflow-hidden rounded-xl border bg-white",
+        "dark:border-divider-dark  from-stone-900 bg-gradient-to-br to-[#080812]   "
       )}
     >
-
       <div
         className={clsx(
-          'border-divider-light relative box-border border-b',
-          'dark:border-divider-dark',
-          [isWithBrowserTabs ? 'h-20' : 'h-10']
+          "border-divider-light relative box-border border-b",
+          "dark:border-divider-dark",
+          [isWithBrowserTabs ? "h-20" : "h-10"]
         )}
       >
         <div
           className={clsx(
-            'absolute left-4 top-0 flex h-10 items-center gap-1.5'
+            "absolute left-4 top-0 flex h-10 items-center gap-1.5"
           )}
         >
           <div
             className={clsx(
-              'h-3 w-3 rounded-full bg-red-300',
-              'dark:bg-slate-500'
+              "h-3 w-3 rounded-full bg-red-300",
+              "dark:bg-slate-500"
             )}
           />
           <div
             className={clsx(
-              'h-3 w-3 rounded-full bg-amber-300',
-              'dark:bg-slate-500'
+              "h-3 w-3 rounded-full bg-amber-300",
+              "dark:bg-slate-500"
             )}
           />
           <div
             className={clsx(
-              'h-3 w-3 rounded-full bg-green-300',
-              'dark:bg-slate-500'
+              "h-3 w-3 rounded-full bg-green-300",
+              "dark:bg-slate-500"
             )}
           />
         </div>
-        {type === 'browser' && (
+        {type === "browser" && (
           <>
-            <div className={clsx('flex h-10 items-center justify-center')}>
+            <div className={clsx("flex h-10 items-center justify-center")}>
               <SkeletonMd w={160} />
             </div>
             {isWithBrowserTabs && (
-              <div className={clsx('mt-2 flex gap-2 px-3')}>
+              <div className={clsx("mt-2 flex gap-2 px-3")}>
                 {browserTabs.map(({ icon, title, isActive }) => (
                   <BrowserTab
                     key={title}
@@ -103,9 +100,9 @@ function AppWindow({
           </>
         )}
       </div>
-      <div className={clsx('flex-1 overflow-hidden ')}>{children}</div>
+      <div className={clsx("flex-1 overflow-hidden ")}>{children}</div>
     </div>
   );
 }
 
-export default AppWindow;
+export default AppWindow;
diff --git a/apps/www/src/components/wireframes/Github.tsx b/apps/www/src/components/wireframes/Github.tsx
@@ -1,8 +1,6 @@
-'use client'
-
 import clsx from "clsx";
-import { ExternalLink, Link } from "lucide-react";
-
+import { ExternalLink } from "lucide-react";
+import Link from "next/link";
 import { SkeletonSm } from "@/components/wireframes/Skeletons";
 
 interface GithubWireframeProps {
@@ -45,14 +43,13 @@ function GitHubWireframe({
             "dark:font-semibold dark:text-blue-500"
           )}
         >
+          <Link href={`https://github.com/loglib/${repository}`} target="_blank"  className="cursor-pointer">
+            <div className="flex gap-1 justify-center items-center cursor-pointer">
+              {repository}
 
-
-          <div className="flex gap-1 justify-center items-center cursor-pointer" onClick={() => alert("COnsolel")}>
-
-            {repository} 
-
-           <ExternalLink className="w-3 h-4" />
-          </div>
+              <ExternalLink className="w-3 h-4" />
+            </div>
+          </Link>
         </div>
         <div
           className={clsx(

diff --git a/apps/www/src/components/wireframes/Npm.tsx b/apps/www/src/components/wireframes/Npm.tsx
@@ -1,5 +1,5 @@
 import clsx from "clsx";
-
+import Link from "next/link";
 import { TypeScriptIcon } from "@/components/extra-icons";
 import { ExternalLink } from "lucide-react";
 import { SkeletonSm } from "@/components/wireframes/Skeletons";
@@ -23,18 +23,20 @@ function NpmWireframe({
       )}
     >
       <div className={clsx("flex items-center gap-2 text-lg font-bold")}>
-        <div className="flex justify-center items-center gap-1">
-          {packageName}
-          <ExternalLink className="w-3 h-4" />
-        </div>
+        <Link href={`https://npmjs.com/package/${packageName}`}>
+          <div className="flex justify-center items-center gap-1">
+            {packageName}
+            <ExternalLink className="w-3 h-4" />
+          </div>
+        </Link>
         {isWithTypeScript && (
           <div className={clsx("")}>
             <TypeScriptIcon className={clsx("ml-1 h-5 w-5")} />
           </div>
         )}
       </div>
       <div
-        className={clsx("mt-2 flex items-center gap-2 text-lg text-slate-400")}
+        className={clsx("mt-2 flex items-center gap-2 text-lg text-slate-400 ")}
       >
         <SkeletonSm w={60} />
         <div className={clsx("-mt-1")}>&middot;</div>
@@ -101,7 +103,7 @@ function NpmWireframe({
         <div
           className={clsx(
             "border-divider-light mt-8 border-l-4 bg-slate-200/40 p-2 px-4",
-            "dark:border-divider-dark dark:bg-slate-100/5"
+            "dark:border-divider-dark dark:bg-slate-100/5 select-none"
           )}
         >
           <p>{description}</p>