initial commit

2024-09-02 23:59:12 +07:00
commit 9178ea08ac
35 changed files with 4931 additions and 0 deletions
@@ -0,0 +1,183 @@
+import { useEffect, useMemo, useState } from "react";
+import Playground from "../../../components/containers/playground";
+import { Braces, Code, CodeXml, PencilRuler } from "lucide-react";
+import { TestCase } from "../../../lib/playground";
+import Button from "@ui/button";
+import { cn } from "@/lib/utils";
+import { CodeEditorFile } from "@/components/containers/code-editor";
+import ThemeSelector from "@/components/containers/theme-selector";
+
+const initialBody = `
+<pre id="print-area"></pre>
+`;
+
+const initialInitScript = `
+const printAreaEl = document.getElementById("print-area");
+function print(...args) {
+    printAreaEl.innerHTML += args.map(String).join('');
+}
+`;
+
+const initialScript = `
+let a = 4;
+
+// Hasil dari 'a' dikali 2
+let b = a * 2;
+
+// Hasil dari penjumlahan a dan b
+let c = // lengkapi disini
+
+// Fungsi untuk menambahkan dua bilangan
+function tambah(a, b) {
+  // lengkapi disini
+}
+
+for (let i=0; i<=5; i++) {
+  for (let j=0; j<=i; j++) {
+    print('*');
+  }
+  print('\\n');
+}
+`;
+
+const initialStyle = `
+body {
+    padding: 1rem;
+}
+
+button {
+    background: #f5f5f5;
+    border: 1px solid #f5f5f5;
+    padding: 0.5rem 1rem;
+    border-radius: 0.5rem;
+    cursor: pointer;
+    display: block;
+}
+
+button:hover {
+    background: #e5e5e5;
+}
+`;
+
+const LearnViewPage = () => {
+  const files: CodeEditorFile[] = useMemo(() => {
+    return [
+      {
+        uri: "body.html",
+        // title: "HTML",
+        // icon: CodeXml,
+        lang: "html",
+        content: initialBody,
+        hidden: true,
+      },
+      {
+        uri: "init.js",
+        icon: Braces,
+        lang: "javascript",
+        content: initialInitScript,
+        hidden: true,
+      },
+      {
+        uri: "script.js",
+        title: "Script",
+        icon: Braces,
+        lang: "javascript",
+        content: initialScript,
+        pinned: true,
+      },
+      // {
+      //   uri: "style.css",
+      //   title: "Style",
+      //   icon: PencilRuler,
+      //   lang: "css",
+      //   content: initialStyle,
+      // },
+    ];
+  }, []);
+
+  const tests: TestCase[] = [
+    {
+      name: "Hasil dari b = a x 2",
+      test: "b",
+      expected: 8,
+    },
+    {
+      name: "Hasil dari c = a + b",
+      test: "c",
+      expected: 12,
+    },
+    {
+      name: "Hasil 1 + 2",
+      test: "tambah(1, 2)",
+      expected: 3,
+    },
+  ];
+
+  return (
+    <div className="flex flex-row items-stretch h-screen overflow-hidden">
+      <aside className="w-[250px] bg-base-100 fixed top-0 left-0 h-full z-10 -translate-x-full md:static md:translate-x-0">
+        Sidebar
+        <ThemeSelector
+          className="absolute left-4 bottom-4"
+          position="top"
+          align="default"
+        />
+      </aside>
+
+      <main className="flex-1 bg-base-100 overflow-y-auto">
+        <article className="p-4 md:p-8 prose">
+          <h1>Lorem Ipsum</h1>
+          <p>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam
+            laoreet suscipit pretium. Nunc vehicula interdum condimentum.
+            Maecenas vitae enim dui. Vestibulum luctus tincidunt nisl et
+            molestie. Mauris sollicitudin velit consectetur ante porttitor, quis
+            commodo justo porta. Integer vestibulum ante urna, et fringilla
+            lorem faucibus egestas. Nunc laoreet mollis blandit. Fusce ut mauris
+            nibh. Sed orci dolor, fringilla a magna quis, aliquam imperdiet
+            purus. Nullam tellus sapien, luctus non volutpat non, venenatis eu
+            purus. Etiam elit arcu, dapibus nec pulvinar eu, blandit sed lacus.
+            Aliquam euismod id ligula in blandit.
+          </p>
+
+          <p>
+            In vel vulputate dolor. Duis bibendum viverra ex, sit amet molestie
+            dui pulvinar quis. Donec varius dictum orci. Donec sollicitudin quam
+            eu massa ullamcorper porta. In sed ex mauris. Vestibulum ante ipsum
+            primis in faucibus orci luctus et ultrices posuere cubilia curae;
+            Nunc ultrices, enim a porttitor feugiat, leo nisl venenatis enim, in
+            pretium velit leo quis purus. Quisque eget sapien sem. Pellentesque
+            hendrerit, sapien ac sodales vestibulum, massa nulla sollicitudin
+            neque, vitae condimentum metus leo nec magna. Aliquam sit amet
+            porttitor leo. Morbi a massa nec magna ultrices efficitur et
+            vulputate nunc. Aliquam id convallis nisl.
+          </p>
+
+          <p>
+            Praesent efficitur quis dui nec sagittis. Vestibulum finibus
+            vulputate nisi a ultricies. Quisque auctor nunc ut felis placerat,
+            eget scelerisque sapien rhoncus. Suspendisse sollicitudin sed lacus
+            in mattis. Duis ut egestas arcu. Integer convallis consequat dolor.
+            Nulla tincidunt sem nunc, rutrum congue eros ornare euismod. Quisque
+            vitae massa risus. Sed sodales facilisis iaculis. Etiam interdum
+            massa sit amet purus consequat finibus at sit amet mauris.
+            Vestibulum dapibus velit sit amet mauris lobortis, ut scelerisque
+            nulla lacinia. Donec quis dictum leo, id luctus mi.
+          </p>
+        </article>
+      </main>
+
+      <Playground
+        className="flex-1"
+        files={files}
+        tests={tests}
+        persistId="test"
+        // showHiddenFiles
+        // showLogs={false}
+        // preview
+      />
+    </div>
+  );
+};
+
+export default LearnViewPage;