change manifest

client/package-lock.json

@@ -36,6 +36,7 @@
         "workbox-streams": "^6.6.0"
       },
       "devDependencies": {
+        "@tailwindcss/forms": "^0.5.6",
         "typescript": "^5.2.2"
       }
     },
@@ -3453,6 +3454,18 @@
         "url": "https://github.com/sponsors/gregberge"
       }
     },
+    "node_modules/@tailwindcss/forms": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/@tailwindcss/forms/-/forms-0.5.6.tgz",
+      "integrity": "sha512-Fw+2BJ0tmAwK/w01tEFL5TiaJBX1NLT1/YbWgvm7ws3Qcn11kiXxzNTEQDMs5V3mQemhB56l3u0i9dwdzSQldA==",
+      "dev": true,
+      "dependencies": {
+        "mini-svg-data-uri": "^1.2.3"
+      },
+      "peerDependencies": {
+        "tailwindcss": ">=3.0.0 || >= 3.0.0-alpha.1"
+      }
+    },
     "node_modules/@testing-library/dom": {
       "version": "9.3.1",
       "resolved": "https://registry.npmjs.org/@testing-library/dom/-/dom-9.3.1.tgz",
@@ -10553,6 +10566,15 @@
         "url": "https://opencollective.com/webpack"
       }
     },
+    "node_modules/mini-svg-data-uri": {
+      "version": "1.4.4",
+      "resolved": "https://registry.npmjs.org/mini-svg-data-uri/-/mini-svg-data-uri-1.4.4.tgz",
+      "integrity": "sha512-r9deDe9p5FJUPZAk3A59wGH7Ii9YrjjWw0jmw/liSbHl2CHiyXj6FcDXDu2K3TjVAXqiJdaw3xxwlZZr9E6nHg==",
+      "dev": true,
+      "bin": {
+        "mini-svg-data-uri": "cli.js"
+      }
+    },
     "node_modules/minimalistic-assert": {
       "version": "1.0.1",
       "resolved": "https://registry.npmjs.org/minimalistic-assert/-/minimalistic-assert-1.0.1.tgz",

client/package.json

@@ -60,6 +60,7 @@
     ]
   },
   "devDependencies": {
+    "@tailwindcss/forms": "^0.5.6",
     "typescript": "^5.2.2"
   }
 }

client/public/index.html

@@ -6,7 +6,7 @@
     <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" />
+    <link rel="apple-touch-icon" href="%PUBLIC_URL%/192_tao.png" />
     <!--
       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/

client/src/components/Home.tsx

@@ -2,6 +2,7 @@ import React, { useEffect, useState } from 'react';
 import { relayInit } from 'nostr-tools';
 import PostCard from './PostCard/PostCard';
 import Header from './Header/Header';
+import NewThreadCard from './PostCard/NewThreadCard';
 
 // Define the Event interface
 interface Event {
@@ -44,6 +45,7 @@ const Home = () => {
     <>
     <main className="bg-gray-950 text-white min-h-screen">
       <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
+        <NewThreadCard />
         {events.map((event, index) => (
           <PostCard key={index} content={event.content} />
         ))}

client/src/components/PostCard/NewThreadCard.tsx

@@ -0,0 +1,36 @@
+import CardContainer from './CardContainer';
+
+const NewThreadCard = () => {
+
+  return (
+    <>
+      <CardContainer>
+        <div className="flex flex-col">
+        <form name="post" method="post" encType="multipart/form-data"><input type="hidden" name="MAX_FILE_SIZE" defaultValue={4194304} />
+        <div id="togglePostFormLink" className="desktop">Start a New Thread
+        </div>
+        <table className="postForm" id="postForm">
+          <tbody>
+            <tr data-type="Comment">
+              <td><textarea name="com" wrap="soft" /></td>
+            </tr>
+            <tr data-type="File">
+              <td>File*</td>
+            </tr>
+          </tbody>
+          <tfoot>
+            <tr>
+              <td colSpan={2}>
+                <div id="postFormError" />
+              </td>
+            </tr>
+          </tfoot>
+        </table>
+      </form>
+        </div>
+      </CardContainer>
+    </>
+  );
+};
+
+export default NewThreadCard;

client/tailwind.config.js

@@ -4,6 +4,8 @@ module.exports = {
   theme: {
     extend: {},
   },
-  plugins: [],
+  plugins: [
+    require('@tailwindcss/forms'),
+  ],
 }