mirror of
https://github.com/smolgrrr/TAO.git
synced 2024-09-20 09:21:25 +00:00
smol changes per comment
This commit is contained in:
parent
a8c05ee5f5
commit
2d3a7f9035
@ -72,10 +72,10 @@ const Home = () => {
|
|||||||
return (
|
return (
|
||||||
<main className="text-white mb-20">
|
<main className="text-white mb-20">
|
||||||
{/* {inBrowser && <PWAInstallPopup onClose={() => setInBrowser(false)} />} */}
|
{/* {inBrowser && <PWAInstallPopup onClose={() => setInBrowser(false)} />} */}
|
||||||
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-16">
|
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||||
<NewThreadCard />
|
<NewThreadCard />
|
||||||
</div>
|
</div>
|
||||||
<div className="columns-1 md:columns-2 lg:columns-3 [column-fill:_balance] box-border gap-4">
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||||
{filteredAndSortedEvents.map((event) => (
|
{filteredAndSortedEvents.map((event) => (
|
||||||
<PostCard
|
<PostCard
|
||||||
key={event.id}
|
key={event.id}
|
||||||
|
@ -2,8 +2,8 @@ import { PropsWithChildren } from "react";
|
|||||||
|
|
||||||
export default function CardContainer({ children }: PropsWithChildren) {
|
export default function CardContainer({ children }: PropsWithChildren) {
|
||||||
return (
|
return (
|
||||||
<div className="card break-inside-avoid mb-4 bg-neutral-900 border border-transparent hover:border-neutral-800">
|
<div className="card break-inside-avoid mb-4 bg-gradient-to-r from-black to-neutral-900 h-min">
|
||||||
<div className="card-body">{children}</div>
|
<div className="card-body pb-2">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
@ -118,7 +118,7 @@ const NewThreadCard: React.FC = () => {
|
|||||||
>
|
>
|
||||||
Start a New Thread
|
Start a New Thread
|
||||||
</div>
|
</div>
|
||||||
<div className="px-4 pt-4 flex flex-col bg-neutral-900 border border-neutral-800 rounded-lg">
|
<div className="px-4 pt-4 flex flex-col bg-neutral-900 rounded-lg">
|
||||||
<textarea
|
<textarea
|
||||||
name="com"
|
name="com"
|
||||||
wrap="soft"
|
wrap="soft"
|
||||||
@ -133,7 +133,7 @@ const NewThreadCard: React.FC = () => {
|
|||||||
<CpuChipIcon className="h-4 w-4" />
|
<CpuChipIcon className="h-4 w-4" />
|
||||||
</div>
|
</div>
|
||||||
<p className="text-xs font-medium text-neutral-400">
|
<p className="text-xs font-medium text-neutral-400">
|
||||||
{difficulty} POW
|
{difficulty} PoW
|
||||||
</p>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
@ -1,5 +1,5 @@
|
|||||||
import CardContainer from "./CardContainer";
|
import CardContainer from "./CardContainer";
|
||||||
import { ChatBubbleLeftEllipsisIcon } from "@heroicons/react/24/outline";
|
import { FolderIcon } from "@heroicons/react/24/outline";
|
||||||
import { parseContent } from "../../utils/content";
|
import { parseContent } from "../../utils/content";
|
||||||
import { Event } from "nostr-tools";
|
import { Event } from "nostr-tools";
|
||||||
import { nip19 } from "nostr-tools";
|
import { nip19 } from "nostr-tools";
|
||||||
@ -112,7 +112,7 @@ const PostCard = ({
|
|||||||
</div>
|
</div>
|
||||||
<span className="text-neutral-700">·</span>
|
<span className="text-neutral-700">·</span>
|
||||||
<div className="inline-flex items-center gap-1.5">
|
<div className="inline-flex items-center gap-1.5">
|
||||||
<ChatBubbleLeftEllipsisIcon className="h-4 w-4 text-neutral-600" />
|
<FolderIcon className="h-4 w-4 text-neutral-600" />
|
||||||
<span className="text-xs text-neutral-600">{replyCount}</span>
|
<span className="text-xs text-neutral-600">{replyCount}</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -81,10 +81,19 @@ const OPCard = ({ event, metadata, replyCount }: { event: Event, metadata: Event
|
|||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center ml-auto">
|
<div className="flex items-center ml-auto gap-2.5">
|
||||||
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
|
<div className="text-xs text-neutral-600">
|
||||||
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
|
{event.id.match(/^0*([^\0]{2})/)?.[0] || 0}
|
||||||
<span className="text-xs text-gray-500">{replyCount}</span>
|
</div>
|
||||||
|
<span className="text-neutral-700">·</span>
|
||||||
|
<div className="text-xs font-semibold text-neutral-600">
|
||||||
|
{timeAgo(event.created_at)}
|
||||||
|
</div>
|
||||||
|
<span className="text-neutral-700">·</span>
|
||||||
|
<div className="inline-flex items-center gap-1.5">
|
||||||
|
<FolderIcon className="h-4 w-4 text-neutral-600" />
|
||||||
|
<span className="text-xs text-neutral-600">{replyCount}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="mr-2 flex flex-col break-words">
|
<div className="mr-2 flex flex-col break-words">
|
||||||
|
@ -87,10 +87,15 @@ const ReplyCard = ({ event, metadata, replyCount, repliedTo }: { event: Event, m
|
|||||||
</>
|
</>
|
||||||
}
|
}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center ml-auto">
|
<div className="flex items-center ml-auto gap-2.5">
|
||||||
<div className="text-xs font-semibold text-gray-500 mr-2">{timeAgo(event.created_at)}</div>
|
<div className="text-xs font-semibold text-neutral-600">
|
||||||
<FolderIcon className="h-5 w-5 mr-1 text-gray-500" />
|
{timeAgo(event.created_at)}
|
||||||
<span className="text-xs text-gray-500">{replyCount}</span>
|
</div>
|
||||||
|
<span className="text-neutral-700">·</span>
|
||||||
|
<div className="inline-flex items-center gap-1.5">
|
||||||
|
<FolderIcon className="h-4 w-4 text-neutral-600" />
|
||||||
|
<span className="text-xs text-neutral-600">{replyCount}</span>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center my-1" >
|
<div className="flex items-center my-1" >
|
||||||
|
@ -104,13 +104,14 @@ const Thread = () => {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<main className="bg-black text-white min-h-screen">
|
<main className="bg-black 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="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||||
{earlierEvents
|
{earlierEvents
|
||||||
.filter(event => event.kind === 1)
|
.filter(event => event.kind === 1)
|
||||||
.sort((a, b) => a.created_at - b.created_at).map((event, index) => (
|
.sort((a, b) => a.created_at - b.created_at).map((event, index) => (
|
||||||
<OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} />
|
<OPCard event={event} metadata={getMetadataEvent(event)} replyCount={countReplies(event)} />
|
||||||
))}
|
))}
|
||||||
<OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
|
<OPCard event={uniqEvents[0]} metadata={getMetadataEvent(uniqEvents[0])} replyCount={countReplies(uniqEvents[0])} />
|
||||||
|
</div>
|
||||||
<div className="col-span-full flex justify-center space-x-36">
|
<div className="col-span-full flex justify-center space-x-36">
|
||||||
<DocumentTextIcon
|
<DocumentTextIcon
|
||||||
className="h-5 w-5 text-gray-200"
|
className="h-5 w-5 text-gray-200"
|
||||||
@ -128,9 +129,10 @@ const Thread = () => {
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div className="w-full px-4 sm:px-0 sm:max-w-xl mx-auto my-2">
|
||||||
<ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
|
<ThreadPost OPEvent={uniqEvents[0]} state={showForm} type={postType} />
|
||||||
</div>
|
</div>
|
||||||
|
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4 p-4">
|
||||||
<div className="col-span-full h-0.5 bg-neutral-900"></div> {/* This is the white line separator */}
|
<div className="col-span-full h-0.5 bg-neutral-900"></div> {/* This is the white line separator */}
|
||||||
{uniqEvents
|
{uniqEvents
|
||||||
.slice(1)
|
.slice(1)
|
||||||
|
@ -131,33 +131,46 @@ const ThreadPost = ({ OPEvent, state, type }: { OPEvent: NostrEvent, state: Bool
|
|||||||
<div id="togglePostFormLink" className="text-lg font-semibold">
|
<div id="togglePostFormLink" className="text-lg font-semibold">
|
||||||
{type === 'r' ? <span>Reply To Post</span> : <span>Quote Post</span>}
|
{type === 'r' ? <span>Reply To Post</span> : <span>Quote Post</span>}
|
||||||
</div>
|
</div>
|
||||||
|
<div className="px-4 pt-4 flex flex-col bg-neutral-900 border border-neutral-800 rounded-lg">
|
||||||
<div>
|
<div>
|
||||||
<textarea
|
<textarea
|
||||||
name="com"
|
name="com"
|
||||||
wrap="soft"
|
wrap="soft"
|
||||||
className="w-full p-2 rounded bg-gradient-to-r from-blue-900 to-cyan-500 text-white border-none placeholder-blue-300"
|
className="shadow-lg w-full px-4 py-3 h-28 rounded-md outline-none focus:outline-none bg-neutral-800 border border-neutral-700 text-white placeholder:text-neutral-500"
|
||||||
placeholder='Shitpost here...'
|
placeholder='Shitpost here...'
|
||||||
value={comment}
|
value={comment}
|
||||||
onChange={(e) => setComment(e.target.value)}
|
onChange={(e) => setComment(e.target.value)}
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="h-14 flex items-center justify-between">
|
||||||
|
<div className="inline-flex items-center gap-2 bg-neutral-800 px-1.5 py-1 rounded-lg">
|
||||||
|
<div className="inline-flex items-center gap-1.5 text-neutral-300">
|
||||||
|
<CpuChipIcon className="h-4 w-4" />
|
||||||
|
</div>
|
||||||
|
<p className="text-xs font-medium text-neutral-400">
|
||||||
|
{difficulty} PoW
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
{file != '' &&
|
{file !== "" && (
|
||||||
<button onClick={() => setFile('')}><XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" /></button>
|
<button onClick={() => setFile("")}>
|
||||||
}
|
<XCircleIcon className="h-10 w-10 absolute shadow z-100 text-blue-500" />
|
||||||
|
</button>
|
||||||
|
)}
|
||||||
{renderMedia(file)}
|
{renderMedia(file)}
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-between items-center">
|
<div className="flex items-center gap-4">
|
||||||
<div className="flex items-center">
|
<div className="flex items-center">
|
||||||
<ArrowUpTrayIcon
|
<ArrowUpTrayIcon
|
||||||
className="h-6 w-6 text-white cursor-pointer"
|
className="h-4 w-4 text-neutral-400 cursor-pointer"
|
||||||
onClick={() => document.getElementById('file_input')?.click()}
|
onClick={() => document.getElementById("file_input")?.click()}
|
||||||
/>
|
/>
|
||||||
<input
|
<input
|
||||||
type="file"
|
type="file"
|
||||||
name="file_input"
|
name="file_input"
|
||||||
id="file_input"
|
id="file_input"
|
||||||
style={{ display: 'none' }}
|
style={{ display: "none" }}
|
||||||
onChange={(e) => {
|
onChange={(e) => {
|
||||||
const file_input = e.target.files?.[0];
|
const file_input = e.target.files?.[0];
|
||||||
if (file_input) {
|
if (file_input) {
|
||||||
@ -166,23 +179,27 @@ const ThreadPost = ({ OPEvent, state, type }: { OPEvent: NostrEvent, state: Bool
|
|||||||
}}
|
}}
|
||||||
/>
|
/>
|
||||||
{uploadingFile ? (
|
{uploadingFile ? (
|
||||||
<div className='flex animate-spin text-sm text-gray-300'>
|
<div className="flex animate-spin text-sm text-gray-300">
|
||||||
<ArrowPathIcon className="h-4 w-4 ml-auto" />
|
<ArrowPathIcon className="h-4 w-4 ml-auto" />
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
</div>
|
</div>
|
||||||
<span className="flex items-center"><CpuChipIcon className="h-6 w-6 text-white" />: {difficulty}</span>
|
<button
|
||||||
<button type="submit" className="px-4 py-2 bg-gradient-to-r from-cyan-900 to-blue-500 rounded text-white font-semibold">
|
type="submit"
|
||||||
|
className="h-9 inline-flex items-center justify-center px-4 bg-blue-500 hover:bg-blue-600 rounded-lg text-white font-medium text-sm"
|
||||||
|
>
|
||||||
Submit
|
Submit
|
||||||
</button>
|
</button>
|
||||||
</div>
|
</div>
|
||||||
{doingWorkProp ? (
|
{doingWorkProp ? (
|
||||||
<div className='flex animate-pulse text-sm text-gray-300'>
|
<div className="flex animate-pulse text-sm text-gray-300">
|
||||||
<CpuChipIcon className="h-4 w-4 ml-auto" />
|
<CpuChipIcon className="h-4 w-4 ml-auto" />
|
||||||
<span>Generating Proof-of-Work...</span>
|
<span>Generating Proof-of-Work...</span>
|
||||||
</div>
|
</div>
|
||||||
) : null}
|
) : null}
|
||||||
<div id="postFormError" className="text-red-500" />
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</form>)}
|
</form>)}
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
|
@ -40,7 +40,7 @@ export const renderMedia = (file: string) => {
|
|||||||
controls
|
controls
|
||||||
muted
|
muted
|
||||||
preload="metadata"
|
preload="metadata"
|
||||||
className="thumb mt-2 rounded-md w-full ring-1 ring-neutral-800"
|
className="thumb mt-2 rounded-md w-full"
|
||||||
>
|
>
|
||||||
<source src={file} type="video/mp4" />
|
<source src={file} type="video/mp4" />
|
||||||
</video>
|
</video>
|
||||||
@ -52,7 +52,7 @@ export const renderMedia = (file: string) => {
|
|||||||
<img
|
<img
|
||||||
alt="Invalid thread"
|
alt="Invalid thread"
|
||||||
loading="lazy"
|
loading="lazy"
|
||||||
className="thumb mt-2 rounded-md w-full ring-1 ring-neutral-800"
|
className="thumb mt-2 rounded-md w-full"
|
||||||
src={file}
|
src={file}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
Loading…
Reference in New Issue
Block a user