+
{code}
diff --git a/client/src/components/base/buttons/IconButton.tsx b/client/src/components/base/buttons/IconButton.tsx
index d6c08d7..df839d2 100644
--- a/client/src/components/base/buttons/IconButton.tsx
+++ b/client/src/components/base/buttons/IconButton.tsx
@@ -20,7 +20,7 @@ const iconStyle = cn`
text-zinc-500
cursor-pointer
- hover:bg-zinc-800
+ hover:bg-slate-800
hover:text-white
- active:bg-zinc-900
+ active:bg-slate-900
`;
diff --git a/client/src/components/base/loading/CloneChildren.tsx b/client/src/components/base/loading/CloneChildren.tsx
new file mode 100644
index 0000000..4f5947a
--- /dev/null
+++ b/client/src/components/base/loading/CloneChildren.tsx
@@ -0,0 +1,30 @@
+import React, { useMemo } from "react";
+
+type CloneChildrenProps = {
+ className?: string;
+ count: number;
+ as?: "div" | "fragment";
+} & React.PropsWithChildren;
+
+/** Creates an array of children with the given count. Useful for creating loading skeletons.
+ * @returns An array of children.
+ * @example
+ *
+ * Child
+ *
+ */
+export const CloneChildren = ({
+ count,
+ children,
+}: CloneChildrenProps) => {
+
+ const childrenArray = useMemo(() => {
+ const array:React.ReactNode[] = []
+ for (let i = 0; i < count; i++) {
+ array.push(< React.Fragment key={i}>{children})
+ }
+ return array;
+ },[count,children])
+
+ return <>{childrenArray};
+};
\ No newline at end of file
diff --git a/client/src/components/base/loading/Skeleton.tsx b/client/src/components/base/loading/Skeleton.tsx
index c5dba85..700fdd3 100644
--- a/client/src/components/base/loading/Skeleton.tsx
+++ b/client/src/components/base/loading/Skeleton.tsx
@@ -2,5 +2,5 @@ import {cn} from "@/lib/utils";
/** Provides a simple rectangular skeleton for use when a component is loading. */
export function Skeleton({className}: { className?: string }) {
- return ;
+ return ;
}
diff --git a/client/src/components/base/loading/SkeletonTable.tsx b/client/src/components/base/loading/SkeletonTable.tsx
new file mode 100644
index 0000000..4669603
--- /dev/null
+++ b/client/src/components/base/loading/SkeletonTable.tsx
@@ -0,0 +1,24 @@
+import { CloneChildren } from "./CloneChildren";
+import { Skeleton } from "./Skeleton";
+
+export function SkeletonTable({className}:{className?:string}){
+ return (
+
+
+
+
+
+ )
+}
+
+function SkeletonTableRow(){
+ return (
+
+ )
+}
\ No newline at end of file
diff --git a/client/src/components/base/nav/Navbar.tsx b/client/src/components/base/nav/Navbar.tsx
index 9a69c40..b6058ea 100644
--- a/client/src/components/base/nav/Navbar.tsx
+++ b/client/src/components/base/nav/Navbar.tsx
@@ -12,7 +12,7 @@ import {cn} from "@/lib/utils";
export function Navbar({className}: {className?: string}) {
return (
-