refactor: moved to muse-ui

FlutterFleet · Apr 6, 2024 · 5b95789 · 5b95789
1 parent 3555a06
commit 5b95789
Show file tree

Hide file tree

Showing 12 changed files with 2,711 additions and 627 deletions.
diff --git a/docs/app/[lng]/globals.css b/docs/app/[lng]/globals.css
@@ -1,5 +1,106 @@
-@import "utility-patterns.css";
-
 @tailwind base;
 @tailwind components;
 @tailwind utilities;
+
+@layer base {
+  :root {
+    --background: 0 0% 100%;
+    --foreground: 222.2 84% 4.9%;
+
+    --card: 0 0% 100%;
+    --card-foreground: 222.2 84% 4.9%;
+
+    --popover: 0 0% 100%;
+    --popover-foreground: 222.2 84% 4.9%;
+
+    --primary: 222.2 47.4% 11.2%;
+    --primary-foreground: 210 40% 98%;
+
+    --secondary: 210 40% 96.1%;
+    --secondary-foreground: 222.2 47.4% 11.2%;
+
+    --muted: 210 40% 96.1%;
+    --muted-foreground: 215.4 16.3% 46.9%;
+
+    --accent: 210 40% 96.1%;
+    --accent-foreground: 222.2 47.4% 11.2%;
+
+    --destructive: 0 84.2% 60.2%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 214.3 31.8% 91.4%;
+    --input: 214.3 31.8% 91.4%;
+    --ring: 222.2 84% 4.9%;
+
+    --radius: 0.5rem;
+  }
+
+  .dark {
+    --background: 222.2 84% 4.9%;
+    --foreground: 210 40% 98%;
+
+    --card: 222.2 84% 4.9%;
+    --card-foreground: 210 40% 98%;
+
+    --popover: 222.2 84% 4.9%;
+    --popover-foreground: 210 40% 98%;
+
+    --primary: 210 40% 98%;
+    --primary-foreground: 222.2 47.4% 11.2%;
+
+    --secondary: 217.2 32.6% 17.5%;
+    --secondary-foreground: 210 40% 98%;
+
+    --muted: 217.2 32.6% 17.5%;
+    --muted-foreground: 215 20.2% 65.1%;
+
+    --accent: 217.2 32.6% 17.5%;
+    --accent-foreground: 210 40% 98%;
+
+    --destructive: 0 62.8% 30.6%;
+    --destructive-foreground: 210 40% 98%;
+
+    --border: 217.2 32.6% 17.5%;
+    --input: 217.2 32.6% 17.5%;
+    --ring: 212.7 26.8% 83.9%;
+  }
+}
+
+@layer base {
+  * {
+    @apply border-border;
+  }
+  body {
+    @apply bg-background text-foreground;
+  }
+}
+
+/* https://github.com/disqus/disqus-react/issues/134 */
+#disqus_thread {
+  color-scheme: none;
+}
+
+.cropper-modal {
+  background-color: hsl(var(--background)) !important;
+}
+
+/* https://rpearce.github.io/react-medium-image-zoom/?path=/story/img--custom-modal-styles */
+.custom-zoom [data-rmiz-modal-overlay],
+.custom-zoom [data-rmiz-modal-img] {
+  transition-duration: 0.8s;
+  transition-timing-function: linear;
+}
+.custom-zoom [data-rmiz-modal-overlay="hidden"] {
+  background-color: rgba(56, 58, 89, 0);
+}
+.custom-zoom [data-rmiz-modal-overlay="visible"] {
+  background-color: rgba(56, 58, 89, 0.3);
+}
+.custom-zoom [data-rmiz-btn-unzoom] {
+  background-color: #bd93f9;
+  color: #000;
+}
+.custom-zoom [data-rmiz-btn-unzoom]:focus-visible {
+  outline-offset: 0.4rem;
+  outline: 0.2rem solid #bd93f9;
+}
diff --git a/docs/app/[lng]/utility-patterns.css b/docs/app/[lng]/utility-patterns.css
diff --git a/docs/components/home/component-grid.tsx b/docs/components/home/component-grid.tsx
diff --git a/docs/components/home/demo-modal.tsx b/docs/components/home/demo-modal.tsx
diff --git a/docs/components/layout/lng-dropdown.tsx b/docs/components/layout/lng-dropdown.tsx
@@ -1,10 +1,18 @@
 "use client";
