Add Paul's Toolbox Contents

components/ui/placeholder/index.tsx

@@ -0,0 +1,28 @@
+import { IconSad } from "~assets/icons";
+import type { PropsWithChildren } from "react";
+import styles from "./placeholder.module.less";
+
+interface PlaceholderProps extends PropsWithChildren {
+  className?: string;
+  show?: boolean;
+  value: string;
+}
+
+function Placeholder({ className, show, value, children }: PlaceholderProps) {
+  if (show === undefined || show) {
+    return (
+      <div className={styles.placeholder}>
+        <IconSad />
+        <p>{value}</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className={className}>
+      {children}
+    </div>
+  );
+}
+
+export default Placeholder;

components/ui/placeholder/placeholder.module.less

@@ -0,0 +1,13 @@
+.placeholder {
+  margin: 2em 0;
+  text-align: center;
+
+  svg {
+    width: 4em;
+    margin-bottom: 1em;
+  }
+
+  p {
+    opacity: .6;
+  }
+}