UI and PoW

client/package-lock.json

@@ -8,6 +8,7 @@
       "name": "client",
       "version": "0.1.0",
       "dependencies": {
+        "@heroicons/react": "^2.0.18",
         "@testing-library/jest-dom": "^5.17.0",
         "@testing-library/react": "^13.4.0",
         "@testing-library/user-event": "^13.5.0",
@@ -2513,6 +2514,14 @@
         "node": "^12.22.0 || ^14.17.0 || >=16.0.0"
       }
     },
+    "node_modules/@heroicons/react": {
+      "version": "2.0.18",
+      "resolved": "https://registry.npmjs.org/@heroicons/react/-/react-2.0.18.tgz",
+      "integrity": "sha512-7TyMjRrZZMBPa+/5Y8lN0iyvUU/01PeMGX2+RE7cQWpEUIcb4QotzUObFkJDejj/HUH4qjP/eQ0gzzKs2f+6Yw==",
+      "peerDependencies": {
+        "react": ">= 16"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.11",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",

client/package.json

@@ -3,6 +3,7 @@
   "version": "0.1.0",
   "private": true,
   "dependencies": {
+    "@heroicons/react": "^2.0.18",
     "@testing-library/jest-dom": "^5.17.0",
     "@testing-library/react": "^13.4.0",
     "@testing-library/user-event": "^13.5.0",

client/public/manifest.json

@@ -21,5 +21,5 @@
   "start_url": ".",
   "display": "standalone",
   "theme_color": "#000000",
-  "background_color": "#ffffff"
+  "background_color": "#000000"
 }

client/src/components/Header/Header.tsx

@@ -0,0 +1,11 @@
+import { CogIcon } from '@heroicons/react/24/outline';
+
+export default function Header() {
+    return (
+        <footer className="fixed bottom-0 z-20 w-full bg-gray-900 shadow-lg shadow-black">
+                <label tabIndex={0} className="btn-ghost btn-circle btn">
+                    <CogIcon className="h-24 w-24 text-white right-0" />
+                </label>
+        </footer>
+    );
+}

client/src/components/Home.tsx

@@ -1,6 +1,7 @@
 import React, { useEffect, useState } from 'react';
 import { relayInit } from 'nostr-tools';
 import PostCard from './PostCard/PostCard';
+import Header from './Header/Header';
 
 // Define the Event interface
 interface Event {
@@ -10,7 +11,7 @@ interface Event {
   // Add other fields if necessary
 }
 
-const relay = relayInit('wss://powrelay.xyz');
+const relay = relayInit('wss://relay.damus.io');
 
 const Home = () => {
   // Define the type of the state variable
@@ -22,6 +23,7 @@ const Home = () => {
 
       const eventList = await relay.list([
         {
+          ids: ['0000'],
           kinds: [1],
           limit: 10,
         },
@@ -39,13 +41,16 @@ const Home = () => {
   }, []);
 
   return (
-    <div className="bg-gray-900 text-white min-h-screen">
+    <>
+    <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">
         {events.map((event, index) => (
           <PostCard key={index} content={event.content} />
         ))}
       </div>
-    </div>
+    </main>
+    <Header />
+    </>
   );
 };
 

client/src/components/PostCard/CardContainer.tsx

@@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
 export default function CardContainer({ children }: PropsWithChildren) {
   return (
     <div className="card bg-gradient-to-r from-base-200 to-base-100 shadow-lg shadow-black">
-      <div className="card-body gap-4 p-4">{children}</div>
+      <div className="card-body p-4">{children}</div>
     </div>
   );
 }

client/src/components/PostCard/PostCard.tsx

@@ -5,12 +5,11 @@ const PostCard = ({ content }: { content: string }) => {
   return (
     <>
       <CardContainer>
-        <div className="flex flex-col gap-4">
+        <div className="flex flex-col">
-          <div className="ml-16 mr-2 flex flex-col gap-4 break-words">
+          <div className="mr-2 flex flex-col break-words">
             {content}
           </div>
         </div>
-        <hr className="-mx-4 mt-2 opacity-10" />
       </CardContainer>
     </>
   );

client/src/index.css

@@ -1,3 +1,7 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 body {
   margin: 0;
   font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
@@ -11,3 +15,11 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
     monospace;
 }
+
+@layer components {
+  .card {
+    border-radius: theme('borderRadius.lg');
+    padding: theme('spacing.6');
+  }
+  /* ... */
+}

client/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: [],
+  content: ["./src/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },