feat: brand new visualizer structure

fluid-design-io · Oct 19, 2023 · 9f29cbe · 9f29cbe
1 parent 837fb8e
commit 9f29cbe
Show file tree

Hide file tree

Showing 16 changed files with 576 additions and 106 deletions.
diff --git a/apps/web/app/visualizer/chart/page.tsx b/apps/web/app/visualizer/chart/page.tsx
@@ -0,0 +1,142 @@
+"use client";
+
+import React, { PureComponent } from "react";
+import {
+  AreaChart,
+  Area,
+  XAxis,
+  YAxis,
+  CartesianGrid,
+  Tooltip,
+  ResponsiveContainer,
+} from "recharts";
+
+import { cn } from "ui/lib/utils";
+
+const data = [
+  {
+    name: "Page A",
+    uv: 4000,
+    pv: 2400,
+    amt: 2400,
+  },
+  {
+    name: "Page B",
+    uv: 3000,
+    pv: 1398,
+    amt: 2210,
+  },
+  {
+    name: "Page C",
+    uv: 2000,
+    pv: 9800,
+    amt: 2290,
+  },
+  {
+    name: "Page D",
+    uv: 2780,
+    pv: 3908,
+    amt: 2000,
+  },
+  {
+    name: "Page E",
+    uv: 1890,
+    pv: 4800,
+    amt: 2181,
+  },
+  {
+    name: "Page F",
+    uv: 2390,
+    pv: 3800,
+    amt: 2500,
+  },
+  {
+    name: "Page G",
+    uv: 3490,
+    pv: 4300,
+    amt: 2100,
+  },
+];
+const OverView = () => {
+  return (
+    <ResponsiveContainer width="100%" height={350}>
+      <AreaChart
+        width={500}
+        height={400}
+        data={data}
+        margin={{
+          top: 10,
+          right: 30,
+          left: 0,
+          bottom: 0,
+        }}
+      >
+        <CartesianGrid strokeDasharray="3 3" />
+        <XAxis dataKey="name" className="stroke-border/30 text-xs" />
+        <YAxis className="stroke-border/30 text-xs" />
+        <Tooltip
+          contentStyle={{
+            backgroundColor: "hsl(var(--background)/0.8)",
+            borderRadius: "0.5rem",
+            border: "1px solid hsl(var(--border))",
+            backdropFilter: "blur(10px)",
+            fontWeight: 600,
+            boxShadow: "0 0 10px hsl(var(--primary-800)/0.2)",
+          }}
+          labelStyle={{
+            color: "hsl(var(--foreground))",
+            fontSize: "0.8rem",
+          }}
+          itemStyle={{
+            color: "hsl(var(--foreground)/0.75)",
+            fontSize: "0.8rem",
+          }}
+        />
+        <Area
+          type="monotone"
+          dataKey="uv"
+          stackId="1"
+          stroke="hsl(var(--primary-700))"
+          fill="hsl(var(--primary-700))"
+          className="[&_*]:transition-colors"
+        />
+        <Area
+          type="monotone"
+          dataKey="pv"
+          stackId="1"
+          stroke="hsl(var(--secondary-700))"
+          fill="hsl(var(--secondary-700))"
+          className="[&_*]:transition-colors"
+        />
+        <Area
+          type="monotone"
+          dataKey="amt"
+          stackId="1"
+          stroke="hsl(var(--accent-700))"
+          fill="hsl(var(--accent-700))"
+          className="[&_*]:transition-colors"
+        />
+      </AreaChart>
+    </ResponsiveContainer>
+  );
+};
+
+export default function VisChart() {
+  return (
+    <div className="mx-auto flex w-full max-w-7xl flex-1 flex-col items-center justify-center px-4 sm:px-6 lg:px-8">
+      <div className="flex flex-col items-center space-y-2 rounded-lg border border-border/50 p-4 transition-all hover:border-border hover:bg-muted/30 hover:shadow">
+        <div className="flex flex-col space-y-1.5 p-6">
+          <h2 className="text-2xl font-semibold leading-none tracking-tight">
+            Emission Overview
+          </h2>
+          <p className="text-sm text-muted-foreground">
+            Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam
+            voluptate, quia, quos, natus voluptates quod quas quibusdam
+            exercitationem voluptatum autem quae.
+          </p>
+        </div>
+        <OverView />
+      </div>
+    </div>
+  );
+}
diff --git a/apps/web/app/visualizer/contact/page.tsx b/apps/web/app/visualizer/contact/page.tsx
@@ -0,0 +1,7 @@
+import VisContactForm from "@/components/visualizer/contact-form";
+
+function VisTestimonialPage() {
+  return <VisContactForm />;
+}
+
+export default VisTestimonialPage;
diff --git a/apps/web/app/visualizer/layout.tsx b/apps/web/app/visualizer/layout.tsx
@@ -0,0 +1,23 @@
+import { Card } from "ui/components/ui/card";
+import VisualizerNav from "./visualizer-nav";
+import GraphicVisualizer from "@/components/graphic-visualizer";
+import ColorPickerFab from "@/components/core/color-picker-fab";
+
+export default function Layout({ children }) {
+  return (
+    <div className="site-padding mx-auto mt-6 flex w-full max-w-[120rem] flex-1 flex-col pb-20 sm:pb-24 md:mt-8 lg:mt-10">
+      <section>
+        <Card className="relative flex min-h-[80vh] flex-1 flex-col overflow-hidden">
+          <VisualizerNav />
+          <div className="flex h-full w-full flex-1 flex-col items-stretch justify-center">
+            {children}
+          </div>
+        </Card>
+      </section>
+      <section>
+        <GraphicVisualizer />
+      </section>
+      <ColorPickerFab />
+    </div>
+  );
+}
diff --git a/apps/web/app/visualizer/page.tsx b/apps/web/app/visualizer/page.tsx
@@ -1,18 +1,11 @@
-import ColorPickerFab from "@/components/core/color-picker-fab";
-import PaletteVisualizer from "@/components/palette/palette-visualizer";
+import VisHeroSection from "@/components/visualizer/hero-section";
 import { Metadata } from "next";
