@revealui/core 0.0.1-pre.0

package/dist/ui/contexts/ThemeContext.tsx

@@ -0,0 +1,195 @@
+"use client";
+// eslint-disable-next-line prettier/prettier
+
+import { createContext } from "react";
+
+const defaultThemeSettings = {
+  maxWidth: {
+    0: "max-w-3xl",
+    1: "max-w-5xl",
+    2: "max-w-7xl",
+    3: "max-w-8xl",
+    4: "max-w-9xl",
+    5: "max-w-10xl",
+    default: "max-w-full",
+  },
+  padding: {
+    0: "p-0",
+    1: "p-1",
+    2: "p-2",
+    default: "p-3",
+  },
+  breakpoints: {
+    sm: "640px",
+    md: "768px",
+    lg: "1024px",
+    xl: "1280px",
+    "2xl": "1536px",
+  },
+  layoutType: {
+    container: "container",
+    flex: "flex",
+    grid: "grid",
+    stack: "stack",
+  },
+  customProps: {
+    flex: {
+      flexDirection: {
+        row: "flex-row",
+        col: "flex-col",
+      },
+      justifyContent: {
+        start: "justify-start",
+        center: "justify-center",
+        end: "justify-end",
+        between: "justify-between",
+        around: "justify-around",
+        evenly: "justify-evenly",
+      },
+      alignItems: {
+        start: "items-start",
+        center: "items-center",
+        end: "items-end",
+        stretch: "items-stretch",
+        baseline: "items-baseline",
+      },
+      alignContent: {
+        start: "content-start",
+        center: "content-center",
+        end: "content-end",
+        between: "content-between",
+        around: "content-around",
+        evenly: "content-evenly",
+      },
+      flexWrap: {
+        nowrap: "flex-nowrap",
+        wrap: "flex-wrap",
+        wrapReverse: "flex-wrap-reverse",
+      },
+      flexFlow: {
+        row: "flex-row",
+        col: "flex-col",
+        rowWrap: "flex-row flex-wrap",
+        colWrap: "flex-col flex-wrap",
+        rowWrapReverse: "flex-row flex-wrap-reverse",
+        colWrapReverse: "flex-col flex-wrap-reverse",
+      },
+      flexGrow: {
+        0: "flex-grow-0",
+        1: "flex-grow-1",
+      },
+      flexShrink: {
+        0: "flex-shrink-0",
+        1: "flex-shrink-1",
+      },
+      flexBasis: {
+        auto: "flex-basis-auto",
+        0: "flex-basis-0",
+        full: "flex-basis-full",
+      },
+      flexOrder: {
+        first: "order-first",
+        last: "order-last",
+        none: "order-none",
+        1: "order-1",
+        2: "order-2",
+        3: "order-3",
+        4: "order-4",
+        5: "order-5",
+        6: "order-6",
+        7: "order-7",
+        8: "order-8",
+        9: "order-9",
+        10: "order-10",
+        11: "order-11",
+        12: "order-12",
+      },
+      flexSelf: {
+        auto: "self-auto",
+        start: "self-start",
+        center: "self-center",
+        end: "self-end",
+        stretch: "self-stretch",
+      },
+    },
+    grid: {
+      gridTemplateColumns: {
+        1: "grid-cols-1",
+        2: "grid-cols-2",
+        3: "grid-cols-3",
+        4: "grid-cols-4",
+        5: "grid-cols-5",
+        6: "grid-cols-6",
+        7: "grid-cols-7",
+        8: "grid-cols-8",
+        9: "grid-cols-9",
+        10: "grid-cols-10",
+        11: "grid-cols-11",
+        12: "grid-cols-12",
+        none: "grid-cols-none",
+      },
+      gridTemplateRows: {
+        1: "grid-rows-1",
+        2: "grid-rows-2",
+        3: "grid-rows-3",
+        4: "grid-rows-4",
+        5: "grid-rows-5",
+        6: "grid-rows-6",
+        none: "grid-rows-none",
+      },
+      gridTemplateAreas: {
+        none: "grid-areas-none",
+      },
+      gridAutoColumns: {
+        auto: "auto-cols-auto",
+        min: "auto-cols-min",
+        max: "auto-cols-max",
+        fr: "auto-cols-fr",
+      },
+      gridAutoRows: {
+        auto: "auto-rows-auto",
+        min: "auto-rows-min",
+        max: "auto-rows-max",
+        fr: "auto-rows-fr",
+      },
+      gridAutoFlow: {
+        row: "grid-flow-row",
+        col: "grid-flow-col",
+        rowDense: "grid-flow-row-dense",
+        colDense: "grid-flow-col-dense",
+      },
+      grid: {
+        rows: "rows",
+        cols: "cols",
+        gap: "gap",
+        gapX: "gap-x",
+        gapY: "gap-y",
+        autoFlow: "auto-flow",
+        autoRows: "auto-rows",
+        autoCols: "auto-cols",
+        templateRows: "template-rows",
+        templateCols: "template-cols",
+        templateAreas: "template-areas",
+      },
+      gridRow: {
+        auto: "row-auto",
+        span: "row-span",
+        start: "row-start",
+        end: "row-end",
+      },
+      gridColumn: {
+        auto: "col-auto",
+        span: "col-span",
+        start: "col-start",
+        end: "col-end",
+      },
+      gridArea: {
+        auto: "area-auto",
+      },
+    },
+  },
+};
+// Create the theme context with default theme settings.
+const ThemeContext = createContext(defaultThemeSettings);
+
+export default ThemeContext;

