Constructing Pages

Author: AttAditya

src/components/Content/index.jsx

@@ -1,3 +1,4 @@
+import { Construction, Pickaxe } from "lucide-react";
 import "./style.css";
 
 export function Content({ content, loading }) {
@@ -37,6 +38,14 @@ export function Content({ content, loading }) {
   return (<>
     <div className="content">
       {!loading && decodeContent(content)}
+      {!loading && <div className="no-content">
+        <span className="no-content-icon">
+          <Pickaxe />
+        </span>
+        <span className="no-content-text">
+          This topic is currently being worked on.
+        </span>
+      </div>}
     </div>
   </>);
 }

src/components/Content/style.css

@@ -102,3 +102,47 @@
   );
 }
 
+.content .root:empty {
+  display: none;
+}
+
+.content .no-content {
+  height: 100%;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 1rem;
+}
+
+.content:has(.root:empty) .no-content {
+  display: flex;
+}
+
+.no-content-icon {
+  height: 4rem;
+  aspect-ratio: 1;
+  border-radius: 0.5rem;
+  padding: 0.5rem;
+  background: linear-gradient(
+    to bottom right,
+    var(--color-primary),
+    var(--color-secondary),
+    var(--color-tertiary)
+  );
+}
+
+.no-content-icon > * {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.no-content-text {
+  font-size: 1.25rem;
+  font-weight: 500;
+  color: var(--color-text-secondary);
+}
+