mirror of
https://github.com/luminous-devs/lume.git
synced 2024-09-19 11:43:30 +00:00
minor design fixes
This commit is contained in:
parent
6e08379523
commit
b10a70b4ce
@ -3,7 +3,7 @@ import NotePreview from '@components/note/content/preview';
|
|||||||
import { UserExtend } from '@components/user/extend';
|
import { UserExtend } from '@components/user/extend';
|
||||||
|
|
||||||
import dynamic from 'next/dynamic';
|
import dynamic from 'next/dynamic';
|
||||||
import { memo } from 'react';
|
import { memo, useMemo } from 'react';
|
||||||
|
|
||||||
const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
||||||
ssr: false,
|
ssr: false,
|
||||||
@ -11,17 +11,24 @@ const MarkdownPreview = dynamic(() => import('@uiw/react-markdown-preview'), {
|
|||||||
});
|
});
|
||||||
|
|
||||||
export const Content = memo(function Content({ data }: { data: any }) {
|
export const Content = memo(function Content({ data }: { data: any }) {
|
||||||
|
const content = useMemo(
|
||||||
|
() =>
|
||||||
|
// remove all image urls
|
||||||
|
data.content.replace(/(https?:\/\/.*\.(jpg|jpeg|gif|png|webp)((\?.*)$|$))/i, ''),
|
||||||
|
[data.content]
|
||||||
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative z-10 flex flex-col">
|
<div className="relative z-10 flex flex-col">
|
||||||
<UserExtend pubkey={data.pubkey} time={data.created_at} />
|
<UserExtend pubkey={data.pubkey} time={data.created_at} />
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-5 pl-[52px]">
|
||||||
<div className="flex flex-col gap-6">
|
<div className="flex flex-col gap-6">
|
||||||
<div className="flex flex-col">
|
<div className="flex flex-col">
|
||||||
<div>
|
<div>
|
||||||
<MarkdownPreview
|
<MarkdownPreview
|
||||||
source={data.content}
|
source={content}
|
||||||
className={
|
className={
|
||||||
'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
|
'prose prose-zinc max-w-none break-words dark:prose-invert prose-headings:mt-3 prose-headings:mb-2 prose-p:m-0 prose-p:text-[15px] prose-p:leading-tight prose-a:font-normal prose-a:text-fuchsia-500 prose-a:no-underline prose-ul:mt-2 prose-li:my-1'
|
||||||
}
|
}
|
||||||
linkTarget="_blank"
|
linkTarget="_blank"
|
||||||
disallowedElements={[
|
disallowedElements={[
|
||||||
|
@ -3,7 +3,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-5 px-3">
|
<div className="relative z-10 flex h-min animate-pulse select-text flex-col py-5 px-3">
|
||||||
<div className="flex items-start gap-4">
|
<div className="flex items-start gap-2">
|
||||||
<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">
|
||||||
<div className="flex w-full items-center justify-between">
|
<div className="flex w-full items-center justify-between">
|
||||||
@ -16,7 +16,7 @@ export const Placeholder = memo(function Placeholder() {
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="-mt-4 pl-[60px]">
|
<div className="-mt-5 pl-[52px]">
|
||||||
<div className="flex flex-col gap-6">
|
<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">
|
||||||
|
@ -5,7 +5,7 @@ export const ImagePreview = memo(function ImagePreview({ data }: { data: any })
|
|||||||
return (
|
return (
|
||||||
<div className="relative mt-2 flex flex-col overflow-hidden">
|
<div className="relative mt-2 flex flex-col overflow-hidden">
|
||||||
{data.map((image: string, index: number) => (
|
{data.map((image: string, index: number) => (
|
||||||
<div key={index} className={`relative h-full w-full rounded-lg ${index == 1 ? 'mt-2' : ''}`}>
|
<div key={index} className={`relative h-full w-full rounded-lg xl:w-2/3 ${index == 1 ? 'mt-2' : ''}`}>
|
||||||
<Image
|
<Image
|
||||||
placeholder="blur"
|
placeholder="blur"
|
||||||
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
|
blurDataURL="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mNkqAcAAIUAgUW0RjgAAAAASUVORK5CYII="
|
||||||
|
@ -4,7 +4,14 @@ import ReactPlayer from 'react-player/lazy';
|
|||||||
export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
|
export const VideoPreview = memo(function VideoPreview({ data }: { data: string }) {
|
||||||
return (
|
return (
|
||||||
<div className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
|
<div className="relative mt-2 flex flex-col overflow-hidden rounded-lg">
|
||||||
<ReactPlayer url={data} controls={true} volume={0} className="aspect-video w-full" width="100%" height="100%" />
|
<ReactPlayer
|
||||||
|
url={data}
|
||||||
|
controls={true}
|
||||||
|
volume={0}
|
||||||
|
className="aspect-video w-full xl:w-2/3"
|
||||||
|
width="100%"
|
||||||
|
height="100%"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
});
|
});
|
||||||
|
@ -54,7 +54,7 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
|
|||||||
}, [getCacheProfile, insertCacheProfile, pubkey]);
|
}, [getCacheProfile, insertCacheProfile, pubkey]);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div className="relative flex items-start gap-4">
|
<div className="flex items-start gap-2">
|
||||||
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
|
<div className="relative h-11 w-11 shrink overflow-hidden rounded-md bg-zinc-900">
|
||||||
{profile.picture ? (
|
{profile.picture ? (
|
||||||
<ImageWithFallback
|
<ImageWithFallback
|
||||||
@ -83,7 +83,9 @@ export const UserExtend = memo(function UserExtend({ pubkey, time }: { pubkey: s
|
|||||||
<span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
|
<span className="text-zinc-500">{dayjs().to(dayjs.unix(time))}</span>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<DotsHorizontalIcon className="h-4 w-4 text-zinc-500" />
|
<button className="inline-flex h-5 w-5 items-center justify-center rounded hover:bg-zinc-800">
|
||||||
|
<DotsHorizontalIcon className="h-3 w-3 text-zinc-500" />
|
||||||
|
</button>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -16,13 +16,21 @@ export default function WithSidebarLayout({ children }: { children: React.ReactN
|
|||||||
<div className="absolute top-0 left-0 h-12 w-full" />
|
<div className="absolute top-0 left-0 h-12 w-full" />
|
||||||
<AccountColumn />
|
<AccountColumn />
|
||||||
</div>
|
</div>
|
||||||
<div className="grid w-full grid-cols-4">
|
<div className="grid w-full grid-cols-4 xl:grid-cols-5">
|
||||||
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
|
<div className="scrollbar-hide col-span-1 overflow-y-auto overflow-x-hidden border-r border-zinc-900">
|
||||||
<NavigatorColumn />
|
<NavigatorColumn />
|
||||||
</div>
|
</div>
|
||||||
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20">
|
<div className="col-span-3 m-3 overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:mr-1.5">
|
||||||
<div className="h-full w-full rounded-lg">{children}</div>
|
<div className="h-full w-full rounded-lg">{children}</div>
|
||||||
</div>
|
</div>
|
||||||
|
<div className="col-span-3 m-3 hidden overflow-hidden rounded-lg border border-zinc-800 bg-zinc-900 shadow-input shadow-black/20 xl:col-span-2 xl:ml-1.5 xl:flex">
|
||||||
|
<div className="flex h-full w-full items-center justify-center">
|
||||||
|
<p className="select-text p-8 text-center text-zinc-400">
|
||||||
|
This feature hasn't implemented yet, so resize Lume to the initial size for a better experience.
|
||||||
|
I'm sorry for this inconvenience, and I swear I will add it soon 😁
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
Loading…
Reference in New Issue
Block a user