diff --git a/src/components/button/DangerButton.tsx b/src/components/button/DangerButton.tsx index da29e2a..e97d6c4 100644 --- a/src/components/button/DangerButton.tsx +++ b/src/components/button/DangerButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function DangerButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function DangerButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-red-600 hover:bg-red-700 active:bg-red-800": variant === "solid", - "bg-transparent hover:bg-red-600 active:bg-red-700": variant === "ghost" || variant === "outline-ghost" + "bg-red-600 hover:bg-red-700 active:bg-red-800": (variant === "solid") && (!disabled), + "bg-red-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-red-600 active:bg-red-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-red-600 hover:text-red-700 active:text-red-800": variant === "outline" || variant === "icon", - "text-red-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-red-600 hover:text-red-700 active:text-red-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-red-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-red-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-red-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-red-600 hover:outline-red-700 active:outline-red-800": variant === "solid" || variant === "outline", - "outline hover:outline-red-600 active:outline-red-700": variant === "outline-ghost" + "outline outline-red-600 hover:outline-red-700 active:outline-red-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-red-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-red-600 active:outline-red-700": (variant === "outline-ghost") && (!disabled), + "outline outline-red-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/DarkButton.tsx b/src/components/button/DarkButton.tsx index ce898f5..cd2283e 100644 --- a/src/components/button/DarkButton.tsx +++ b/src/components/button/DarkButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function DarkButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function DarkButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-black hover:bg-neutral-700 active:bg-neutral-500": variant === "solid", - "bg-transparent hover:bg-black active:bg-neutral-700": variant === "ghost" || variant === "outline-ghost" + "bg-black hover:bg-neutral-700 active:bg-neutral-500": (variant === "solid") && (!disabled), + "bg-neutral-700": (variant === "solid") && (disabled), + "bg-transparent hover:bg-black active:bg-neutral-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-black hover:text-neutral-700 active:text-neutral-500": variant === "outline" || variant === "icon", - "text-black hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-black hover:text-neutral-700 active:text-neutral-500": (variant === "outline" || variant === "icon") && (!disabled), + "text-neutral-700": (variant === "outline" || variant === "icon") && (disabled), + "text-black hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-neutral-700 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-black hover:outline-neutral-700 active:outline-neutral-500": variant === "solid" || variant === "outline", - "outline hover:outline-black active:outline-neutral-700": variant === "outline-ghost" + "outline outline-black hover:outline-neutral-700 active:outline-neutral-500": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-neutral-700": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-black active:outline-neutral-700": (variant === "outline-ghost") && (!disabled), + "outline outline-neutral-700 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/LightButton.tsx b/src/components/button/LightButton.tsx index 2617c75..6594611 100644 --- a/src/components/button/LightButton.tsx +++ b/src/components/button/LightButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function LightButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function LightButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-white hover:bg-neutral-300 active:bg-neutral-400": variant === "solid", - "bg-transparent hover:bg-white active:bg-neutral-300": variant === "ghost" || variant === "outline-ghost" + "bg-white hover:bg-neutral-300 active:bg-neutral-400": (variant === "solid") && (!disabled), + "bg-neutral-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-white active:bg-neutral-300": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-black": variant === "solid", - "text-white hover:text-neutral-300 active:text-neutral-400": variant === "outline" || variant === "icon", - "text-white hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost" + "text-white hover:text-neutral-300 active:text-neutral-400": (variant === "outline" || variant === "icon") && (!disabled), + "text-neutral-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-white hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-neutral-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-white hover:outline-neutral-300 active:outline-neutral-400": variant === "solid" || variant === "outline", - "outline hover:outline-neutral-300 active:outline-neutral-400": variant === "outline-ghost" + "outline outline-white hover:outline-neutral-300 active:outline-neutral-400": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-neutral-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-neutral-300 active:outline-neutral-400": (variant === "outline-ghost") && (!disabled), + "outline outline-neutral-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/MoltenButton.tsx b/src/components/button/MoltenButton.tsx index d99993b..a458628 100644 --- a/src/components/button/MoltenButton.tsx +++ b/src/components/button/MoltenButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function MoltenButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function MoltenButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-orange-600 hover:bg-orange-700 active:bg-orange-800": variant === "solid", - "bg-transparent hover:bg-orange-600 active:bg-orange-700": variant === "ghost" || variant === "outline-ghost" + "bg-orange-600 hover:bg-orange-700 active:bg-orange-800": (variant === "solid") && (!disabled), + "bg-orange-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-orange-600 active:bg-orange-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-orange-600 hover:text-orange-700 active:text-orange-800": variant === "outline" || variant === "icon", - "text-orange-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-orange-600 hover:text-orange-700 active:text-orange-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-orange-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-orange-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-orange-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": variant === "solid" || variant === "outline", - "outline hover:outline-orange-600 active:outline-orange-700": variant === "outline-ghost" + "outline outline-orange-600 hover:outline-orange-700 active:outline-orange-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-orange-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-orange-600 active:outline-orange-700": (variant === "outline-ghost") && (!disabled), + "outline outline-orange-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/PrimaryButton.tsx b/src/components/button/PrimaryButton.tsx index c8c389f..ee4df82 100644 --- a/src/components/button/PrimaryButton.tsx +++ b/src/components/button/PrimaryButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function PrimaryButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function PrimaryButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-blue-600 hover:bg-blue-700 active:bg-blue-800": variant === "solid", - "bg-transparent hover:bg-blue-600 active:bg-blue-700": variant === "ghost" || variant === "outline-ghost" + "bg-blue-600 hover:bg-blue-700 active:bg-blue-800": (variant === "solid") && (!disabled), + "bg-blue-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-blue-600 active:bg-blue-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-blue-600 hover:text-blue-700 active:text-blue-800": variant === "outline" || variant === "icon", - "text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-blue-600 hover:text-blue-700 active:text-blue-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-blue-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-blue-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost", + "text-blue-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": variant === "solid" || variant === "outline", - "outline hover:outline-blue-600 active:outline-blue-700": variant === "outline-ghost" + "outline outline-blue-600 hover:outline-blue-700 active:outline-blue-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-blue-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-blue-600 active:outline-blue-700": (variant === "outline-ghost") && (!disabled), + "outline outline-blue-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/SecondaryButton.tsx b/src/components/button/SecondaryButton.tsx index faec0cc..6ab1ab8 100644 --- a/src/components/button/SecondaryButton.tsx +++ b/src/components/button/SecondaryButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function SecondaryButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function SecondaryButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": variant === "solid", - "bg-transparent hover:bg-neutral-500 active:bg-neutral-600": variant === "ghost" || variant === "outline-ghost" + "bg-neutral-500 hover:bg-neutral-600 active:bg-neutral-700": (variant === "solid") && (!disabled), + "bg-neutral-700": (variant === "solid") && (disabled), + "bg-transparent hover:bg-neutral-500 active:bg-neutral-600": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-neutral-500 hover:text-neutral-600 active:text-neutral-700": variant === "outline" || variant === "icon", - "text-neutral-500 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-neutral-500 hover:text-neutral-600 active:text-neutral-700": (variant === "outline" || variant === "icon") && (!disabled), + "text-neutral-700": (variant === "outline" || variant === "icon") && (disabled), + "text-neutral-500 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-neutral-700 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": variant === "solid" || variant === "outline", - "outline hover:outline-neutral-500 active:outline-neutral-600": variant === "outline-ghost" + "outline outline-neutral-500 hover:outline-neutral-600 active:outline-neutral-700": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-neutral-700": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-neutral-500 active:outline-neutral-600": (variant === "outline-ghost") && (!disabled), + "outline outline-neutral-700 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/SuccessButton.tsx b/src/components/button/SuccessButton.tsx index 58ae69f..eccb60e 100644 --- a/src/components/button/SuccessButton.tsx +++ b/src/components/button/SuccessButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function SuccessButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function SuccessButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-green-600 hover:bg-green-700 active:bg-green-800": variant === "solid", - "bg-transparent hover:bg-green-600 active:bg-green-700": variant === "ghost" || variant === "outline-ghost" + "bg-green-600 hover:bg-green-700 active:bg-green-800": (variant === "solid") && (!disabled), + "bg-green-300/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-green-600 active:bg-green-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-green-600 hover:text-green-700 active:text-green-800": variant === "outline" || variant === "icon", - "text-green-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-green-600 hover:text-green-700 active:text-green-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-green-300/80": (variant === "outline" || variant === "icon") && (disabled), + "text-green-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-green-300/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-green-600 hover:outline-green-700 active:outline-green-800": variant === "solid" || variant === "outline", - "outline hover:outline-green-600 active:outline-green-700": variant === "outline-ghost" + "outline outline-green-600 hover:outline-green-700 active:outline-green-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-green-300/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-green-600 active:outline-green-700": (variant === "outline-ghost") && (!disabled), + "outline outline-green-300/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/TertiaryButton.tsx b/src/components/button/TertiaryButton.tsx index 3a44e43..642974e 100644 --- a/src/components/button/TertiaryButton.tsx +++ b/src/components/button/TertiaryButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function TertiaryButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function TertiaryButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-purple-600 hover:bg-purple-700 active:bg-purple-800": variant === "solid", - "bg-transparent hover:bg-purple-600 active:bg-purple-700": variant === "ghost" || variant === "outline-ghost" + "bg-purple-600 hover:bg-purple-700 active:bg-purple-800": (variant === "solid") && (!disabled), + "bg-purple-400/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-purple-600 active:bg-purple-700": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-white": variant === "solid", - "text-purple-600 hover:text-purple-700 active:text-purple-800": variant === "outline" || variant === "icon", - "text-purple-600 hover:text-white active:text-white": variant === "ghost" || variant === "outline-ghost" + "text-purple-600 hover:text-purple-700 active:text-purple-800": (variant === "outline" || variant === "icon") && (!disabled), + "text-purple-400/80": (variant === "outline" || variant === "icon") && (disabled), + "text-purple-600 hover:text-white active:text-white": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-purple-400/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": variant === "solid" || variant === "outline", - "outline hover:outline-purple-600 active:outline-purple-700": variant === "outline-ghost" + "outline outline-purple-600 hover:outline-purple-700 active:outline-purple-800": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-purple-400/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-purple-600 active:outline-purple-700": (variant === "outline-ghost") && (!disabled), + "outline outline-purple-400/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/button/WarningButton.tsx b/src/components/button/WarningButton.tsx index 7297b58..f131ef0 100644 --- a/src/components/button/WarningButton.tsx +++ b/src/components/button/WarningButton.tsx @@ -4,7 +4,8 @@ import Button, { ButtonProps } from "./Button"; export default function WarningButton(props: ButtonProps){ const { - variant = "solid" + variant = "solid", + disabled } = props; @@ -16,20 +17,26 @@ export default function WarningButton(props: ButtonProps){ //Background { "bg-transparent": variant === "outline" || variant === "icon", - "bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": variant === "solid", - "bg-transparent hover:bg-yellow-400 active:bg-yellow-500": variant === "ghost" || variant === "outline-ghost" + "bg-yellow-400 hover:bg-yellow-500 active:bg-yellow-600": (variant === "solid") && (!disabled), + "bg-yellow-600/80": (variant === "solid") && (disabled), + "bg-transparent hover:bg-yellow-400 active:bg-yellow-500": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "bg-transparent ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Text { "text-black": variant === "solid", - "text-yellow-400 hover:text-yellow-500 active:text-yellow-600": variant === "outline" || variant === "icon", - "text-yellow-400 hover:text-black active:text-black": variant === "ghost" || variant === "outline-ghost" + "text-yellow-400 hover:text-yellow-500 active:text-yellow-600": (variant === "outline" || variant === "icon") && (!disabled), + "text-yellow-600/80": (variant === "outline" || variant === "icon") && (disabled), + "text-yellow-400 hover:text-black active:text-black": (variant === "ghost" || variant === "outline-ghost") && (!disabled), + "text-yellow-600/80 ": (variant === "ghost" || variant === "outline-ghost") && (disabled) }, //Outline { "outline-none": variant === "ghost" || variant === "icon", - "outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": variant === "solid" || variant === "outline", - "outline hover:outline-yellow-400 active:outline-yellow-500": variant === "outline-ghost" + "outline outline-yellow-400 hover:outline-yellow-500 active:outline-yellow-600": (variant === "solid" || variant === "outline") && (!disabled), + "outline outline-yellow-600/80": (variant === "solid" || variant === "outline") && (disabled), + "outline hover:outline-yellow-400 active:outline-yellow-500": (variant === "outline-ghost") && (!disabled), + "outline outline-yellow-600/80 ": (variant === "outline-ghost") && (disabled) } )} > diff --git a/src/components/pagination/Pagination.tsx b/src/components/pagination/Pagination.tsx new file mode 100644 index 0000000..224266d --- /dev/null +++ b/src/components/pagination/Pagination.tsx @@ -0,0 +1,65 @@ +import { generatePagination } from "@/util/PaginationUtil"; +import { BsChevronLeft, BsChevronRight } from "react-icons/bs"; +import PrimaryButton from "../button/PrimaryButton"; + +export default function Pagination({ + currentPage, + totalPages, + onChange +}:{ + currentPage: number; + totalPages: number; + onChange: (page: number) => void; +}){ + const pages = generatePagination(currentPage, totalPages); + + + return( +