Spaces:

nikniksen
/

sf-fda

Running

App Files Files Community

nikniksen commited on Nov 20, 2023

Commit

5ab90e1

•

1 Parent(s): cdefb2d

Add 11 files

Browse files

Files changed (11) hide show

Dockerfile +57 -0
public/index.html +15 -0
public/styles.css +29 -0
src/components/Header.tsx +12 -0
src/components/Todo.tsx +16 -0
src/components/TodoList.tsx +42 -0
src/pages/index.tsx +14 -0
src/styles/Header.module.css +25 -0
src/styles/Todo.module.css +12 -0
src/styles/TodoList.module.css +13 -0
tsconfig.json +28 -0

Dockerfile ADDED Viewed

	@@ -0,0 +1,57 @@

+FROM node:18-alpine AS base
+# Install dependencies only when needed
+FROM base AS deps
+# Check https://github.com/nodejs/docker-node/tree/b4117f9333da4138b03a546ec926ef50a31506c3#nodealpine to understand why libc6-compat might be needed.
+RUN apk add --no-cache libc6-compat
+WORKDIR /app
+# Install dependencies based on the preferred package manager
+COPY package.json package-lock.json* ./
+RUN npm install
+# Uncomment the following lines if you want to use a secret at buildtime,
+# for example to access your private npm packages
+# RUN --mount=type=secret,id=HF_EXAMPLE_SECRET,mode=0444,required=true #     $(cat /run/secrets/HF_EXAMPLE_SECRET)
+# Rebuild the source code only when needed
+FROM base AS builder
+WORKDIR /app
+COPY --from=deps /app/node_modules ./node_modules
+COPY . .
+# Next.js collects completely anonymous telemetry data about general usage.
+# Learn more here: https://nextjs.org/telemetry
+# Uncomment the following line in case you want to disable telemetry during the build.
+# ENV NEXT_TELEMETRY_DISABLED 1
+RUN npm run build
+# Production image, copy all the files and run next
+FROM base AS runner
+WORKDIR /app
+ENV NODE_ENV production
+# Uncomment the following line in case you want to disable telemetry during runtime.
+# ENV NEXT_TELEMETRY_DISABLED 1
+RUN addgroup --system --gid 1001 nodejs
+RUN adduser --system --uid 1001 nextjs
+COPY --from=builder /app/public ./public
+# Automatically leverage output traces to reduce image size
+# https://nextjs.org/docs/advanced-features/output-file-tracing
+COPY --from=builder --chown=nextjs:nodejs /app/.next/standalone ./
+COPY --from=builder --chown=nextjs:nodejs /app/.next/static ./.next/static
+COPY --from=builder --chown=nextjs:nodejs /app/.next/cache ./.next/cache
+# COPY --from=builder --chown=nextjs:nodejs /app/.next/cache/fetch-cache ./.next/cache/fetch-cache
+USER nextjs
+EXPOSE 3000
+ENV PORT 3000
+CMD ["node", "server.js"]

public/index.html ADDED Viewed

	@@ -0,0 +1,15 @@

+<!DOCTYPE html>
+<html>
+ <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>To-Do List</title>
+    <link rel="stylesheet" href="styles.css">
+ </head>
+ <body>
+    <div class="container">
+      <h1>To-Do List</h1>
+      <TodoList />
+    </div>
+ </body>
+</html>

public/styles.css ADDED Viewed

	@@ -0,0 +1,29 @@

+body {
+ font-family: Arial, sans-serif;
+ margin: 0;
+ padding: 0;
+}
+.container {
+ max-width: 1200px;
+ margin: 0 auto;
+ padding: 20px;
+}
+.jumbotron {
+ background-color: #204070;
+ color: #fff;
+ padding: 20px;
+ border-radius: 5px;
+ margin-bottom: 20px;
+}
+.container h1 {
+ font-size: 24px;
+ margin-bottom: 10px;
+}
+.container h2 {
+ font-size: 18px;
+ margin-bottom: 10px;
+}

