Add IconTrash component and Skeleton component

kobykotiv · Aug 17, 2024 · 5dae61d · 5dae61d
1 parent 09048e7
commit 5dae61d
Show file tree

Hide file tree

Showing 2 changed files with 42 additions and 0 deletions.
diff --git a/app/components/Icons.tsx b/app/components/Icons.tsx
@@ -449,3 +449,18 @@ export function IconCheckCircle(props: IconProps) {
     </svg>
   );
 }
+
+export function IconTrash(props: IconProps) {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="32"
+      height="32"
+      viewBox="0 0 256 256"
+      fill="currentColor"
+      {...props}
+    >
+      <path d="M216,48H176V40a24,24,0,0,0-24-24H104A24,24,0,0,0,80,40v8H40a8,8,0,0,0,0,16h8V208a16,16,0,0,0,16,16H192a16,16,0,0,0,16-16V64h8a8,8,0,0,0,0-16ZM96,40a8,8,0,0,1,8-8h48a8,8,0,0,1,8,8v8H96Zm96,168H64V64H192ZM112,104v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Zm48,0v64a8,8,0,0,1-16,0V104a8,8,0,0,1,16,0Z" />
+    </svg>
+  );
+}
diff --git a/app/components/Skeleton.tsx b/app/components/Skeleton.tsx
@@ -0,0 +1,27 @@
+import clsx from "clsx";
+
+/**
+ * A shared component and Suspense call that's used in `App.server.jsx` to let your app wait for code to load while declaring a loading state
+ */
+export function Skeleton({
+  as: Component = "div",
+  width,
+  height,
+  className,
+  ...props
+}: {
+  as?: React.ElementType;
+  width?: string;
+  height?: string;
+  className?: string;
+  [key: string]: any;
+}) {
+  return (
+    <Component
+      {...props}
+      width={width}
+      height={height}
+      className={clsx("rounded bg-body/10", className)}
+    />
+  );
+}