-import React from "react";
 
 export const metadata: Metadata = {
   title: "Visualizer",
   description: "Visualize your color palette with interactive components",
 };
 
 export default function VisualizerPage() {
-  return (
-    <div className="site-padding mx-auto mt-6 flex w-full max-w-[120rem] flex-1 flex-col pb-20 sm:pb-24 md:mt-8 lg:mt-10">
-      <PaletteVisualizer />
-      <ColorPickerFab />
-    </div>
-  );
+  return <VisHeroSection />;
 }
diff --git a/apps/web/app/visualizer/testimonial/page.tsx b/apps/web/app/visualizer/testimonial/page.tsx
@@ -0,0 +1,8 @@
+import VisTestimonials from "@/components/visualizer/testimonial";
+import React from "react";
+
+function VisTestimonialPage() {
+  return <VisTestimonials />;
+}
+
+export default VisTestimonialPage;
diff --git a/apps/web/app/visualizer/visualizer-nav.tsx b/apps/web/app/visualizer/visualizer-nav.tsx
@@ -0,0 +1,58 @@
+"use client";
+
+import Link from "next/link";
+import { usePathname } from "next/navigation";
+import React from "react";
+import { ScrollArea, ScrollBar } from "ui/components/ui/scroll-area";
+import { cn } from "ui/lib/utils";
+const navItems = [
+  {
+    name: "Landing",
+    href: "/visualizer",
+  },
+  {
+    name: "Testimonial",
+    href: "/visualizer/testimonial",
+  },
+  {
+    name: "Chart",
+    href: "/visualizer/chart",
+  },
+  {
+    name: "Contact",
+    href: "/visualizer/contact",
+  },
+];
+
+function VisualizerNav() {
+  const pathname = usePathname();
+
+  return (
+    <div className="relative inset-x-0 top-0 z-20 mx-auto w-full border-b">
+      <div className="pointer-events-none absolute inset-y-0 left-0 z-10 w-10 bg-gradient-to-r from-background to-transparent" />
+      <div className="pointer-events-none absolute inset-y-0 right-0 z-10 w-10 bg-gradient-to-l from-background to-transparent" />
+      <ScrollArea className="max-w-[600px] lg:max-w-none">
+        <nav role="navigation" className="flex items-center px-4 py-4">
+          {navItems.map((item) => (
+            <Link
+              key={item.name}
+              className={cn(
+                "flex items-center bg-blue-50/5 px-4 text-muted-foreground",
+                "transition-colors duration-200 hover:text-foreground/80 focus:text-foreground/80",
+                {
+                  "font-semibold text-foreground": pathname === item.href,
+                },
+              )}
+              href={item.href}
+            >
+              {item.name}
+            </Link>
+          ))}
+        </nav>
+        <ScrollBar orientation="horizontal" className="invisible" />
+      </ScrollArea>
+    </div>
+  );
+}
+
+export default VisualizerNav;
diff --git a/apps/web/components/core/toobar.tsx b/apps/web/components/core/toobar.tsx
@@ -8,6 +8,7 @@ function Toolbar() {
   return (
     <div
       className={cn(
+        "mx-auto max-w-[120rem] ",
         "relative z-40 flex select-none flex-row items-center justify-between bg-background-accent py-2 transition-colors",
         "fixed inset-x-0 bottom-0 w-full border-t border-t-border",
         "sm:border-t-none sm:sticky sm:inset-x-auto sm:bottom-auto sm:top-0 sm:border-none",

diff --git a/...components/palette/palette-visualizer.tsx → apps/web/components/graphic-visualizer.tsx b/...components/palette/palette-visualizer.tsx → apps/web/components/graphic-visualizer.tsx
@@ -2,35 +2,19 @@ import SvgGeometry from "@/components/svg/geometry";
 import SvgPattern from "@/components/svg/pattern";
 import SvgLanding from "@/components/svg/landing";
 import SvgNamecard from "@/components/svg/namecard";
-import SvgArtisticFont from "../svg/artistic-font";
-import DataChart from "../svg/data-chart";
+import SvgArtisticFont from "./svg/artistic-font";
+import DataChart from "./svg/data-chart";
 import { Card } from "@ui/components/card";
 import { cn } from "@ui/lib/utils";
-import VisHeroSection from "../visualizer/hero-section";
-import VisContactForm from "../visualizer/contact-form";
-import VisTestimonials from "../visualizer/testimonial";
-function PaletteVisualizer() {
+function GraphicVisualizer() {
   const cardStyle = cn(
     "flex aspect-[4/3] items-center justify-center p-6 [&>svg]:rounded overflow-hidden",
     "[&>svg]:w-full [&>svg]:h-full",
   );
   return (
-    <main className="flex flex-col gap-8">
-      <Card className="overflow-hidden">
-        <VisHeroSection />
-      </Card>
-      <Card className="overflow-hidden">
-        <VisTestimonials />
-      </Card>
-      <Card className="overflow-hidden">
-        <VisContactForm />
-      </Card>
+    <main className="mt-6 flex flex-col gap-8 sm:mt-8 lg:mt-10">
       <h1 className="text-3xl font-semibold">Graphics</h1>
-      <div
-        className={
-          "default grid gap-4 md:grid-cols-2 md:gap-6 lg:gap-8 xl:grid-cols-3"
-        }
-      >
+      <div className="default grid gap-4 md:grid-cols-2 md:gap-6 lg:gap-8 xl:grid-cols-3">
         <Card className={cardStyle}>
           <SvgLanding />
         </Card>
@@ -54,4 +38,4 @@ function PaletteVisualizer() {
   );
 }
 
-export default PaletteVisualizer;
+export default GraphicVisualizer;
diff --git a/apps/web/components/palette/base-color-palettes.tsx b/apps/web/components/palette/base-color-palettes.tsx
@@ -3,12 +3,12 @@ import { useColorStore } from "@/store/store";
 import { BaseColorTypes } from "@/types/app";
 import { cn } from "@ui/lib/utils";
 import React from "react";
-import ColorString from "./color-string";
 
 import PaletteButton from "./base-palette-button";
+import { colorHelper } from "@/lib/colorHelper";
 
 function BaseColorPalettes() {
-  const { colorPalettes } = useColorStore.getState();
+  const { colorPalettes, colorMode } = useColorStore.getState();
   const animation = (i, type) => {
     let baseDelay = 0.12;
     switch (type) {
@@ -43,21 +43,20 @@ function BaseColorPalettes() {
             )}
             key={`base-color-palette-${type}`}
           >
-            {colorPalettes[type].map((_, i) => {
+            {colorPalettes[type].map((color, i) => {
               const step = i;
               return (
                 <div
                   className="flex flex-col bg-background transition-colors"
                   key={`base-color-palette-${type}-${step}`}
-                  style={{
-                    order: step,
-                  }}
                 >
                   <PaletteButton
                     {...{
                       animation: animation(step, type),
                       type,
                       step: step,
+                      color: color,
+                      colorMode,
                     }}
                   />
                   <div
@@ -82,13 +81,7 @@ function BaseColorPalettes() {
                           "@md/section-secondary:hover:absolute @md/section-secondary:hover:left-0 @md/section-secondary:hover:top-0 @md/section-secondary:hover:z-10 @md/section-secondary:hover:shadow-sm",
                         )}
                       >
-                        <ColorString
-                          {...{
-                            type,
-                            step: step,
-                            animation: animation(step, type),
-                          }}
-                        />
+                        {colorHelper.toColorMode(color.raw, colorMode)}
                       </div>
                     </div>
                   </div>

diff --git a/apps/web/components/palette/color-picker.tsx b/apps/web/components/palette/color-picker.tsx
@@ -1,12 +1,8 @@
 "use client";
 
 import { colorHelper } from "@/lib/colorHelper";
-import {
-  Performance,
-  useColorStore,
-  useSiteSettingsStore,
-} from "@/store/store";
-import { BaseColorTypes, BaseColors, RawColor } from "@/types/app";
+import { useColorStore, useSiteSettingsStore } from "@/store/store";
+import { BaseColorTypes } from "@/types/app";
 import { cn } from "@ui/lib/utils";
 import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { useEffect, useState } from "react";