src/components/Header.tsx ADDED Viewed

	@@ -0,0 +1,12 @@

+import React from 'react';
+import styles from '../styles/Header.module.css';
+const Header = ({ title }) => {
+ return (
+    <header className={styles.header}>
+      <h1 className={styles.title}>{title}</h1>
+    </header>
+ );
+};
+export default Header;

src/components/Todo.tsx ADDED Viewed

	@@ -0,0 +1,16 @@

+import React from 'react';
+const Todo = ({ todo, onRemove }) => {
+ return (
+    <li key={todo.id}>
+      <div>{todo.name}</div>
+      <div className="actions">
+        <button className="btn btn-warning" onClick={() => onRemove(todo)}>
+          Remove
+        </button>
+      </div>
+    </li>
+ );
+};
+export default Todo;

src/components/TodoList.tsx ADDED Viewed

	@@ -0,0 +1,42 @@

+import React, { useState } from 'react';
+import Todo from '../components/Todo';
+const TodoList = () => {
+ const [todos, setTodos] = useState([]);
+ const addTodo = (todo) => {
+    setTodos([...todos, todo]);
+ };
+ const removeTodo = (todo) => {
+    setTodos(todos.filter((t) => t !== todo));
+ };
+ return (
+    <div className="todoList">
+      <h2 className="title">To-Do List</h2>
+      <ul>
+        {todos.map((todo) => (
+          <Todo key={todo.id} todo={todo} onRemove={() => removeTodo(todo)} />
+        ))}
+      </ul>
+      <form className="input-group input-symbol">
+        <input
+          type="text"
+          className="form-control"
+          placeholder="Add Todo"
+          aria-label="Add Todo"
+          aria-description="Enter todo name"
+          onSubmit={(e) => {
+            e.preventDefault();
+            addTodo({ id: uuid(), name: e.target.value, isCompleted: false });
+            e.target.value = '';
+          }}
+        />
+        <span className="input-group-btn"></span>
+      </form>
+    </div>
+ );
+};
+export default TodoList;

src/pages/index.tsx ADDED Viewed

	@@ -0,0 +1,14 @@

+import React from 'react';
+import Header from '../components/Header';
+import TodoList from '../components/TodoList';
+const HomePage = () => {
+ return (
+    <div>
+      <Header title="To-Do List" />
+      <TodoList />
+    </div>
+ );
+};
+export default HomePage;

src/styles/Header.module.css ADDED Viewed

	@@ -0,0 +1,25 @@

+.header {
+ background-color: #204070;
+ padding: 10px;
+ text-align: center;
+}
+.title {
+ font-size: 18px;
+ margin-bottom: 20px;
+}
+.input-group {
+ margin-bottom: 20px;
+}
+/* Button */
+.btn {
+ color: #fff;
+ background-color: #333;
+ padding: 8px 18px;
+ border: none;
+ border-radius: 4px;
+ cursor: pointer;
+ margin-right: 10px;
+}

src/styles/Todo.module.css ADDED Viewed

	@@ -0,0 +1,12 @@

+.todo {
+ padding: 10px;
+ border-bottom: 1px solid #ddd;
+}
+.name {
+ font-size: 16px;
+}
+.completed {
+ text-decoration: line-through;
+}

src/styles/TodoList.module.css ADDED Viewed

	@@ -0,0 +1,13 @@

+.todoList {
+ margin-top: 20px;
+}
+.title {
+ font-size: 24px;
+ margin-bottom: 20px;
+ text-align: center;
+}
+.input-group {
+ margin-bottom: 20px;
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,28 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["dom", "dom.iterable", "esnext"],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "forceConsistentCasingInFileNames": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "node",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "preserve",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@/*": ["./src/*"]
+    }
+  },
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
+  "exclude": ["node_modules"]
+}