mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 01:11:25 +00:00
UI and PoW
This commit is contained in:
parent
616c215d56
commit
80b631afce
9
client/package-lock.json
generated
9
client/package-lock.json
generated
@ -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",
|
||||
|
@ -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",
|
||||
|
@ -21,5 +21,5 @@
|
||||
"start_url": ".",
|
||||
"display": "standalone",
|
||||
"theme_color": "#000000",
|
||||
"background_color": "#ffffff"
|
||||
"background_color": "#000000"
|
||||
}
|
||||
|
11
client/src/components/Header/Header.tsx
Normal file
11
client/src/components/Header/Header.tsx
Normal file
@ -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>
|
||||
);
|
||||
}
|
@ -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 />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
|
@ -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>
|
||||
);
|
||||
}
|
@ -5,12 +5,11 @@ const PostCard = ({ content }: { content: string }) => {
|
||||
return (
|
||||
<>
|
||||
<CardContainer>
|
||||
<div className="flex flex-col gap-4">
|
||||
<div className="ml-16 mr-2 flex flex-col gap-4 break-words">
|
||||
<div className="flex flex-col">
|
||||
<div className="mr-2 flex flex-col break-words">
|
||||
{content}
|
||||
</div>
|
||||
</div>
|
||||
<hr className="-mx-4 mt-2 opacity-10" />
|
||||
</CardContainer>
|
||||
</>
|
||||
);
|
||||
|
@ -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');
|
||||
}
|
||||
/* ... */
|
||||
}
|
@ -1,6 +1,6 @@
|
||||
/** @type {import('tailwindcss').Config} */
|
||||
module.exports = {
|
||||
content: [],
|
||||
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||
theme: {
|
||||
extend: {},
|
||||
},
|
||||
|
Loading…
Reference in New Issue
Block a user