-
-import { useState } from "react";
-import { RiTranslate } from "react-icons/ri";
-import Popover from "@/components/shared/popover";
+import React, { useState } from "react";
 import { usePathname } from "next/navigation";
 import Link from "next/link";
+import { RiTranslate } from "react-icons/ri";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+  Drawer,
+  DrawerContent,
+  DrawerTrigger,
+  Button,
+} from "muse-ui";
 import { useTranslation } from "@/i18n/client";
 import { languages } from "@/i18n/settings";
 import type { LngProps } from "@/types/i18next-lng";
@@ -13,6 +21,7 @@ export default function LngDropdown(props: LngProps) {
   const { t } = useTranslation(props.lng, "header");
   const pathName = usePathname();
   const [openPopover, setOpenPopover] = useState(false);
+  const [openDrawer, setOpenDrawer] = useState(false);
 
   const redirectedPathName = (locale: string) => {
     if (!pathName) return "/";
@@ -23,37 +32,62 @@ export default function LngDropdown(props: LngProps) {
 
   return (
     <div className="relative inline-block text-left">
-      <Popover
-        content={
+      <DropdownMenu open={openPopover} onOpenChange={setOpenPopover}>
+        <DropdownMenuTrigger asChild>
+          <Button
+            variant="link"
+            className="hidden h-8 w-8 items-center justify-center overflow-hidden rounded-full p-0 transition-all duration-75 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 active:scale-95 sm:h-9 sm:w-9 md:flex"
+          >
+            <RiTranslate className="h-5 w-5" />
+          </Button>
+        </DropdownMenuTrigger>
+        <DropdownMenuContent>
           <div className="w-full min-w-[14rem] rounded-md bg-white p-2 dark:bg-black">
+            {languages.map((locale) => {
+              return (
+                <DropdownMenuItem
+                  key={locale}
+                  disabled={locale === props.lng}
+                  className="hover:bg-accent hover:text-accent-foreground focus-visible:ring-0 focus-visible:ring-offset-0"
+                >
+                  <Link
+                    key={locale}
+                    href={redirectedPathName(locale)}
+                    className="relative flex w-full items-center justify-start space-x-2 rounded-md py-2 text-left text-sm font-medium transition-all duration-75"
+                  >
+                    <p className="text-sm">{t(`languages.${locale}`)}</p>
+                  </Link>
+                </DropdownMenuItem>
+              );
+            })}
+          </div>
+        </DropdownMenuContent>
+      </DropdownMenu>
+      <Drawer open={openDrawer} onOpenChange={setOpenDrawer}>
+        <DrawerTrigger asChild>
+          <Button
+            variant="link"
+            className="h-8 w-8 items-center justify-center overflow-hidden rounded-full p-0 transition-all duration-75 focus:outline-none focus-visible:ring-0 focus-visible:ring-offset-0 active:scale-95 sm:h-9 sm:w-9 md:hidden"
+          >
+            <RiTranslate className="h-5 w-5" />
+          </Button>
+        </DrawerTrigger>
+        <DrawerContent>
+          <div className="min-w-sm mx-auto w-full rounded-md p-2">
             {languages.map((locale) => {
               return (
                 <Link
                   key={locale}
                   href={redirectedPathName(locale)}
-                  className={`relative flex w-full items-center justify-start space-x-2 rounded-md p-2 text-left text-sm transition-all duration-75 hover:bg-gray-100 dark:hover:bg-gray-700 ${
-                    locale === props.lng
-                      ? "cursor-not-allowed bg-gray-100 dark:bg-gray-700"
-                      : ""
-                  }`}
+                  className={`relative flex w-full items-center justify-start space-x-2 rounded-md px-2 py-3 text-left text-sm font-medium transition-all duration-75 ${locale === props.lng ? "pointer-events-none opacity-50" : "hover:bg-accent hover:text-accent-foreground"}`}
                 >
                   <p className="text-sm">{t(`languages.${locale}`)}</p>
                 </Link>
               );
             })}
           </div>
-        }
-        align="end"
-        openPopover={openPopover}
-        setOpenPopover={setOpenPopover}
-      >
-        <button
-          onClick={() => setOpenPopover(!openPopover)}
-          className="mr-2 flex h-8 w-8 items-center justify-center overflow-hidden rounded-full transition-all duration-75 focus:outline-none active:scale-95 sm:h-9 sm:w-9"
-        >
-          <RiTranslate className="h-5 w-5" />
-        </button>
-      </Popover>
+        </DrawerContent>
+      </Drawer>
     </div>
   );
 }