...

src/components/ui/Container.tsx

@@ -0,0 +1,14 @@
+interface ContainerProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function Container({ children, className }: ContainerProps) {
+  return (
+    <div
+      className={`w-full max-w-2xl mx-auto bg-white border border-gray-200 rounded-2xl ${className}`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/ui/Input.tsx

@@ -0,0 +1,28 @@
+interface Props {
+  ref?: React.Ref<HTMLInputElement>;
+  placeholder?: string;
+  type?: string;
+  className?: string;
+  name?: string;
+  defaultValue?: string;
+}
+
+export default function Input({
+  ref,
+  placeholder = "",
+  type = "text",
+  className = "",
+  name = "",
+  defaultValue = "",
+}: Props) {
+  return (
+    <input
+      ref={ref}
+      placeholder={placeholder}
+      type={type}
+      className={`block focus:outline-none border-b-2 border-gray-600 ${className}`}
+      name={name}
+      defaultValue={defaultValue}
+    />
+  );
+}

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>
+  );
+}

src/components/ui/cards/ACard.tsx

@@ -0,0 +1,16 @@
+"use client";
+
+interface ACardProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function ACard({ children, className }: ACardProps) {
+  return (
+    <div
+      className={`${className} w-[95dvw] md:w-[61vw] h-96 p-2 md:shadow-2xl rounded-xl`}
+    >
+      {children}
+    </div>
+  );
+}

src/components/ui/cards/BCard.tsx

@@ -0,0 +1,12 @@
+"use client";
+
+interface BCardProps {
+  children?: React.ReactNode;
+  className?: string;
+}
+
+export default function BCard({ children, className }: BCardProps) {
+  return (
+    <div className={`${className} rounded-xl p-2 shadow-xl`}>{children}</div>
+  );
+}