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",
|
"name": "client",
|
||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@heroicons/react": "^2.0.18",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
@ -2513,6 +2514,14 @@
|
|||||||
"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
|
"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": {
|
"node_modules/@humanwhocodes/config-array": {
|
||||||
"version": "0.11.11",
|
"version": "0.11.11",
|
||||||
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
|
"resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.11.tgz",
|
||||||
|
@ -3,6 +3,7 @@
|
|||||||
"version": "0.1.0",
|
"version": "0.1.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
|
"@heroicons/react": "^2.0.18",
|
||||||
"@testing-library/jest-dom": "^5.17.0",
|
"@testing-library/jest-dom": "^5.17.0",
|
||||||
"@testing-library/react": "^13.4.0",
|
"@testing-library/react": "^13.4.0",
|
||||||
"@testing-library/user-event": "^13.5.0",
|
"@testing-library/user-event": "^13.5.0",
|
||||||
|
@ -21,5 +21,5 @@
|
|||||||
"start_url": ".",
|
"start_url": ".",
|
||||||
"display": "standalone",
|
"display": "standalone",
|
||||||
"theme_color": "#000000",
|
"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 React, { useEffect, useState } from 'react';
|
||||||
import { relayInit } from 'nostr-tools';
|
import { relayInit } from 'nostr-tools';
|
||||||
import PostCard from './PostCard/PostCard';
|
import PostCard from './PostCard/PostCard';
|
||||||
|
import Header from './Header/Header';
|
||||||
|
|
||||||
// Define the Event interface
|
// Define the Event interface
|
||||||
interface Event {
|
interface Event {
|
||||||
@ -10,7 +11,7 @@ interface Event {
|
|||||||
// Add other fields if necessary
|
// Add other fields if necessary
|
||||||
}
|
}
|
||||||
|
|
||||||
const relay = relayInit('wss://powrelay.xyz');
|
const relay = relayInit('wss://relay.damus.io');
|
||||||
|
|
||||||
const Home = () => {
|
const Home = () => {
|
||||||
// Define the type of the state variable
|
// Define the type of the state variable
|
||||||
@ -22,6 +23,7 @@ const Home = () => {
|
|||||||
|
|
||||||
const eventList = await relay.list([
|
const eventList = await relay.list([
|
||||||
{
|
{
|
||||||
|
ids: ['0000'],
|
||||||
kinds: [1],
|
kinds: [1],
|
||||||
limit: 10,
|
limit: 10,
|
||||||
},
|
},
|
||||||
@ -39,13 +41,16 @@ const Home = () => {
|
|||||||
}, []);
|
}, []);
|
||||||
|
|
||||||
return (
|
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">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||||
{events.map((event, index) => (
|
{events.map((event, index) => (
|
||||||
<PostCard key={index} content={event.content} />
|
<PostCard key={index} content={event.content} />
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</main>
|
||||||
|
<Header />
|
||||||
|
</>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
@ -3,7 +3,7 @@ import { PropsWithChildren } from 'react';
|
|||||||
export default function CardContainer({ children }: PropsWithChildren) {
|
export default function CardContainer({ children }: PropsWithChildren) {
|
||||||
return (
|
return (
|
||||||
<div className="card bg-gradient-to-r from-base-200 to-base-100 shadow-lg shadow-black">
|
<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>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
@ -5,12 +5,11 @@ const PostCard = ({ content }: { content: string }) => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<CardContainer>
|
<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}
|
{content}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<hr className="-mx-4 mt-2 opacity-10" />
|
|
||||||
</CardContainer>
|
</CardContainer>
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -1,3 +1,7 @@
|
|||||||
|
@tailwind base;
|
||||||
|
@tailwind components;
|
||||||
|
@tailwind utilities;
|
||||||
|
|
||||||
body {
|
body {
|
||||||
margin: 0;
|
margin: 0;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
|
||||||
@ -11,3 +15,11 @@ code {
|
|||||||
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
|
||||||
monospace;
|
monospace;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
@layer components {
|
||||||
|
.card {
|
||||||
|
border-radius: theme('borderRadius.lg');
|
||||||
|
padding: theme('spacing.6');
|
||||||
|
}
|
||||||
|
/* ... */
|
||||||
|
}
|
@ -1,6 +1,6 @@
|
|||||||
/** @type {import('tailwindcss').Config} */
|
/** @type {import('tailwindcss').Config} */
|
||||||
module.exports = {
|
module.exports = {
|
||||||
content: [],
|
content: ["./src/**/*.{js,jsx,ts,tsx}"],
|
||||||
theme: {
|
theme: {
|
||||||
extend: {},
|
extend: {},
|
||||||
},
|
},
|
||||||
|
Loading…
Reference in New Issue
Block a user