From 9f29cbe53155b94b5fbf20ac61caf0768e66797e Mon Sep 17 00:00:00 2001 From: fluid-design-io <2216991777@qq.com> Date: Thu, 19 Oct 2023 00:02:20 -0500 Subject: [PATCH] feat: brand new visualizer structure --- apps/web/app/visualizer/chart/page.tsx | 142 +++++++++++ apps/web/app/visualizer/contact/page.tsx | 7 + apps/web/app/visualizer/layout.tsx | 23 ++ apps/web/app/visualizer/page.tsx | 11 +- apps/web/app/visualizer/testimonial/page.tsx | 8 + apps/web/app/visualizer/visualizer-nav.tsx | 58 +++++ apps/web/components/core/toobar.tsx | 1 + ...-visualizer.tsx => graphic-visualizer.tsx} | 28 +- .../palette/base-color-palettes.tsx | 19 +- apps/web/components/palette/color-picker.tsx | 8 +- .../toolbar/plugin/shareable-link.plugin.tsx | 65 +++++ .../web/components/toolbar/shareable-link.tsx | 61 +---- .../components/visualizer/contact-form.tsx | 3 +- .../components/visualizer/hero-section.tsx | 8 +- apps/web/package.json | 1 + pnpm-lock.yaml | 239 +++++++++++++++++- 16 files changed, 576 insertions(+), 106 deletions(-) create mode 100644 apps/web/app/visualizer/chart/page.tsx create mode 100644 apps/web/app/visualizer/contact/page.tsx create mode 100644 apps/web/app/visualizer/layout.tsx create mode 100644 apps/web/app/visualizer/testimonial/page.tsx create mode 100644 apps/web/app/visualizer/visualizer-nav.tsx rename apps/web/components/{palette/palette-visualizer.tsx => graphic-visualizer.tsx} (57%) create mode 100644 apps/web/components/toolbar/plugin/shareable-link.plugin.tsx diff --git a/apps/web/app/visualizer/chart/page.tsx b/apps/web/app/visualizer/chart/page.tsx new file mode 100644 index 0000000..bed0eb4 --- /dev/null +++ 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 ( + + + + + + + + + + + + ); +}; + +export default function VisChart() { + return ( +
+
+
+

+ Emission Overview +

+

+ Lorem ipsum dolor sit amet consectetur adipisicing elit. Quisquam + voluptate, quia, quos, natus voluptates quod quas quibusdam + exercitationem voluptatum autem quae. +

+
+ +
+
+ ); +} diff --git a/apps/web/app/visualizer/contact/page.tsx b/apps/web/app/visualizer/contact/page.tsx new file mode 100644 index 0000000..1a61ac9 --- /dev/null +++ b/apps/web/app/visualizer/contact/page.tsx @@ -0,0 +1,7 @@ +import VisContactForm from "@/components/visualizer/contact-form"; + +function VisTestimonialPage() { + return ; +} + +export default VisTestimonialPage; diff --git a/apps/web/app/visualizer/layout.tsx b/apps/web/app/visualizer/layout.tsx new file mode 100644 index 0000000..38cbcf2 --- /dev/null +++ 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 ( +
+
+ + +
+ {children} +
+ +
+
+ +
+ +
+ ); +} diff --git a/apps/web/app/visualizer/page.tsx b/apps/web/app/visualizer/page.tsx index 8227e80..e1d5b53 100644 --- a/apps/web/app/visualizer/page.tsx +++ b/apps/web/app/visualizer/page.tsx @@ -1,7 +1,5 @@ -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", @@ -9,10 +7,5 @@ export const metadata: Metadata = { }; export default function VisualizerPage() { - return ( -
- - -
- ); + return ; } diff --git a/apps/web/app/visualizer/testimonial/page.tsx b/apps/web/app/visualizer/testimonial/page.tsx new file mode 100644 index 0000000..7b7896c --- /dev/null +++ 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 ; +} + +export default VisTestimonialPage; diff --git a/apps/web/app/visualizer/visualizer-nav.tsx b/apps/web/app/visualizer/visualizer-nav.tsx new file mode 100644 index 0000000..1ecb9c8 --- /dev/null +++ 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 ( +
+
+
+ + + + +
+ ); +} + +export default VisualizerNav; diff --git a/apps/web/components/core/toobar.tsx b/apps/web/components/core/toobar.tsx index fa4f077..ef6f0fd 100644 --- a/apps/web/components/core/toobar.tsx +++ b/apps/web/components/core/toobar.tsx @@ -8,6 +8,7 @@ function Toolbar() { return (
svg]:rounded overflow-hidden", "[&>svg]:w-full [&>svg]:h-full", ); return ( -
- - - - - - - - - +

Graphics

-
+
@@ -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 index 43ea72f..dc13c74 100644 --- 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 (
- + {colorHelper.toColorMode(color.raw, colorMode)}
diff --git a/apps/web/components/palette/color-picker.tsx b/apps/web/components/palette/color-picker.tsx index 5a7363f..7c70f40 100644 --- 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"; diff --git a/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx b/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx new file mode 100644 index 0000000..5950893 --- /dev/null +++ b/apps/web/components/toolbar/plugin/shareable-link.plugin.tsx @@ -0,0 +1,65 @@ +"use client"; + +import { Input } from "ui/components/ui/input"; +import { Button } from "ui/components/ui/button"; +import { Copy } from "lucide-react"; +import React, { Fragment, useState } from "react"; +import { Skeleton } from "@ui/components/ui/skeleton"; +import { cn } from "ui/lib/utils"; +import Image from "next/image"; +import { useToast } from "ui/components/ui/use-toast"; + +function ShareableLinkPlugin({ colors, setOpen }) { + const { toast } = useToast(); + const [loadingSocialPreview, setLoadingSocialPreview] = useState(true); + const handleCopy = () => { + navigator.clipboard.writeText( + `${process.env.NEXT_PUBLIC_URL}/?colors=${colors}`, + ); + setOpen(false); + toast({ + title: "Copied to clipboard!", + }); + }; + return ( + +
+
+ + Social preview setLoadingSocialPreview(false)} + width={288} + height={151} + /> +
+
+
+ + +
+ + ); +} + +export default ShareableLinkPlugin; diff --git a/apps/web/components/toolbar/shareable-link.tsx b/apps/web/components/toolbar/shareable-link.tsx index f0b8171..1667dc7 100644 --- a/apps/web/components/toolbar/shareable-link.tsx +++ b/apps/web/components/toolbar/shareable-link.tsx @@ -8,32 +8,24 @@ import { import DesktopPreviewToolbarIcon from "../ui/desktop-primary-toolbar-button"; import primaryToolbarMenu from "../ui/primary-toolbar-menu"; import { useEffect, useState } from "react"; -import { Input } from "ui/components/ui/input"; -import { Button } from "ui/components/ui/button"; -import { Copy } from "lucide-react"; import { useColorStore } from "@/store/store"; import { colorHelper } from "@/lib/colorHelper"; -import { Skeleton } from "@ui/components/ui/skeleton"; -import { cn } from "ui/lib/utils"; -import Image from "next/image"; -import { useToast } from "ui/components/ui/use-toast"; +import dynamic from "next/dynamic"; +import { Skeleton } from "ui/components/ui/skeleton"; + +const ShareableLinkPlugin = dynamic( + () => import("@/components/toolbar/plugin/shareable-link.plugin"), + { + loading: () => , + ssr: false, + }, +); function ToolbarShareableLink() { const menuItem = primaryToolbarMenu.Share; const { baseColors } = useColorStore(); const [open, setOpen] = useState(false); const [colors, setColors] = useState(""); - const { toast } = useToast(); - const [loadingSocialPreview, setLoadingSocialPreview] = useState(true); - const handleCopy = () => { - navigator.clipboard.writeText( - `${process.env.NEXT_PUBLIC_URL}/?colors=${colors}`, - ); - setOpen(false); - toast({ - title: "Copied to clipboard!", - }); - }; useEffect(() => { if (!baseColors) return; let search = Object.values(baseColors) @@ -48,38 +40,7 @@ function ToolbarShareableLink() { -
-
- - - Social preview setLoadingSocialPreview(false)} - width={288} - height={151} - /> -
-
-
- - -
+ {open && } ); diff --git a/apps/web/components/visualizer/contact-form.tsx b/apps/web/components/visualizer/contact-form.tsx index 37e5cd4..35481d8 100644 --- a/apps/web/components/visualizer/contact-form.tsx +++ b/apps/web/components/visualizer/contact-form.tsx @@ -27,7 +27,7 @@ import { Globe, Mail, Phone } from "lucide-react"; export default function VisContactForm() { return ( -
+
@@ -166,6 +166,7 @@ export default function VisContactForm() {