RaidBuilder/RaidBuilderWeb
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Added paging to accounts table

Browse Source
This commit is contained in:
Mattrixwv
2025-03-02 20:45:44 -05:00
parent d06d421d03
commit 7c3b462651
14 changed files with 266 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
src/components/button/DangerButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/DarkButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/LightButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/MoltenButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/PrimaryButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/SecondaryButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/SuccessButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/TertiaryButton.tsx
View File

@@ -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)
}
)}
>

21
src/components/button/WarningButton.tsx
View File

@@ -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)
}
)}
>

65
src/components/pagination/Pagination.tsx Normal file
View File

@@ -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(
<div
className="flex flex-row items-center justify-center w-full text-xl text-white"
>
<div
className="mr-8"
>
<PrimaryButton
shape="square"
className="w-9 h-9"
disabled={currentPage <= 1}
onClick={() => onChange(currentPage - 1)}
>
<BsChevronLeft/>
</PrimaryButton>
</div>
<div
className="flex flex-row items-center justify-center gap-4"
>
{
pages.map((page, index) => (
<PrimaryButton
key={index}
size="sm"
shape="square"
className="w-9 h-9"
disabled={(page === "...") || (page === currentPage)}
onClick={() => onChange(page as number)}
>
{page}
</PrimaryButton>
))
}
</div>
<div
className="ml-8"
>
<PrimaryButton
shape="square"
className="w-9 h-9"
disabled={currentPage >= totalPages}
onClick={() => onChange(currentPage + 1)}
>
<BsChevronRight/>
</PrimaryButton>
</div>
</div>
);
}