@revealui/core 0.0.1-pre.1 → 0.0.1-pre.2

package/dist/ui/buttons/LikeButton.tsx

@@ -1,221 +0,0 @@
-import React from "react";
-import Button from "./Button";
-
-const cachedLikeSong = async (songId: string) => {
-  const response = await fetch("/api/like", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify({ songId }),
-  });
-
-  if (!response.ok) {
-    throw new Error("Failed to like the song");
-  }
-
-  return response.json(); // Assuming the response needs to be processed
-};
-
-interface LikeButtonProps {
-  songId: string | undefined;
-}
-
-const LikeButton: React.FC<LikeButtonProps> = ({ songId }) => {
-  const handleLike = async () => {
-    if (!songId) {
-      console.error("No song ID provided");
-      return;
-    }
-
-    try {
-      const result = await cachedLikeSong(songId);
-      console.log("Like result:", result);
-    } catch (error) {
-      console.error("Error liking the song:", error);
-    }
-  };
-
-  return (
-    <Button
-      onClick={handleLike}
-      className="flex cursor-pointer items-center justify-center rounded-full bg-white p-1"
-    >
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        className="size-6 text-black"
-        fill="none"
-        viewBox="0 0 24 24"
-        stroke="currentColor"
-      >
-        <path
-          strokeLinecap="round"
-          strokeLinejoin="round"
-          strokeWidth={2}
-          d="M5 15l7-7 7 7"
-        />
-      </svg>
-    </Button>
-  );
-};
-
-export default LikeButton;
-
-// import React from "react"
-// import Button from "./Button.js"
-
-// const cachedLikeSong = async (songId: string) => {
-//   const response = await fetch("/api/like", {
-//     method: "POST",
-//     headers: {
-//       "Content-Type": "application/json",
-//     },
-//     body: JSON.stringify({ songId }),
-//   })
-
-//   if (!response.ok) {
-//     throw new Error("Failed to like the song")
-//   }
-
-//   return response.json() // Assuming the response needs to be processed
-// }
-
-// interface LikeButtonProps {
-//   songId: string
-// }
-
-// const LikeButton: React.FC<LikeButtonProps> = ({ songId }) => {
-//   const handleLike = async () => {
-//     try {
-//       const result = await cachedLikeSong(songId)
-//       console.log("Like result:", result)
-//     } catch (error) {
-//       console.error("Error liking the song:", error)
-//     }
-//   }
-
-//   return (
-//     <Button
-//       onClick={handleLike}
-//       className="flex cursor-pointer items-center justify-center rounded-full bg-white p-1"
-//     >
-//       <svg
-//         xmlns="http://www.w3.org/2000/svg"
-//         className="size-6 text-black"
-//         fill="none"
-//         viewBox="0 0 24 24"
-//         stroke="currentColor"
-//       >
-//         <path
-//           strokeLinecap="round"
-//           strokeLinejoin="round"
-//           strokeWidth={2}
-//           d="M5 15l7-7 7 7"
-//         />
-//       </svg>
-//     </Button>
-//   )
-// }
-
-// export default LikeButton
-
-// // import React, { cache } from "react";
-// import React from "react";
-// import Button from "./Button";
-
-// // const cachedLikeSong = cache(async (songId: string) => {
-// const cachedLikeSong = async (songId: string) => {
-//   const response = await fetch("/api/like", {
-//     method: "POST",
-//     headers: {
-//       "Content-Type": "application/json",
-//     },
-//     body: JSON.stringify({ songId }),
-//   });
-
-//   if (!response.ok) {
-//     throw new Error("Failed to like the song");
-//   }
-
-//   return response.json(); // Assuming the response needs to be processed
-// };
-
-// const LikeButton: React.FC<{
-//   songId: string;
-// }> = ({ songId = "1" }) => {
-//   const handleLike = async (songId: string) => {
-//     try {
-//       const result = await cachedLikeSong(songId);
-//       console.log("Like result:", result);
-//     } catch (error) {
-//       console.error("Error liking the song:", error);
-//     }
-//   };
-
-//   return (
-//     <Button
-//       onClick={() => handleLike(songId)}
-//       className="flex cursor-pointer items-center justify-center rounded-full bg-white p-1"
-//     >
-//       <svg
-//         xmlns="http://www.w3.org/2000/svg"
-//         className="size-6 text-black"
-//         fill="none"
-//         viewBox="0 0 24 24"
-//         stroke="currentColor"
-//       >
-//         <path
-//           strokeLinecap="round"
-//           strokeLinejoin="round"
-//           strokeWidth={2}
-//           d="M5 15l7-7 7 7"
-//         />
-//       </svg>
-//     </Button>
-//   );
-// };
-
-// export default LikeButton;
-
-// // import React from "react";
-// // import Button from "./Button";
-
-// // const LikeButton: React.FC<{
-// //   songId: string;
-// // }> = ({ songId = "1" }) => {
-// //   const handleLike = (songId: string) => {
-// //     const response = fetch("/api/like", {
-// //       method: "POST",
-// //       headers: {
-// //         "Content-Type": "application/json",
-// //       },
-// //       body: JSON.stringify({ songId }),
-// //     });
-
-// //     return response;
-// //   };
-
-// //   return (
-// //     <Button
-// //       onClick={() => handleLike(songId)}
-// //       className="flex cursor-pointer items-center justify-center rounded-full bg-white p-1"
-// //     >
-// //       <svg
-// //         xmlns="http://www.w3.org/2000/svg"
-// //         className="size-6 text-black"
-// //         fill="none"
-// //         viewBox="0 0 24 24"
-// //         stroke="currentColor"
-// //       >
-// //         <path
-// //           strokeLinecap="round"
-// //           strokeLinejoin="round"
-// //           strokeWidth={2}
-// //           d="M5 15l7-7 7 7"
-// //         />
-// //       </svg>
-// //     </Button>
-// //   );
-// // };
-
-// // export default LikeButton;

