reya/lume
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

wip: update design

Browse Source
This commit is contained in:
reya
2024-02-16 14:11:49 +07:00
parent 296b11b7b8
commit f28a7ae82f
20 changed files with 218 additions and 172 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
packages/ui/src/note/mentions/note.tsx
View File

@@ -21,10 +21,7 @@ export function MentionNote({
const richContent = useMemo(() => {
if (!data) return "";
let parsedContent: string | ReactNode[] = data.content.replace(
/\n+/g,
"\n",
);
let parsedContent: string | ReactNode[] = data.content;
const text = parsedContent as string;
const words = text.split(/( |\n)/);
@@ -106,11 +103,11 @@ export function MentionNote({
}
return (
<div className="my-1 flex w-full cursor-default flex-col rounded-lg border border-black/5 bg-neutral-100 dark:border-white/5 dark:bg-neutral-900">
<div className="my-1.5 flex w-full cursor-default flex-col rounded-xl bg-neutral-100 pt-1 ring-1 ring-black/5 dark:bg-neutral-900 dark:ring-white/5">
<User.Provider pubkey={data.pubkey}>
<User.Root className="flex h-10 items-center gap-2 px-3">
<User.Avatar className="size-6 shrink-0 rounded-md object-cover" />
<div className="inline-flex flex-1 gap-2">
<User.Avatar className="size-6 shrink-0 rounded-full object-cover" />
<div className="inline-flex flex-1 items-center gap-2">
<User.Name className="font-semibold text-neutral-900 dark:text-neutral-100" />
<span className="text-neutral-600 dark:text-neutral-400">·</span>
<User.Time
@@ -127,16 +124,10 @@ export function MentionNote({
<div className="flex h-10 items-center justify-between px-3">
<a
href={`/events/${data.id}`}
className="text-sm text-blue-500 hover:text-blue-600"
className="text-blue-500 hover:text-blue-600"
>
{t("note.showMore")}
</a>
<button
type="button"
className="inline-flex size-6 items-center justify-center rounded-md bg-neutral-200 text-neutral-600 hover:bg-neutral-300 dark:bg-neutral-800 dark:text-neutral-400 dark:hover:bg-neutral-700"
>
<PinIcon className="size-4" />
</button>
</div>
) : (
<div className="h-3" />