{children}
+
+
+ {open && (
+ <>
+
+
-
-
-
- {
- setOpen(false)
- }}
- >
-
-
+
+
+
+ {
+ setOpen(false)
+ }}
+ >
+
+
-
-
-
- )}
-
+
+ {createElement(
+ props.url ? 'a' : 'div',
+ {
+ className: 'relative inline-block h-full w-full',
+
+ ...(props.url
+ ? {
+ href: props.url,
+ target: '_blank',
+ rel: 'noreferrer',
+ }
+ : {}),
+ },
+ props.imageUrl ? (
+
+ )
+}
diff --git a/src/components/ui/avatar/index.ts b/src/components/ui/avatar/index.ts
new file mode 100644
index 0000000000..227ecdba36
--- /dev/null
+++ b/src/components/ui/avatar/index.ts
@@ -0,0 +1 @@
+export * from './Avatar'
diff --git a/src/components/ui/button/MotionButton.tsx b/src/components/ui/button/MotionButton.tsx
index 430ccad6d5..1541212f80 100644
--- a/src/components/ui/button/MotionButton.tsx
+++ b/src/components/ui/button/MotionButton.tsx
@@ -1,11 +1,14 @@
-import { memo } from 'react'
+import { forwardRef, memo } from 'react'
import { motion } from 'framer-motion'
-import type { HTMLMotionProps } from 'framer-motion'
+import type { ForwardRefComponent, HTMLMotionProps } from 'framer-motion'
import { microReboundPreset } from '~/constants/spring'
-export const MotionButtonBase: Component
+ 
setLoaded(true)}
+ loading={lazy ? 'lazy' : 'eager'}
+ className="aspect-square"
+ />
+
+ ) : props.text ? (
+
+
+ ) : null,
+ )}
+
- 
-
-
- )
-})
-
-const onImageAnimationEnd: React.AnimationEventHandler图片加载失败!
- ${escapeHTMLTag(image.src)}
-
-
-
- )}
- {alt && {
- onClose()
- }}
- >
-
- )}
- +
{children}
) diff --git a/src/components/ui/text/FlexText.tsx b/src/components/ui/text/FlexText.tsx new file mode 100644 index 0000000000..222a88edd3 --- /dev/null +++ b/src/components/ui/text/FlexText.tsx @@ -0,0 +1,37 @@ +import React, { memo, useEffect, useRef, useState } from 'react' +import type { FC } from 'react' + +// TODO: wait for new CSS unit +export const FlexText: FC<{ text: string; scale: number }> = memo((props) => { + const ref = useRef
+ {!!nextNid && (
+
+
+ {
+ springScrollToTop()
+ router.push(`/timeline?type=note&id=${id}`)
+ }}
+ >
+ 时间线
+
+ -
- {(timelineData || initialData)?.map((item) => {
- const isCurrent = item.id === noteId
- return (
-
-
+ {(timelineData || initialData)?.map((item) => {
+ const isCurrent = item.id === noteId
+ return (
+
+
+ )
+}
diff --git a/src/components/widgets/note/NoteTopicDetail.tsx b/src/components/widgets/note/NoteTopicDetail.tsx
new file mode 100644
index 0000000000..934d8e65ed
--- /dev/null
+++ b/src/components/widgets/note/NoteTopicDetail.tsx
@@ -0,0 +1,112 @@
+'use client'
+
+import { useQuery } from '@tanstack/react-query'
+import Link from 'next/link'
+import type { TopicModel } from '@mx-space/api-client'
+import type { FC } from 'react'
+
+import { MdiClockOutline } from '~/components/icons/clock'
+import { MdiFountainPenTip } from '~/components/icons/pen'
+import { Divider, DividerVertical } from '~/components/ui/divider'
+import { Loading } from '~/components/ui/loading'
+import { RelativeTime } from '~/components/ui/relative-time'
+import { useIsClient } from '~/hooks/common/use-is-client'
+import { useNoteData } from '~/hooks/data/use-note'
+import { apiClient } from '~/utils/request'
+
+import { NoteTopicMarkdownRender } from './NoteTopicMarkdownRender'
+
+export const NoteTopicDetail: FC<{ topic: TopicModel }> = (props) => {
+ const { topic } = props
+ const { id: topicId } = topic
+
+ const { data, isLoading } = useQuery([`topic-${topicId}`], () =>
+ apiClient.note.getNoteByTopicId(topicId, 1, 1, {
+ sortBy: 'created',
+ sortOrder: -1,
+ }),
+ )
+
+ const isClient = useIsClient()
+ if (!isClient) {
+ return null
+ }
+
+ return (
+
+ 文章被专栏收录：
+
+
+
+
+
+ (
+
+ {name}
+
+ )}
+ >
+
+
+
+
+
+ {introduce}
+
+
+
+
+ )
+}
+
+export const ToTopicLink: FC = () => {
+ const note = useNoteData()
+ if (!note?.topic) return null
+ return (
+
+
+ {note?.topic?.name}
+
+
+ )
+}
diff --git a/src/components/widgets/note/NoteTopicInfo.tsx b/src/components/widgets/note/NoteTopicInfo.tsx
index 36bc3ea783..27bc451fc0 100644
--- a/src/components/widgets/note/NoteTopicInfo.tsx
+++ b/src/components/widgets/note/NoteTopicInfo.tsx
@@ -1,21 +1,10 @@
'use client'
-import { useQuery } from '@tanstack/react-query'
-import { memo } from 'react'
-import Markdown from 'markdown-to-jsx'
-import Link from 'next/link'
-import type { TopicModel } from '@mx-space/api-client'
-import type { MarkdownToJSX } from 'markdown-to-jsx'
-import type { FC } from 'react'
-
-import { MdiClockOutline } from '~/components/icons/clock'
-import { MdiFountainPenTip } from '~/components/icons/pen'
-import { Divider, DividerVertical } from '~/components/ui/divider'
+import { Divider } from '~/components/ui/divider'
import { FloatPopover } from '~/components/ui/float-popover'
-import { Loading } from '~/components/ui/loading'
-import { RelativeTime } from '~/components/ui/relative-time'
import { useNoteData } from '~/hooks/data/use-note'
-import { apiClient } from '~/utils/request'
+
+import { NoteTopicDetail, ToTopicLink } from './NoteTopicDetail'
export const NoteTopicInfo = () => {
const note = useNoteData()
@@ -35,121 +24,8 @@ export const NoteTopicInfo = () => {
wrapperClassNames="flex flex-grow flex-shrink min-w-0"
TriggerComponent={ToTopicLink}
>
- + {topic.name} +
+ + +
+ {topic.introduce}
+
+ {topic.description && (
+ <>
+
+
+ {topic.description}
+
+
+
+ )}
+
+
+
+
-
-
- )
-}
-
-const mdOptions: MarkdownToJSX.Options = {
- allowedTypes: [
- 'text',
- 'paragraph',
- 'codeInline',
- 'link',
- 'linkMailtoDetector',
- 'linkBareUrlDetector',
- 'linkAngleBraceStyleDetector',
- 'textStrikethroughed',
- 'textEmphasized',
- 'textBolded',
- 'textEscaped',
- ],
- forceBlock: true,
- wrapper: ({ children }) => - {topic.name} -
- - -
-
-
-
-
{children}
,
-}
-export const NoteTopicMarkdownRender: FC<{ children: string }> = memo(
- (props) => {
- return {children}
,
+}
+
+export const NoteTopicMarkdownRender: FC<{ children: string }> = (props) => {
+ return Note ID
+ {pageId} +Owner
+ + {metadata.owner} + +Transaction Hash Creation
+ + {metadata.transactions[0]} + +Network
+{metadata.network}
+IPFS Address
+ ipfs://{cid} +
+
+
+
+ )
+}
+
+const SafeIcon = () => (
+
+)
+
+const IcRoundKeyboardArrowDown = (props: SVGProps {
+ setCollapse((c) => !c)
+ }}
+ >
+
+
+
+
+
+ {sections}
+
+
+
+
+
+ )
+}
+
+// export const XLogSummaryForPost: FC<{
+// id: string
+// }> = ({ id }) => {
+// const cid = usePostCollection((state) => state.data.get(id)?.meta?.xLog?.cid)
+
+// if (!cid) return null
+
+// return
+
+
+ + {isLoading ? '加载中...' : error ? '请求错误' : data?.data} +
+ {isLoading && ( ++ (此服务由{' '} + + xLog + {' '} + 驱动) +
+ )} +