package/dist/ui/buttons/MobileMenuButton.tsx

@@ -1,63 +0,0 @@
-import React from "react";
-import { Disclosure } from "../shells";
-
-const Bars3Icon = ({ className }: { className: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className={`${className}` || "block size-6"}
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5"
-    />
-  </svg>
-);
-
-const XMarkIcon = ({ className }: { className: string }) => (
-  <svg
-    xmlns="http://www.w3.org/2000/svg"
-    fill="none"
-    viewBox="0 0 24 24"
-    strokeWidth={1.5}
-    stroke="currentColor"
-    className={`${className}` || "block size-6"}
-  >
-    <path
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      d="M6 18L18 6M6 6l12 12"
-    />
-  </svg>
-);
-
-const MobileMenuButton = ({
-  open,
-  toggle,
-}: {
-  open: boolean;
-  toggle: (
-    event: React.MouseEvent<HTMLElement>,
-  ) => void;
-}) => (
-  <div className="absolute inset-y-0 right-0 mx-auto flex items-center justify-center p-2 lg:hidden">
-    <Disclosure.Button
-      as="button"
-      onClick={toggle}
-      className="text-scrapOrange inline-flex items-center justify-center rounded-md focus:outline-none"
-    >
-      <span className="sr-only">Open main menu</span>
-      {open ? (
-        <XMarkIcon className="block size-8" aria-hidden="true" />
-      ) : (
-        <Bars3Icon className="block size-8" aria-hidden="true" />
-      )}
-    </Disclosure.Button>
-  </div>
-);
-
-export default MobileMenuButton;

package/dist/ui/buttons/MusicButton.tsx

@@ -1,53 +0,0 @@
-// eslint-disable-next-line prettier/prettier
-
-import React, { useRef } from "react";
-import { Button } from "./index.js";
-
-const MusicButton: React.FC<{
-  className?: string;
-  data?: unknown | unknown[] | Record<string, unknown> | null;
-  children?: React.ReactNode;
-  disabled?: boolean;
-  type?: "button" | "submit" | "reset";
-  onClick?: () => void;
-}> = ({ className, data, children, disabled, ...props }) => {
-  const innerRef = useRef<HTMLButtonElement>(null);
-  const onClick = async () => {
-    const response = await data;
-    const playAudio = async () => {
-      const audio = new Audio(String(response));
-      await audio.play();
-
-      return audio;
-    };
-    if (response) {
-      const audio = await playAudio();
-      audio.onended = () => {
-        innerRef.current?.click();
-      };
-    }
-  };
-  return (
-    <Button
-      onClick={() => {
-        onClick();
-      }}
-      className={`
-        hover:z-1000 hover:bg-scrapBlack
-        focus:ring-scrapOrange dark:bg-scrapBlack dark:text-scrapYellow dark:hover:bg-scrapWhite dark:hover:text-scrapBlack dark:focus:ring-scrapOrange inline-flex w-auto max-w-xl
-        items-center justify-center rounded-lg px-4 py-3
-        text-center text-sm font-medium transition duration-100 ease-in-out
-        hover:brightness-125 focus:outline-none focus:ring-4 dark:hover:font-bold
-        ${className}`.trim()}
-      disabled={disabled}
-      ref={innerRef}
-      {...props}
-    >
-      {children}
-    </Button>
-  );
-};
-
-MusicButton.displayName = "Button";
-
-export default MusicButton;

package/dist/ui/buttons/SignUpButton.tsx

@@ -1,18 +0,0 @@
-import React from "react";
-import GradientButton from "./GradientButton.js";
-
-const SignUpButton = ({
-  onClick,
-}: {
-  onClick: (event: React.MouseEvent<HTMLButtonElement>) => void;
-}) => {
-  return (
-    <GradientButton
-      title={"SIGN UP"}
-      className="mx-auto w-full bg-transparent px-6 py-2 font-semibold tracking-widest transition duration-200 ease-in-out hover:brightness-200"
-      onClick={onClick}
-    />
-  );
-};
-
-export default SignUpButton;

package/dist/ui/buttons/index.tsx

@@ -1,8 +0,0 @@
-export { default as Button } from "./Button.js";
-export { default as DisclosureButton } from "./DisclosureButton.js";
-export { default as GradientButton } from "./GradientButton.js";
-export { default as IconButton } from "./IconButton.js";
-export { default as LikeButton } from "./LikeButton.js";
-export { default as MobileMenuButton } from "./MobileMenuButton.js";
-export { default as MusicButton } from "./MusicButton.js";
-export { default as SignUpButton } from "./SignUpButton.js";

package/dist/ui/cards/Card.tsx

@@ -1,255 +0,0 @@
-import React, { forwardRef } from "react";
-import Button from "../buttons/Button";
-import Image from "../images/Image";
-import Container from "../shells/Container";
-import Field from "../shells/Field";
-import Heading from "../text/Heading";
-
-const Card = forwardRef<
-  HTMLDivElement,
-  {
-    className?: string;
-    name: string;
-    image: string;
-    label: string;
-    cta: string;
-  }
->(({ className, name, image, label, cta, ...props }, ref) => {
-  return (
-    <>
-      <Container
-        className="relative isolate z-10 p-0 lg:p-1"
-        ref={ref}
-        index={0}
-        {...props}
-      >
-        <Field className="mx-auto flex flex-col-reverse items-center md:flex-col lg:flex-row lg:gap-x-8">
-          <Image
-            className="border-scrapBlack mx-auto w-full max-w-md rounded-3xl p-2 shadow-2xl lg:w-1/2 lg:max-w-lg"
-            src={image}
-            alt={name}
-          />
-
-          <Field className="mx-auto w-full p-0 lg:w-1/2 lg:p-2">
-            <Heading
-              as={"h1"}
-              className={`text-scrapWhite dark:text-scrapYellow w-full max-w-screen-sm px-2 pt-4 text-center text-5xl font-bold tracking-tight lg:max-w-screen-lg lg:text-start lg:text-6xl ${className}`}
-              id={""}
-            >
-              {cta}
-            </Heading>
-
-            <Heading
-              as={"h2"}
-              className={`text-scrapYellow dark:text-scrapRed w-full max-w-screen-sm px-2 pb-3 pt-1 text-center text-xl font-semibold lg:max-w-screen-lg lg:text-start lg:text-2xl ${className}`}
-              id={""}
-            >
-              {label}
-            </Heading>
-
-            <Field className="invisible size-0 lg:visible lg:relative lg:size-auto lg:px-2">
-              <Button className="w-full">{name}</Button>
-            </Field>
-          </Field>
-        </Field>
-        <Field className="mx-auto w-full p-4 lg:hidden lg:size-0">
-          <Button>{name}</Button>
-        </Field>
-      </Container>
-    </>
-  );
-});
-Card.displayName = "Card";
-
-export default Card;
-// import React, { forwardRef } from "react";
-// import { Button } from "../buttons";
-// import { Image } from "../images";
-// import { Container, Field } from "../shells";
-// import { Heading } from "../text";
-
-// type CardProps = {
-//   className?: string;
-//   name: string;
-//   url: string;
-//   label: string;
-//   cta: string;
-// };
-
-// const Card = forwardRef<HTMLDivElement, CardProps>(
-//   ({ className = "", name, url, label, cta, ...props }, ref) => {
-//     return (
-//       <Container
-//         className={`relative isolate z-10 p-0 lg:p-1 ${className}`}
-//         ref={ref}
-//         index={0}
-//         {...props}
-//       >
-//         <Field className="mx-auto flex flex-col-reverse items-center md:flex-col lg:flex-row lg:gap-x-8">
-//           <Image
-//             className="border-scrapBlack mx-auto w-full rounded-3xl p-2 shadow-2xl lg:w-1/2"
-//             src={url}
-//             alt={name}
-//             loading="eager"
-//           />
-//           <Field className="mx-auto w-full p-0 lg:w-1/2 lg:p-2">
-//             <Heading
-//               id=""
-//               as="h1"
-//               className="text-scrapWhite w-full max-w-screen-sm px-2 pt-4 text-center text-5xl font-bold tracking-tight lg:max-w-screen-lg lg:text-start lg:text-6xl"
-//             >
-//               {cta}
-//             </Heading>
-//             <Heading
-//               id=""
-//               as="h2"
-//               className="text-scrapWhite w-full max-w-screen-sm px-2 pb-3 pt-1 text-center text-xl font-semibold lg:max-w-screen-lg lg:text-start lg:text-2xl"
-//             >
-//               {label}
-//             </Heading>
-//             <Field className="invisible size-0 lg:visible lg:relative lg:size-auto lg:px-2">
-//               <Button className="w-full">{name}</Button>
-//             </Field>
-//           </Field>
-//         </Field>
-//         <Field className="mx-auto w-full p-4 lg:hidden lg:size-0">
-//           <Button>{name}</Button>
-//         </Field>
-//       </Container>
-//     );
-//   },
-// );
-
-// Card.displayName = "Card";
-
-// export default Card;
-
-// import React, { forwardRef } from "react";
-// import { Button } from "../buttons";
-// import { Image } from "../images";
-// import { Container, Field } from "../shells";
-// import { Heading } from "../text";
-
-// const Card = forwardRef<
-//   HTMLDivElement,
-//   {
-//     className?: string;
-//     name: string;
-//     image: string;
-//     label: string;
-//     cta: string;
-//   }
-// >(({ name, image, label, cta, ...props }, ref) => {
-//   return (
-//     <>
-//       <Container
-//         className={` relative isolate z-10 p-0 lg:p-1`}
-//         ref={ref}
-//         index={0}
-//         {...props}
-//       >
-//         <Field className="mx-auto flex flex-col-reverse items-center md:flex-col lg:flex-row lg:gap-x-8">
-//           <Image
-//             className="border-scrapBlack mx-auto w-full rounded-3xl p-2 shadow-2xl lg:w-1/2"
-//             src={image}
-//             alt={name}
-//             loading="eager"
-//           />
-
-//           <Field className="mx-auto w-full p-0 lg:w-1/2 lg:p-2">
-//             <Heading
-//               as="h1"
-//               className="text-scrapWhite w-full max-w-screen-sm px-2 pt-4 text-center text-5xl font-bold tracking-tight lg:max-w-screen-lg lg:text-start lg:text-6xl"
-//               id=""
-//             >
-//               {cta}
-//             </Heading>
-
-//             <Heading
-//               as="h2"
-//               className="text-scrapWhite w-full max-w-screen-sm px-2 pb-3 pt-1 text-center text-xl font-semibold lg:max-w-screen-lg lg:text-start lg:text-2xl"
-//               id=""
-//             >
-//               {label}
-//             </Heading>
-
-//             <Field className="invisible size-0 lg:visible lg:relative lg:size-auto lg:px-2">
-//               <Button className="w-full">{name}</Button>
-//             </Field>
-//           </Field>
-//         </Field>
-//         <Field className="mx-auto w-full p-4 lg:hidden lg:size-0">
-//           <Button>{name}</Button>
-//         </Field>
-//       </Container>
-//     </>
-//   );
-// });
-// Card.displayName = "Card";
-
-// export default Card;
-
-// import React, { forwardRef } from "react";
-// import Button from "../buttons/Button";
-// import Image from "../images/Image";
-// import Container from "../shells/Container";
-// import Field from "../shells/Field";
-// import Heading from "../text/Heading";
-
-// const Card = forwardRef<
-//   HTMLDivElement,
-//   {
-//     className?: string;
-//     name: string;
-//     image: string;
-//     label: string;
-//     cta: string;
-//   }
-// >(({ className, name, image, label, cta, ...props }, ref) => {
-//   return (
-//     <>
-// <Container
-//   className="relative isolate z-10 p-0 lg:p-1"
-//   ref={ref}
-//   index={0}
-//   {...props}
-// >
-//   <Field className="mx-auto flex flex-col-reverse items-center md:flex-col lg:flex-row lg:gap-x-8">
-//     <Image
-//       className="border-scrapBlack mx-auto w-full max-w-md rounded-3xl p-2 shadow-2xl lg:w-1/2 lg:max-w-lg"
-//       src={image}
-//       alt={name}
-//     />
-
-//     <Field className="mx-auto w-full p-0 lg:w-1/2 lg:p-2">
-//       <Heading
-//         as={"h1"}
-//         className={` w-full max-w-screen-sm px-2 pt-4 text-center text-5xl font-bold tracking-tight lg:max-w-screen-lg lg:text-start lg:text-6xl ${className}`}
-//         id={""}
-//       >
-//         {cta}
-//       </Heading>
-
-//       <Heading
-//         as={"h2"}
-//         className={` w-full max-w-screen-sm px-2 pb-3 pt-1 text-center text-xl font-semibold lg:max-w-screen-lg lg:text-start lg:text-2xl ${className}`}
-//         id={""}
-//       >
-//         {label}
-//       </Heading>
-
-//       <Field className="invisible size-0 lg:visible lg:relative lg:size-auto lg:px-2">
-//         <Button className="w-full">{name}</Button>
-//       </Field>
-//     </Field>
-//   </Field>
-//   <Field className="mx-auto w-full p-4 lg:hidden lg:size-0">
-//     <Button>{name}</Button>
-//   </Field>
-// </Container>
-//     </>
-//   );
-// });
-// Card.displayName = "Card";
-
-// export default Card;