style: loading and big UI change

vwh · Aug 25, 2024 · ffa9f99 · ffa9f99
1 parent eb47982
commit ffa9f99
Show file tree

Hide file tree

Showing 10 changed files with 175 additions and 106 deletions.
diff --git a/index.html b/index.html
@@ -38,7 +38,7 @@
     href="https://fonts.googleapis.com/css2?family=Fira+Mono:wght@400;500;700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap">
   <!-- Critical CSS -->
   <style>
-    body {
+    * {
       font-family: "Fira Mono", monospace;
     }
 
@@ -56,7 +56,7 @@
 </head>
 
 <body>
-  <div id="root"></div>
+  <div id="root" class="bg-background"></div>
   <script type="module" src="/src/main.tsx"></script>
   <noscript>
     <div class="no-js-message">

diff --git a/src/App.tsx b/src/App.tsx
@@ -7,14 +7,13 @@ import Editor from "./components/editor/editor";
 import ButtonsNav from "./components/nav-buttons";
 import Stats from "./components/editor/stats";
 import Terminal from "./components/editor/terminal";
+import Ripple from "@/components/magicui/ripple";
 import {
   ResizableHandle,
   ResizablePanel,
   ResizablePanelGroup
 } from "./components/ui/resizable";
 
-import { LoaderCircleIcon } from "lucide-react";
-
 function App() {
   const { direction, setCode, initializePyodide, isPyodideLoading } =
     useStore();
@@ -36,16 +35,23 @@ function App() {
   if (isPyodideLoading) {
     return (
       <section className="absolute z-[999] flex h-screen w-full flex-col items-center justify-center gap-3 bg-background text-foreground">
-        <LoaderCircleIcon className="h-32 w-32 animate-spin" />
-        <h1 className="font-bold">Loading Python Playground</h1>
+        <div className="relative flex h-full w-full flex-col items-center justify-center overflow-hidden bg-background md:shadow-xl">
+          <p className="z-10 animate-pulse whitespace-pre-wrap text-center text-2xl font-bold tracking-tighter text-white">
+            Loading
+          </p>
+          <Ripple />
+        </div>
       </section>
     );
   }
 
   return (
-    <main className="flex h-screen flex-col">
+    <main className="flex h-screen flex-col bg-background md:mx-2 md:pb-3">
       <ButtonsNav />
-      <ResizablePanelGroup direction={direction}>
+      <ResizablePanelGroup
+        className="border-t border-accent md:rounded-lg md:border"
+        direction={direction}
+      >
         <ResizablePanel defaultSize={65}>
           <Editor />
         </ResizablePanel>

diff --git a/src/components/editor/editor.tsx b/src/components/editor/editor.tsx
@@ -3,7 +3,6 @@ import { useStore } from "@/store/useStore";
 import { useTheme } from "@/hooks/useTheme";
 
 import MonacoEditor from "@monaco-editor/react";
-import { Separator } from "@/components/ui/separator";
 import Loader from "@/components/loader";
 
 export default function Editor() {
@@ -33,7 +32,6 @@ export default function Editor() {
           fontSize: 14
         }}
       />
-      <Separator />
     </div>
   );
 }
diff --git a/src/components/editor/stats.tsx b/src/components/editor/stats.tsx
@@ -19,7 +19,7 @@ export default function Stats() {
   }, [code]);
 
   return (
-    <section className="pointer-events-none absolute bottom-3 left-0 right-0 z-[99] flex items-center justify-center">
+    <section className="pointer-events-none absolute bottom-[22px] left-0 right-0 z-[99] hidden items-center justify-center md:flex">
       <div className="rounded bg-secondary px-2 font-mono text-sm text-foreground">
         <span>
           {stats.lines} Lines, {stats.words} Words, {stats.characters}{" "}

diff --git a/src/components/editor/terminal.tsx b/src/components/editor/terminal.tsx
@@ -48,7 +48,7 @@ export default function Terminal() {
   return (
     <pre
       ref={outputRef}
-      className="h-full w-full overflow-x-auto bg-background p-4"
+      className="h-full w-full overflow-x-auto bg-background px-4 py-1"
     >
       <code
         className={`w-full font-mono text-sm ${error ? "text-red-500" : "text-foreground"}`}

diff --git a/src/components/loader.tsx b/src/components/loader.tsx
@@ -4,7 +4,7 @@ export default function Loader({ text }: { text: string }) {
   return (
     <div className="flex items-center gap-1 text-foreground">
       <LoaderCircleIcon className="h-5 w-5 animate-spin" />
-      <p>{text}</p>
+      <p className="font-bold">{text}</p>
     </div>
   );
 }
diff --git a/src/components/magicui/ripple.tsx b/src/components/magicui/ripple.tsx
@@ -0,0 +1,50 @@
+import React, { CSSProperties } from "react";
+
+interface RippleProps {
+  mainCircleSize?: number;
+  mainCircleOpacity?: number;
+  numCircles?: number;
+}
+
+const Ripple = React.memo(function Ripple({
+  mainCircleSize = 210,
+  mainCircleOpacity = 0.24,
+  numCircles = 8
+}: RippleProps) {
+  return (
+    <div className="absolute inset-0 flex items-center justify-center bg-white/5 [mask-image:linear-gradient(to_bottom,white,transparent)]">
+      {Array.from({ length: numCircles }, (_, i) => {
+        const size = mainCircleSize + i * 70;
+        const opacity = mainCircleOpacity - i * 0.03;
+        const animationDelay = `${i * 0.06}s`;
+        const borderStyle = i === numCircles - 1 ? "dashed" : "solid";
+        const borderOpacity = 5 + i * 5;
+
+        return (
+          <div
+            key={i}
+            className={`absolute animate-ripple rounded-full border bg-foreground/25 shadow-xl [--i:${i}]`}
+            style={
+              {
+                width: `${size}px`,
+                height: `${size}px`,
+                opacity,
+                animationDelay,
+                borderStyle,
+                borderWidth: "1px",
+                borderColor: `hsl(var(--foreground), ${borderOpacity / 100})`,
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%) scale(1)"
+              } as CSSProperties
+            }
+          />
+        );
+      })}
+    </div>
+  );
+});
+
+Ripple.displayName = "Ripple";
+
+export default Ripple;
diff --git a/src/components/nav-buttons.tsx b/src/components/nav-buttons.tsx
@@ -4,7 +4,6 @@ import { useStore } from "@/store/useStore";
 import { Button } from "./ui/button";
 import Settings from "./settings";
 import ModeToggle from "./theme/mode-toggle";
-import { Separator } from "./ui/separator";
 
 import {
   ReplaceIcon,
@@ -38,46 +37,43 @@ export default function ButtonsNav() {
   }, [runCode, code]);
 
   return (
-    <>
-      <section className="flex justify-between gap-2 bg-background p-2">
-        <div className="flex grow items-center justify-center gap-1">
-          <Button
-            disabled={isCodeExecuting}
-            title="Execute the code"
-            onClick={handleRunCode}
-            variant="secondary"
-          >
-            {isCodeExecuting ? (
-              <LoaderCircleIcon className="h-5 w-5 animate-spin" />
-            ) : (
-              <PlayIcon className="h-5 w-5" />
-            )}
-            <span className={`ml-2 ${isCodeExecuting ? "opacity-80" : ""}`}>
-              Run
-            </span>
-          </Button>
-          <Button
-            disabled={isCodeExecuting}
-            title="Clear the terminal"
-            onClick={handleTerminalClear}
-            variant="secondary"
-          >
-            <TrashIcon className="h-5 w-5" />
-            <span className="ml-2 hidden md:inline">Clear Terminal</span>
-          </Button>
-          <Button
-            title="Change direction"
-            variant="secondary"
-            onClick={handleDirectionChange}
-          >
-            <ReplaceIcon className="h-5 w-5" />
-            <span className="ml-2 hidden md:inline">Direction</span>
-          </Button>
-          <Settings />
-          <ModeToggle />
-        </div>
-      </section>
-      <Separator />
-    </>
+    <section className="flex justify-between gap-2 bg-background p-2">
+      <div className="flex grow items-center justify-center gap-1">
+        <Button
+          disabled={isCodeExecuting}
+          title="Execute the code"
+          onClick={handleRunCode}
+          variant="secondary"
+        >
+          {isCodeExecuting ? (
+            <LoaderCircleIcon className="h-5 w-5 animate-spin" />
+          ) : (
+            <PlayIcon className="h-5 w-5" />
+          )}
+          <span className={`ml-2 ${isCodeExecuting ? "opacity-80" : ""}`}>
+            Run
+          </span>
+        </Button>
+        <Button
+          disabled={isCodeExecuting}
+          title="Clear the terminal"
+          onClick={handleTerminalClear}
+          variant="secondary"
+        >
+          <TrashIcon className="h-5 w-5" />
+          <span className="ml-2 hidden md:inline">Clear Terminal</span>
+        </Button>
+        <Button
+          title="Change direction"
+          variant="secondary"
+          onClick={handleDirectionChange}
+        >
+          <ReplaceIcon className="h-5 w-5" />
+          <span className="ml-2 hidden md:inline">Direction</span>
+        </Button>
+        <Settings />
+        <ModeToggle />
+      </div>
+    </section>
   );
 }
diff --git a/src/globals.css b/src/globals.css
@@ -5,47 +5,57 @@
 @layer base {
   :root {
     --background: 0 0% 100%;
-    --foreground: 0 0% 3.9%;
+    --foreground: 20 14.3% 4.1%;
     --card: 0 0% 100%;
-    --card-foreground: 0 0% 3.9%;
+    --card-foreground: 20 14.3% 4.1%;
     --popover: 0 0% 100%;
-    --popover-foreground: 0 0% 3.9%;
-    --primary: 0 0% 9%;
-    --primary-foreground: 0 0% 98%;
-    --secondary: 0 0% 96.1%;
-    --secondary-foreground: 0 0% 9%;
-    --muted: 0 0% 96.1%;
-    --muted-foreground: 0 0% 45.1%;
-    --accent: 0 0% 96.1%;
-    --accent-foreground: 0 0% 9%;
+    --popover-foreground: 20 14.3% 4.1%;
+    --primary: 24 9.8% 10%;
+    --primary-foreground: 60 9.1% 97.8%;
+    --secondary: 60 4.8% 95.9%;
+    --secondary-foreground: 24 9.8% 10%;
+    --muted: 60 4.8% 95.9%;
+    --muted-foreground: 25 5.3% 44.7%;
+    --accent: 60 4.8% 95.9%;
+    --accent-foreground: 24 9.8% 10%;
     --destructive: 0 84.2% 60.2%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 89.8%;
-    --input: 0 0% 89.8%;
-    --ring: 0 0% 3.9%;
-    --radius: 0.3rem;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 20 5.9% 90%;
+    --input: 20 5.9% 90%;
+    --ring: 20 14.3% 4.1%;
+    --radius: 0.5rem;
+    --chart-1: 12 76% 61%;
+    --chart-2: 173 58% 39%;
+    --chart-3: 197 37% 24%;
+    --chart-4: 43 74% 66%;
+    --chart-5: 27 87% 67%;
   }
 
   .dark {
-    --background: 0 0% 3.9%;
-    --foreground: 0 0% 98%;
-    --card: 0 0% 3.9%;
-    --card-foreground: 0 0% 98%;
-    --popover: 0 0% 3.9%;
-    --popover-foreground: 0 0% 98%;
-    --primary: 0 0% 98%;
-    --primary-foreground: 0 0% 9%;
-    --secondary: 0 0% 14.9%;
-    --secondary-foreground: 0 0% 98%;
-    --muted: 0 0% 14.9%;
-    --muted-foreground: 0 0% 63.9%;
-    --accent: 0 0% 14.9%;
-    --accent-foreground: 0 0% 98%;
+    --background: 20 14.3% 4.1%;
+    --foreground: 60 9.1% 97.8%;
+    --card: 20 14.3% 4.1%;
+    --card-foreground: 60 9.1% 97.8%;
+    --popover: 20 14.3% 4.1%;
+    --popover-foreground: 60 9.1% 97.8%;
+    --primary: 60 9.1% 97.8%;
+    --primary-foreground: 24 9.8% 10%;
+    --secondary: 12 6.5% 15.1%;
+    --secondary-foreground: 60 9.1% 97.8%;
+    --muted: 12 6.5% 15.1%;
+    --muted-foreground: 24 5.4% 63.9%;
+    --accent: 12 6.5% 15.1%;
+    --accent-foreground: 60 9.1% 97.8%;
     --destructive: 0 62.8% 30.6%;
-    --destructive-foreground: 0 0% 98%;
-    --border: 0 0% 14.9%;
-    --input: 0 0% 14.9%;
-    --ring: 0 0% 83.1%;
+    --destructive-foreground: 60 9.1% 97.8%;
+    --border: 12 6.5% 15.1%;
+    --input: 12 6.5% 15.1%;
+    --ring: 24 5.7% 82.9%;
+    --chart-1: 220 70% 50%;
+    --chart-2: 160 60% 45%;
+    --chart-3: 30 80% 55%;
+    --chart-4: 280 65% 60%;
+    --chart-5: 340 75% 55%;
   }
 }