...

src/components/ui/buttons/DarkButton.tsx

@@ -0,0 +1,25 @@
+import PlainButton, { ButtonType } from "./PlainButton";
+
+export default function DarkButton({
+  onClick,
+  className,
+  selected,
+  children,
+  type = "button",
+}: {
+  onClick?: () => void;
+  className?: string;
+  selected?: boolean;
+  children?: React.ReactNode;
+  type?: ButtonType;
+}) {
+  return (
+    <PlainButton
+      onClick={onClick}
+      className={`hover:bg-gray-600 text-white ${selected ? "bg-gray-600" : "bg-gray-800"} ${className}`}
+      type={type}
+    >
+      {children}
+    </PlainButton>
+  );
+}

src/components/ui/buttons/GhostButton.tsx

@@ -0,0 +1,27 @@
+import Link from "next/link";
+
+export type ButtonType = "button" | "submit" | "reset" | undefined;
+
+export default function GhostButton({
+    onClick,
+    className,
+    children,
+    type = "button",
+    href
+}: {
+    onClick?: () => void;
+    className?: string;
+    children?: React.ReactNode;
+    type?: ButtonType;
+    href?: string;
+}) {
+    return (
+        <button
+            onClick={onClick}
+            className={`rounded hover:bg-black/30 p-2 ${className}`}
+            type={type}
+        >
+            {href ? <Link href={href}>{children}</Link> : children}
+        </button>
+    );
+}

src/components/ui/buttons/IconClick.tsx

@@ -0,0 +1,29 @@
+import Image from "next/image";
+
+interface IconClickProps {
+  src: string;
+  alt: string;
+  onClick?: () => void;
+  className?: string;
+  size?: number;
+  disableOnHoverBgChange?: boolean;
+}
+export default function IconClick({
+  src,
+  alt,
+  onClick = () => {},
+  className = "",
+  size = 32,
+  disableOnHoverBgChange = false,
+}: IconClickProps) {
+  return (
+    <>
+      <div
+        onClick={onClick}
+        className={`${disableOnHoverBgChange ? "" : "hover:bg-gray-200"} hover:cursor-pointer rounded-3xl w-[${size}px] h-[${size}px] flex justify-center items-center ${className}`}
+      >
+        <Image src={src} width={size - 5} height={size - 5} alt={alt}></Image>
+      </div>
+    </>
+  );
+}

src/components/ui/buttons/LightButton.tsx

@@ -0,0 +1,25 @@
+import PlainButton, { ButtonType } from "../buttons/PlainButton";
+
+export default function LightButton({
+  onClick,
+  className,
+  selected,
+  children,
+  type = "button",
+}: {
+  onClick?: () => void;
+  className?: string;
+  selected?: boolean;
+  children?: React.ReactNode;
+  type?: ButtonType;
+}) {
+  return (
+    <PlainButton
+      onClick={onClick}
+      className={`hover:bg-gray-200 text-gray-800 ${selected ? "bg-gray-200" : "bg-white"} ${className}`}
+      type={type}
+    >
+      {children}
+    </PlainButton>
+  );
+}

src/components/ui/buttons/PlainButton.tsx

@@ -0,0 +1,23 @@
+export type ButtonType =  "button" | "submit" | "reset" | undefined;
+
+export default function PlainButton({
+  onClick,
+  className,
+  children,
+  type = "button",
+}: {
+  onClick?: () => void;
+  className?: string;
+  children?: React.ReactNode;
+    type?: ButtonType;
+}) {
+  return (
+    <button
+      onClick={onClick}
+      className={`px-2 py-1 rounded shadow font-bold hover:cursor-pointer ${className}`}
+      type={type}
+    >
+      {children}
+    </button>
+  );
+}