ctrigose · ctrigose · Jun 8, 2024 · Jun 8, 2024
diff --git a/.yarn/install-state.gz b/.yarn/install-state.gz
diff --git a/package.json b/package.json
@@ -3,12 +3,14 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "antd": "^5.18.0",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-scripts": "5.0.1",
     "styled-components": "^6.1.11",
     "typescript": "^4.9.5",
-    "web-vitals": "^2.1.4"
+    "web-vitals": "^2.1.4",
+    "zod": "^3.23.8"
   },
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",

diff --git a/public/favicon.png b/public/favicon.png
diff --git a/public/index.html b/public/index.html
@@ -2,29 +2,16 @@
 <html lang="en">
   <head>
     <meta charset="utf-8" />
-    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
+    <link rel="icon" href="%PUBLIC_URL%/favicon.png" />
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#000000" />
-    <meta
-      name="description"
-      content="Web site created using create-react-app"
-    />
-    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
+    <meta name="description" content="Todo tracker" />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
-    <title>React App</title>
+    <title>Todo</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>

diff --git a/public/logo192.png b/public/logo192.png
diff --git a/public/logo512.png b/public/logo512.png
diff --git a/public/manifest.json b/public/manifest.json
@@ -1,25 +1,13 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
+  "short_name": "Todo",
+  "name": "Todo tracker",
   "icons": [
     {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
+      "src": "favicon.png",
+      "sizes": "512x512",
+      "type": "image/png"
     }
   ],
   "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
-}
+  "display": "standalone"
+}
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.test.tsx b/src/App.test.tsx
@@ -1,8 +1,8 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import App from './App';
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import App from "./app";
 
