mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-18 11:13:30 +00:00
updated minor styles
This commit is contained in:
parent
674377c11a
commit
c9fa4252d5
@ -1,4 +1,4 @@
|
|||||||
export default function ReplyIcon() {
|
export default function ReplyIcon({ className }: { className: string }) {
|
||||||
return (
|
return (
|
||||||
<svg
|
<svg
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
@ -6,8 +6,7 @@ export default function ReplyIcon() {
|
|||||||
viewBox="0 0 24 24"
|
viewBox="0 0 24 24"
|
||||||
strokeWidth={1.5}
|
strokeWidth={1.5}
|
||||||
stroke="currentColor"
|
stroke="currentColor"
|
||||||
className="h-5 w-5"
|
className={className}>
|
||||||
>
|
|
||||||
<path
|
<path
|
||||||
strokeLinecap="round"
|
strokeLinecap="round"
|
||||||
strokeLinejoin="round"
|
strokeLinejoin="round"
|
||||||
|
@ -123,7 +123,7 @@ export default function AccountBar() {
|
|||||||
leaveFrom="opacity-100 scale-100"
|
leaveFrom="opacity-100 scale-100"
|
||||||
leaveTo="opacity-0 scale-95">
|
leaveTo="opacity-0 scale-95">
|
||||||
<Dialog.Panel className="relative w-full max-w-2xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
|
<Dialog.Panel className="relative w-full max-w-2xl transform overflow-hidden rounded-lg text-zinc-100 shadow-modal transition-all">
|
||||||
<div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-10 backdrop-blur-md"></div>
|
<div className="absolute top-0 left-0 h-full w-full bg-black bg-opacity-20 backdrop-blur-lg"></div>
|
||||||
<div className="absolute bottom-0 left-0 h-24 w-full border-t border-white/10 bg-zinc-900"></div>
|
<div className="absolute bottom-0 left-0 h-24 w-full border-t border-white/10 bg-zinc-900"></div>
|
||||||
<div className="relative z-10 px-4 pt-4 pb-2">
|
<div className="relative z-10 px-4 pt-4 pb-2">
|
||||||
<MDEditor
|
<MDEditor
|
||||||
|
@ -70,11 +70,11 @@ export default function Reaction({
|
|||||||
<button
|
<button
|
||||||
onClick={(e) => handleReaction(e)}
|
onClick={(e) => handleReaction(e)}
|
||||||
className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
|
className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
|
||||||
<div className="rounded-lg p-1 group-hover:bg-zinc-800">
|
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
|
||||||
{isReact ? (
|
{isReact ? (
|
||||||
<LikeSolidIcon className="h-5 w-5 text-red-500" />
|
<LikeSolidIcon className="h-5 w-5 text-red-500" />
|
||||||
) : (
|
) : (
|
||||||
<LikeIcon className="h-5 w-5" />
|
<LikeIcon className="h-5 w-5 group-hover:text-red-400" />
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<span>{reaction}</span>
|
<span>{reaction}</span>
|
||||||
|
@ -14,8 +14,8 @@ export default function Reply({ eventID }: { eventID: string }) {
|
|||||||
|
|
||||||
return (
|
return (
|
||||||
<button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
|
<button className="group flex w-16 items-center gap-1.5 text-sm text-zinc-500">
|
||||||
<div className="rounded-lg p-1 group-hover:bg-zinc-800">
|
<div className="rounded-lg p-1 group-hover:bg-zinc-600">
|
||||||
<ReplyIcon />
|
<ReplyIcon className="h-5 w-5 group-hover:text-orange-400" />
|
||||||
</div>
|
</div>
|
||||||
<span>{events.length || 0}</span>
|
<span>{events.length || 0}</span>
|
||||||
</button>
|
</button>
|
||||||
|
@ -2,7 +2,7 @@ import { memo } from 'react';
|
|||||||
|
|
||||||
export const Placeholder = memo(function Placeholder() {
|
export const Placeholder = memo(function Placeholder() {
|
||||||
return (
|
return (
|
||||||
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-6 px-6">
|
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-4 px-6">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-4">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-full bg-zinc-700" />
|
||||||
<div className="flex w-full flex-1 items-start justify-between">
|
<div className="flex w-full flex-1 items-start justify-between">
|
||||||
@ -17,7 +17,7 @@ export const Placeholder = memo(function Placeholder() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-6">
|
||||||
<div className="h-16 w-full rounded bg-zinc-700" />
|
<div className="h-16 w-full rounded bg-zinc-700" />
|
||||||
<div className="flex items-center gap-8">
|
<div className="flex items-center gap-8">
|
||||||
<div className="h-4 w-12 rounded bg-zinc-700" />
|
<div className="h-4 w-12 rounded bg-zinc-700" />
|
||||||
|
@ -17,14 +17,20 @@ const DynamicContent = dynamic(() => import('@components/note/content'), {
|
|||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||||
export const Single = memo(function Single({ event }: { event: any }) {
|
export const Single = memo(function Single({ event }: { event: any }) {
|
||||||
|
const openThread = () => {
|
||||||
|
console.log('ok');
|
||||||
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="flex h-min min-h-min w-full select-text flex-col border-b border-zinc-800 py-6 px-6">
|
<div
|
||||||
|
onClick={() => openThread()}
|
||||||
|
className="flex h-min min-h-min w-full cursor-pointer select-text flex-col border-b border-zinc-800 py-4 px-6 hover:bg-zinc-800">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<User pubkey={event.pubkey} time={event.created_at} />
|
<User pubkey={event.pubkey} time={event.created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-4 pl-[60px]">
|
||||||
<div className="flex flex-col gap-2">
|
<div className="flex flex-col gap-6">
|
||||||
<DynamicContent data={event.content} />
|
<DynamicContent data={event.content} />
|
||||||
<div className="-ml-1 flex items-center gap-8">
|
<div className="relative z-10 -ml-1 flex items-center gap-8">
|
||||||
<Reply eventID={event.id} />
|
<Reply eventID={event.id} />
|
||||||
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
<Reaction eventID={event.id} eventPubkey={event.pubkey} />
|
||||||
</div>
|
</div>
|
||||||
|
@ -1,47 +0,0 @@
|
|||||||
/* eslint-disable @typescript-eslint/no-explicit-any */
|
|
||||||
import BaseLayout from '@layouts/baseLayout';
|
|
||||||
import UserLayout from '@layouts/userLayout';
|
|
||||||
|
|
||||||
import { useRouter } from 'next/router';
|
|
||||||
import { useNostrEvents } from 'nostr-react';
|
|
||||||
import { JSXElementConstructor, ReactElement, ReactFragment, ReactPortal } from 'react';
|
|
||||||
|
|
||||||
export default function Page() {
|
|
||||||
const router = useRouter();
|
|
||||||
const { id }: any = router.query;
|
|
||||||
|
|
||||||
const { events } = useNostrEvents({
|
|
||||||
filter: {
|
|
||||||
'#e': [id],
|
|
||||||
since: 0,
|
|
||||||
kinds: [1],
|
|
||||||
limit: 20,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{events.map((event) => (
|
|
||||||
<p key={event.id}>
|
|
||||||
{event.pubkey} posted: {event.content}
|
|
||||||
</p>
|
|
||||||
))}
|
|
||||||
</>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
Page.getLayout = function getLayout(
|
|
||||||
page:
|
|
||||||
| string
|
|
||||||
| number
|
|
||||||
| boolean
|
|
||||||
| ReactElement<unknown, string | JSXElementConstructor<unknown>>
|
|
||||||
| ReactFragment
|
|
||||||
| ReactPortal
|
|
||||||
) {
|
|
||||||
return (
|
|
||||||
<BaseLayout>
|
|
||||||
<UserLayout>{page}</UserLayout>
|
|
||||||
</BaseLayout>
|
|
||||||
);
|
|
||||||
};
|
|
Loading…
Reference in New Issue
Block a user