Merge pull request #1 from dlmarques/develop

MVP 1

Author: dlmarques

LICENSE

@@ -2,6 +2,7 @@
   "name": "my-app",
   "private": true,
   "type": "module",
+  "license": "AGPL-3.0",
   "scripts": {
     "start": "vite --port 3000",
     "build": "vite build && tsc",

README.md

@@ -0,0 +1,24 @@
+const About = () => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column", gap: "64px" }}>
+      <h1 style={{ textAlign: "center" }}>Learn in 5 minutes</h1>
+      <div>
+        <p>
+          Learn in 5 minutes is a simple AI powered project, the purpose is
+          generate a new Computer Science/Programming concept everyday and
+          provide a simple and catchy explanation.
+        </p>
+      </div>
+      <div>
+        <p>
+          5 minutes of your day, while you drink a coffee, while you wait for a
+          deploy, while you wait for massive packages installation, only 5
+          minutes from your day it will be enough to learn something new or
+          refresh your memory from forgot concepts.
+        </p>
+      </div>
+    </div>
+  );
+};
+
+export default About;

package.json

@@ -11,12 +11,13 @@ const Topic = () => {
     isError,
     isLoading,
   } = useQuery({
-    queryKey: ["todos"],
+    queryKey: ["topics"],
     queryFn: getTopic,
   });
 
   if (isLoading) return <div>loading...</div>;
 
+  // TODO - handle error
   if (isError) return <div>Error</div>;
 
   const topic = response?.data.content;

src/features/about/index.tsx

@@ -1,3 +1,6 @@
+// Copyright (c) 2025 Daniel Marques
+// Licensed under the GNU AGPL v3. See LICENSE.
+
 import { StrictMode, Suspense } from "react";
 import ReactDOM from "react-dom/client";
 import {

src/features/topic/index.tsx

@@ -1,8 +1,30 @@
+import Footer from "@/shared/components/footer";
 import React from "react";
 
-// TODO - simple about
-const About = () => {
-  return <div>About</div>;
+const About = React.lazy(() => import("../features/about"));
+
+const AboutPage = () => {
+  return (
+    <main
+      style={{
+        padding: "32px",
+        maxHeight: "100vh",
+        display: "flex",
+        justifyContent: "center",
+        overflowY: "auto",
+        overflowX: "hidden",
+      }}
+    >
+      <div
+        style={{
+          width: "50vw",
+        }}
+      >
+        <About />
+        <Footer />
+      </div>
+    </main>
+  );
 };
 
-export default About;
+export default AboutPage;

src/main.tsx

@@ -1,3 +1,4 @@
+import Footer from "@/shared/components/footer";
 import React from "react";
 
 const Topic = React.lazy(() => import("../features/topic"));
@@ -20,6 +21,7 @@ const TopicPage = () => {
         }}
       >
         <Topic />
+        <Footer />
       </div>
     </main>
   );

src/pages/About.tsx

@@ -3,7 +3,7 @@ import { FaJava, FaJs, FaPython, FaPhp } from "react-icons/fa";
 import { TbBrandCSharp } from "react-icons/tb";
 import { SiCplusplus, SiTypescript } from "react-icons/si";
 import { CodeBlock } from "react-code-block";
-import type { TopicExample } from "@/types/Topic";
+import { Languages, type TopicExample } from "@/types/Topic";
 
 const ProgrammingLanguagesTabs = [
   { lang: "JavaScript", icon: <FaJs /> },
@@ -17,7 +17,10 @@ const ProgrammingLanguagesTabs = [
 
 const CodeExample = ({ examples }: { examples: TopicExample[] }) => {
   return (
-    <Card.Root size="sm" style={{ background: "#222222" }}>
+    <Card.Root
+      size="sm"
+      style={{ background: "#222222", overflowX: "auto", padding: "0 8px" }}
+    >
       <Tabs.Root defaultValue={examples[0].language} variant="plain">
         <Tabs.List>
           {ProgrammingLanguagesTabs.filter((tab) => {
@@ -37,7 +40,10 @@ const CodeExample = ({ examples }: { examples: TopicExample[] }) => {
         {examples.map((example) => {
           return (
             <Tabs.Content value={example.language}>
-              <CodeBlock code={`${example.code}`} language="python">
+              <CodeBlock
+                code={`${example.code}`}
+                language={Languages[example.language]}
+              >
                 <CodeBlock.Code style={{ padding: "16px" }}>
                   <CodeBlock.LineContent>
                     <CodeBlock.Token />

src/pages/Topic.tsx

@@ -0,0 +1,30 @@
+import { Link, useLocation } from "@tanstack/react-router";
+
+const Footer = ({ customStyles }: { customStyles?: React.CSSProperties }) => {
+  const { pathname } = useLocation();
+  return (
+    <div
+      style={{
+        display: "flex",
+        flexDirection: "column",
+        alignItems: "center",
+        paddingTop: "16px",
+        ...customStyles,
+      }}
+    >
+      {pathname === "/" && (
+        <Link to="/about">
+          <p>Click here to visit about page</p>
+        </Link>
+      )}
+      {pathname === "/about" && (
+        <Link to="/">
+          <p>Click here to visit topic page</p>
+        </Link>
+      )}
+      <p style={{ fontSize: "14px" }}>@2025 dlmarques</p>
+    </div>
+  );
+};
+
+export default Footer;