package/dist/ui/controls/MusicHeader.tsx

@@ -0,0 +1,484 @@
+// import React, { cache } from "react";
+import React from "react";
+import Button from "../buttons/Button";
+
+const RxCaretRight = ({ className }: { className: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`size-[20px] ${className}`}
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      // eslint-disable-next-line max-len
+      d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const RxCaretLeft = ({ className }: { className: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`size-[20px] ${className}`}
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      // eslint-disable-next-line max-len
+      d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const FaUserAlt = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className="size-[20px]"
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      // eslint-disable-next-line max-len
+      d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const BiSearch = ({ className }: { className: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`size-[20px] ${className}`}
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      // eslint-disable-next-line max-len
+      d="M8 15a7 7 0 100-14 7 7 0 000 14zM7 7a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9H6a1 1 0 110-2h1V7z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+const HiHome = ({ className }: { className: string }) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    className={`size-[20px] ${className}`}
+    viewBox="0 0 20 20"
+    fill="currentColor"
+  >
+    <path
+      fillRule="evenodd"
+      // eslint-disable-next-line max-len
+      d="M10 11.414l4.95 4.95a1 1 0 101.414-1.414L11.414 10l4.95-4.95a1 1 0 10-1.414-1.414L10 8.586 5.05 3.636a1 1 0 00-1.414 1.414L8.586 10l-4.95 4.95a1 1 0 001.414 1.414L10 11.414z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+// const cachedLogout = cache(async () => {
+const cachedLogout = async () => {
+  const response = await fetch("/api/auth/logout", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+  });
+
+  if (!response.ok) {
+    throw new Error(`HTTP error: ${response.status}`);
+  }
+
+  return response.json(); // Assuming the response needs to be processed
+};
+
+const MusicHeader = ({
+  children,
+  className,
+  session,
+}: {
+  children: React.ReactNode;
+  className: string;
+  session: {
+    user: {
+      name: string;
+      email: string;
+      image: string;
+    };
+    back: () => void;
+    forward: () => void;
+    push: (url: string) => void;
+  };
+}) => {
+  const user = session.user;
+
+  const handleLogout = async () => {
+    try {
+      await cachedLogout();
+      console.log("Successfully logged out");
+      // Redirect or update state here as necessary
+    } catch (error) {
+      console.error("Error during fetch:", error);
+    }
+  };
+
+  return (
+    <div
+      className={
+        className
+          ? `${className} flex h-full flex-col justify-between`
+          : "flex h-full flex-col justify-between"
+      }
+    >
+      <div className="mb-4 flex w-full items-center justify-between">
+        <div className="hidden items-center gap-x-2 md:flex">
+          <Button
+            onClick={() => session.back()}
+            className="
+              flex
+              cursor-pointer
+              items-center
+              justify-center
+              rounded-full
+              bg-black
+              transition
+              hover:opacity-75
+            "
+          >
+            <RxCaretLeft className="w-30 text-white" />
+          </Button>
+          <Button
+            onClick={() => session.forward()}
+            className="
+              flex
+              cursor-pointer
+              items-center
+              justify-center
+              rounded-full
+              bg-black
+              transition
+              hover:opacity-75
+            "
+          >
+            <RxCaretRight className="w-30 text-white" />
+          </Button>
+        </div>
+        <div className="flex items-center gap-x-2 md:hidden">
+          <Button
+            onClick={() => session.push("/")}
+            className="
+              flex
+              cursor-pointer
+              items-center
+              justify-center
+              rounded-full
+              bg-white
+              p-2
+              transition
+              hover:opacity-75
+            "
+          >
+            <HiHome className="w-20 text-black" />
+          </Button>
+          <Button
+            onClick={() => session.push("/search")}
+            className="
+              flex
+              cursor-pointer
+              items-center
+              justify-center
+              rounded-full
+              bg-white
+              p-2
+              transition
+              hover:opacity-75
+            "
+          >
+            <BiSearch className="text-black" />
+          </Button>
+        </div>
+        <div className="flex items-center justify-between gap-x-4">
+          {user ? (
+            <div className="flex items-center gap-x-4">
+              <Button onClick={handleLogout} className="bg-white px-6 py-2">
+                Logout
+              </Button>
+              <Button
+                onClick={() => session.push("/account")}
+                className="bg-white"
+              >
+                <FaUserAlt />
+              </Button>
+            </div>
+          ) : (
+            <>
+              <Button
+                // onClick={authModal.openAuthModal}
+                className="
+                    bg-transparent
+                    font-medium
+                    text-neutral-300
+                  "
+              >
+                Sign up
+              </Button>
+
+              <Button
+                // onClick={authModal.openAuthModal}
+
+                className="bg-white px-6 py-2"
+              >
+                Log in
+              </Button>
+            </>
+          )}
+        </div>
+      </div>
+      {children}
+    </div>
+  );
+};
+
+export default MusicHeader;
+
+// const RxCaretRight = ({ className }: { className: string }) => (
+//   <svg
+//     xmlns="http://www.w3.org/2000/svg"
+//     className={`size-[20px] ${className}`}
+//     viewBox="0 0 20 20"
+//     fill="currentColor"
+//   >
+//     <path
+//       fillRule="evenodd"
+//       // eslint-disable-next-line max-len
+//       d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
+//       clipRule="evenodd"
+//     />
+//   </svg>
+// );
+
+// const RxCaretLeft = ({ className }: { className: string }) => (
+//   <svg
+//     xmlns="http://www.w3.org/2000/svg"
+//     className={`size-[20px] ${className}`}
+//     viewBox="0 0 20 20"
+//     fill="currentColor"
+//   >
+//     <path
+//       fillRule="evenodd"
+//       // eslint-disable-next-line max-len
+//       d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
+//       clipRule="evenodd"
+//     />
+//   </svg>
+// );
+
+// const FaUserAlt = () => (
+//   <svg
+//     xmlns="http://www.w3.org/2000/svg"
+//     className="size-[20px]"
+//     viewBox="0 0 20 20"
+//     fill="currentColor"
+//   >
+//     <path
+//       fillRule="evenodd"
+//       // eslint-disable-next-line max-len
+//       d="M10 11a3 3 0 100-6 3 3 0 000 6zM7 9a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9z"
+//       clipRule="evenodd"
+//     />
+//   </svg>
+// );
+
+// const BiSearch = ({ className }: { className: string }) => (
+//   <svg
+//     xmlns="http://www.w3.org/2000/svg"
+//     className={`size-[20px] ${className}`}
+//     viewBox="0 0 20 20"
+//     fill="currentColor"
+//   >
+//     <path
+//       fillRule="evenodd"
+//       // eslint-disable-next-line max-len
+//       d="M8 15a7 7 0 100-14 7 7 0 000 14zM7 7a1 1 0 112 0v1h1a1 1 0 110 2H9v1a1 1 0 11-2 0V9H6a1 1 0 110-2h1V7z"
+//       clipRule="evenodd"
+//     />
+//   </svg>
+// );
+
+// const HiHome = ({ className }: { className: string }) => (
+//   <svg
+//     xmlns="http://www.w3.org/2000/svg"
+//     className={`size-[20px] ${className}`}
+//     viewBox="0 0 20 20"
+//     fill="currentColor"
+//   >
+//     <path
+//       fillRule="evenodd"
+//       // eslint-disable-next-line max-len
+//       d="M10 11.414l4.95 4.95a1 1 0 101.414-1.414L11.414 10l4.95-4.95a1 1 0 10-1.414-1.414L10 8.586 5.05 3.636a1 1 0 00-1.414 1.414L8.586 10l-4.95 4.95a1 1 0 001.414 1.414L10 11.414z"
+//       clipRule="evenodd"
+//     />
+//   </svg>
+// );
+
+// const MusicHeader = ({
+//   children,
+//   className,
+//   session,
+// }: {
+//   children: React.ReactNode;
+//   className: string;
+//   session: {
+//     user: {
+//       name: string;
+//       email: string;
+//       image: string;
+//     };
+//     back: () => void;
+//     forward: () => void;
+//     push: (url: string) => void;
+//   };
+// }) => {
+//   const user = session.user;
+//   // const authModal = useAuthModal();
+//   const handleLogout = async () => {
+//     try {
+//       const response = await fetch("/api/auth/logout", {
+//         method: "POST",
+//         headers: {
+//           "Content-Type": "application/json",
+//         },
+//       });
+//       if (response.ok) {
+//         // Handle the response or navigation on success
+//         console.log("Success:", response);
+//       } else {
+//         throw new Error(`HTTP error: ${response.status}`);
+//       }
+//     } catch (error) {
+//       console.error("Error during fetch:", error);
+//     }
+//   };
+//   return (
+//     <div
+//       className={
+//         className
+//           ? `${className} flex h-full flex-col justify-between`
+//           : "flex h-full flex-col justify-between"
+//       }
+//     >
+// <div className="mb-4 flex w-full items-center justify-between">
+//   <div className="hidden items-center gap-x-2 md:flex">
+//     <Button
+//       onClick={() => session.back()}
+//       className="
+//         flex
+//         cursor-pointer
+//         items-center
+//         justify-center
+//         rounded-full
+//         bg-black
+//         transition
+//         hover:opacity-75
+//       "
+//     >
+//       <RxCaretLeft className="w-30 text-white" />
+//     </Button>
+//     <Button
+//       onClick={() => session.forward()}
+//       className="
+//         flex
+//         cursor-pointer
+//         items-center
+//         justify-center
+//         rounded-full
+//         bg-black
+//         transition
+//         hover:opacity-75
+//       "
+//     >
+//       <RxCaretRight className="w-30 text-white" />
+//     </Button>
+//   </div>
+//   <div className="flex items-center gap-x-2 md:hidden">
+//     <Button
+//       onClick={() => session.push("/")}
+//       className="
+//         flex
+//         cursor-pointer
+//         items-center
+//         justify-center
+//         rounded-full
+//         bg-white
+//         p-2
+//         transition
+//         hover:opacity-75
+//       "
+//     >
+//       <HiHome className="w-20 text-black" />
+//     </Button>
+//     <Button
+//       onClick={() => session.push("/search")}
+//       className="
+//         flex
+//         cursor-pointer
+//         items-center
+//         justify-center
+//         rounded-full
+//         bg-white
+//         p-2
+//         transition
+//         hover:opacity-75
+//       "
+//     >
+//       <BiSearch className="text-black" />
+//     </Button>
+//   </div>
+//   <div className="flex items-center justify-between gap-x-4">
+//     {user ? (
+//       <div className="flex items-center gap-x-4">
+//         <Button onClick={handleLogout} className="bg-white px-6 py-2">
+//           Logout
+//         </Button>
+//         <Button
+//           onClick={() => session.push("/account")}
+//           className="bg-white"
+//         >
+//           <FaUserAlt />
+//         </Button>
+//       </div>
+//     ) : (
+//       <>
+//         <Button
+//           // onClick={authModal.openAuthModal}
+//           className="
+//               bg-transparent
+//               font-medium
+//               text-neutral-300
+//             "
+//         >
+//           Sign up
+//         </Button>
+
+//         <Button
+//           // onClick={authModal.openAuthModal}
+
+//           className="bg-white px-6 py-2"
+//         >
+//           Log in
+//         </Button>
+//       </>
+//     )}
+//   </div>
+// </div>
+// {children}
+//     </div>
+//   );
+// };
+
+// export default MusicHeader;