TODO

packages/cubby/src/components/Project.tsx

@@ -11,10 +11,24 @@ export function Project({ project, readme, files }: ProjectProps) {
   const name = project.name
   return (
     <>
+      <link rel="stylesheet" href="/src/css/project.css" />
       <p><a href="/">« Back</a></p>
       <div class="content-wrapper">
         <div class="main-content">
-          <p dangerouslySetInnerHTML={{ __html: marked.parse(readme) as string }} />
+          <div class="tab-container">
+            <input type="radio" id="readme-tab" name="tabs" checked hidden />
+            <input type="radio" id="todo-tab" name="tabs" hidden />
+            <div class="tab-buttons">
+              <label for="readme-tab" class="tab-button">README</label>
+              <label for="todo-tab" class="tab-button">TODO</label>
+            </div>
+            <div class="tab-content readme-content">
+              <p dangerouslySetInnerHTML={{ __html: marked.parse(readme) as string }} />
+            </div>
+            <div class="tab-content">
+              <iframe src={`https://todo.theworkshop.cc/todos/${name}`} />
+            </div>
+          </div>
         </div>
         <div class="side-content">
           <h2>Links</h2>

packages/cubby/src/css/project.css

@@ -0,0 +1,48 @@
+.tab-container {
+  width: 100%;
+  position: relative;
+}
+
+.tab-buttons {
+  display: flex;
+  margin-bottom: 20px;
+}
+
+.tab-button {
+  padding: 10px 20px;
+  border: none;
+  background: none;
+  cursor: pointer;
+  border-bottom: 2px solid transparent;
+}
+
+#readme-tab:checked ~ .tab-buttons label[for="readme-tab"],
+#todo-tab:checked ~ .tab-buttons label[for="todo-tab"] {
+  border-bottom: 2px solid #000;
+}
+
+.tab-content {
+  display: none;
+  width: 100%;
+  height: 600px;
+}
+
+#readme-tab:checked ~ .tab-content.readme-content,
+#todo-tab:checked ~ .tab-content:not(.readme-content) {
+  display: block;
+}
+
+.tab-content iframe {
+  width: 100%;
+  height: 100%;
+  border: none;
+}
+
+.readme-content {
+  height: 100%;
+  overflow-y: auto;
+}
+
+.readme-content h1 {
+  margin-top: 0;
+}

packages/cubby/src/js/project.js

@@ -77,6 +77,23 @@ uploadButton.addEventListener("click", () => {
     uploadFile(file)
 })
 
+document.addEventListener("DOMContentLoaded", () => {
+    const tabButtons = document.querySelectorAll(".tab-button")
+    const tabContents = document.querySelectorAll(".tab-content")
+
+    tabButtons.forEach(button => {
+        button.addEventListener("click", () => {
+            const tab = button.dataset.tab
+
+            tabButtons.forEach(btn => btn.classList.remove("active"))
+            tabContents.forEach(content => content.classList.remove("active"))
+
+            button.classList.add("active")
+            document.querySelector(`[data-content="${tab}"]`).classList.add("active")
+        })
+    })
+})
+
 document.addEventListener("dragenter", (e) => {
     e.preventDefault()
     e.stopPropagation()