-test('renders learn react link', () => {
+test("renders learn react link", () => {
   render(<App />);
   const linkElement = screen.getByText(/learn react/i);
   expect(linkElement).toBeInTheDocument();

diff --git a/src/App.tsx b/src/App.tsx
@@ -1,26 +1,38 @@
-import React from 'react';
-import logo from './logo.svg';
-import './App.css';
+import { TodoItem } from "./component/todo-item";
+import { MainLayout } from "./layout/main-layout";
+import { Todo } from "./types";
 
-function App() {
+const fakeItems: Todo[] = [
+  {
+    id: "0",
+    name: "nexplore test",
+    timestamp: new Date().getTime().toString(),
+  },
+  {
+    id: "1",
+    name: "make lasagna",
+    timestamp: new Date().getTime().toString(),
+  },
+  {
+    id: "2",
+    name: "eat lasagna",
+    timestamp: new Date().getTime().toString(),
+  },
+  {
+    id: "3",
+    name: "test whether longer todo titles are supported",
+    timestamp: new Date().getTime().toString(),
+  },
+];
+
+const App = () => {
   return (
-    <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.tsx</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
-    </div>
+    <MainLayout>
+      {fakeItems.map((todo, idx) => (
+        <TodoItem key={idx} item={todo} />
+      ))}
+    </MainLayout>
   );
-}
+};
 
 export default App;
diff --git a/src/component/todo-item.tsx b/src/component/todo-item.tsx
@@ -0,0 +1,60 @@
+import { styled } from "styled-components";
+import { style } from "../styles/constants";
+import { Todo } from "../types";
+import { Checkbox, Typography } from "antd";
+import { useState } from "react";
+import { CheckboxChangeEvent } from "antd/es/checkbox";
+
+type Props = {
+  item: Todo;
+  handle?: {
+    edit: () => void;
+    remove: () => void;
+    setComplete: () => void;
+  };
+};
+
+/** Renders a todo item in a card of 100% width and variable height
+ *  and includes logic for managing its state
+ */
+export const TodoItem = ({ item }: Props) => {
+  const [isComplete, setIsComplete] = useState<boolean>();
+  const handleCheck = (e: CheckboxChangeEvent) => {
+    setIsComplete(e.target.checked);
+  };
+  return (
+    <ItemContainer>
+      <div>
+        <Checkbox onChange={handleCheck}></Checkbox>
+        <P style={{ textDecoration: isComplete ? "line-through" : "none" }}>
+          {item.name}
+        </P>
+      </div>
+      <ItemActions>
+        <Link>Edit</Link>
+        <Link>Remove</Link>
+      </ItemActions>
+    </ItemContainer>
+  );
+};
+
+const P = styled(Typography.Text)`
+  margin-left: 10px;
+`;
+const Link = styled(Typography.Link)`
+  font-size: 12;
+`;
+const ItemContainer = styled.div`
+  display: flex;
+  width: ${style.spacing.mainContent.width - 20}px;
+  max-width: 100%;
+  justify-content: space-between;
+  color: ${style.colors.light};
+  background: transparent;
+  padding: 5px 10px;
+`;
+const ItemActions = styled.div`
+  display: flex;
+  justify-content: space-between;
+  width: 100px;
+`;
diff --git a/src/index.css b/src/index.css
diff --git a/src/index.tsx b/src/index.tsx
@@ -1,15 +1,23 @@
-import React from 'react';
-import ReactDOM from 'react-dom/client';
-import './index.css';
-import App from './App';
-import reportWebVitals from './reportWebVitals';
+import React from "react";
+import ReactDOM from "react-dom/client";
+import { ConfigProvider, theme } from "antd";
+
+import App from "./app";
+import reportWebVitals from "./reportWebVitals";
+import "./styles/global.css";
 
 const root = ReactDOM.createRoot(
-  document.getElementById('root') as HTMLElement
+  document.getElementById("root") as HTMLElement
 );
 root.render(
   <React.StrictMode>
-    <App />
+    <ConfigProvider
+      theme={{
+        algorithm: theme.darkAlgorithm,
+      }}
+    >
+      <App />
+    </ConfigProvider>
   </React.StrictMode>
 );
 

diff --git a/src/layout/main-layout.tsx b/src/layout/main-layout.tsx
@@ -0,0 +1,32 @@
+import { ReactNode } from "react";
+import styled from "styled-components";
+import { style } from "../styles/constants";
+import { Typography } from "antd";
+const { Title } = Typography;
+
+type Props = { children: ReactNode };
+
+/** Renders children in a fixed component of 500px of width
+ *  below app title
+ */
+export const MainLayout = ({ children }: Props) => (
+  <FullViewport>
+    <Title>Todo</Title>
+    <MainContent>{children}</MainContent>
+  </FullViewport>
+);
+
+const FullViewport = styled.div`
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+  width: 100vw;
+  height: 100vh;
+  color: ${style.colors.light};
+  background: ${style.colors.dark};
+`;
+const MainContent = styled.div`
+  width: ${style.spacing.mainContent.width}px;
+  color: ${style.colors.dark};
+  background: rgb(20, 22, 24);
+`;
diff --git a/src/logo.svg b/src/logo.svg
diff --git a/src/service/todo-api.tsx b/src/service/todo-api.tsx
@@ -0,0 +1,3 @@
+class TodoAPI {}
+
+export { TodoAPI };
diff --git a/src/styles/constants.ts b/src/styles/constants.ts
@@ -0,0 +1,15 @@
+export const style = {
+  spacing: {
+    mainContent: {
+      width: 500,
+    },
+    horizontal: 100,
+    vertical: 20,
+  },
+  colors: {
+    dark: "#0F0A0A",
+    light: "#F5EFED",
+    secondary: "#2292A4",
+    lime: "#A4F52A",
+  },
+};
diff --git a/src/styles/global.css b/src/styles/global.css
@@ -0,0 +1,7 @@
+html,
+body {
+  padding: 0;
+  margin: 0;
+}
+
+@layer styled-components, antd;
diff --git a/src/types.ts b/src/types.ts
@@ -0,0 +1,5 @@
+export interface Todo {
+  id: string;
+  name: string;
+  timestamp: string;
+}