@revealui/core 0.0.1-pre.0

package/dist/ui/buttons/LikeButton.tsx

@@ -0,0 +1,221 @@
+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

@@ -0,0 +1,63 @@
+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

@@ -0,0 +1,53 @@
+// 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

@@ -0,0 +1,18 @@
+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

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,255 @@
+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;