- ) : !empty && listAfterDate.length ? (
- listAfterDate.map((key, index) => {
- return (
-
-
{format(new Date(key), 'MMM dd,yyy')}
- {list[key].map((v) => (
-
{
- window.open(v.event_url)
- }}>
-
-
-
-
{v.project.name}
+
+ {isLoading && !list?.length ? (
+
+
+
+ ) : !empty && listAfterDate.length ? (
+ listAfterDate.map((key, index) => {
+ return (
+
+
+ {format(new Date(key), 'MMM dd,yyy')}
+
+ {list[key].map((v) => (
+
{
+ window.open(v.event_url)
+ }}>
+
+
+
+
+ {' '}
+ {v.project.name}
+
+
+
{v.event_title}
+
+ {formatDate(v.event_date)}
+
+
-
{v.event_title}
-
{formatDate(v.event_date)}
-
-
- ))}
-
- )
- })
- ) : (
-
{t.empty_status()}
- )}
+ ))}
+
+ )
+ })
+ ) : (
+
{t.empty_status()}
+ )}
+
)
}
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx
index 46e53ad99ea7..ca4069c187b6 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/NFTList.tsx
@@ -1,11 +1,12 @@
-import React, { useMemo } from 'react'
+import React, { useMemo, type ReactNode } from 'react'
import { EmptyStatus, LoadingStatus } from '@masknet/shared'
import { useI18N } from '../../locales/i18n_generated.js'
import { CountdownTimer } from './CountDownTimer.js'
import { makeStyles } from '@masknet/theme'
-import { Typography } from '@mui/material'
+import { IconButton, Typography } from '@mui/material'
import { formatDate } from './EventList.js'
import format from 'date-fns/format'
+import { Icons } from '@masknet/icons'
const useStyles = makeStyles()((theme) => ({
container: {
@@ -13,10 +14,20 @@ const useStyles = makeStyles()((theme) => ({
flexDirection: 'column',
height: '506px',
width: '100%',
- overflow: 'overlay',
+ overflowY: 'scroll',
position: 'relative',
gap: '10px',
- paddingBottom: '50px',
+ '&::-webkit-scrollbar': {
+ width: '4px',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: theme.palette.maskColor.secondaryLine,
+ borderRadius: '99px',
+ },
+ marginBottom: '50px',
+ },
+ paddingWrap: {
+ paddingRight: '12px',
},
empty: {
position: 'absolute',
@@ -32,7 +43,7 @@ const useStyles = makeStyles()((theme) => ({
},
eventCard: {
display: 'flex',
- padding: '8px 12px',
+ padding: '8px 0',
flexDirection: 'column',
gap: '8px',
fontWeight: 700,
@@ -67,6 +78,9 @@ const useStyles = makeStyles()((theme) => ({
fontWeight: 400,
lineHeight: '18px',
color: theme.palette.maskColor.main,
+ whiteSpace: 'nowrap',
+ overflow: 'hidden',
+ textOverflow: 'ellipsis',
},
second: {
fontSize: '14px',
@@ -85,7 +99,12 @@ const useStyles = makeStyles()((theme) => ({
fontWeight: 700,
lineHeight: '18px',
color: theme.palette.maskColor.main,
- padding: '10px 12px',
+ padding: '10px 0',
+ },
+ socialLinks: {
+ display: 'flex',
+ gap: '8px',
+ alignItems: 'center',
},
}))
@@ -96,6 +115,17 @@ interface NFTListProps {
dateString: string
}
+const socialIcons: Record
= {
+ twitter: ,
+ discord: ,
+ website: ,
+}
+
+const sortPlat = (_: any, b: { type: string }) => {
+ if (b.type === 'website') return -1
+ else return 0
+}
+
export function NFTList({ list, isLoading, empty, dateString }: NFTListProps) {
const { classes, cx } = useStyles()
const t = useI18N()
@@ -110,59 +140,81 @@ export function NFTList({ list, isLoading, empty, dateString }: NFTListProps) {
}, [list, dateString])
return (
- {isLoading && !list?.length ? (
-
-
-
- ) : !empty && listAfterDate.length ? (
- listAfterDate.map((key) => {
- return (
-
-
{format(new Date(key), 'MMM dd,yyy')}
- {list[key].map((v) => (
-
{
- window.open(v.event_url)
- }}>
-
-
-
-
{v.project.name}
+
+ {isLoading && !list?.length ? (
+
+
+
+ ) : !empty && listAfterDate.length ? (
+ listAfterDate.map((key) => {
+ return (
+
+
+ {format(new Date(key), 'MMM dd,yyy')}
+
+ {list[key].map((v) => (
+
{
+ window.open(v.event_url)
+ }}>
+
+
+
+
+ {v.project.name}
+
+
+
{v.project.description}
+
+
+
+ {v.project.links
+ .sort(sortPlat)
+ .map((platform: { type: string; url: string }) => {
+ return (
+ {
+ window.open(platform.url)
+ }}>
+ {socialIcons[platform.type]}
+
+ )
+ })}
+
+
+
+ {t.total()}
+
+ {Number(v.ext_info.nft_info.total).toLocaleString('en-US')}
+
+
+
+ {t.price()}
+
+ {v.ext_info.nft_info.token}
+
+
+
+ {t.date()}
+
+ {formatDate(v.event_date)}
+
+
+
-
{v.event_title}
-
-
-
-
- {t.total()}
-
- {v.ext_info.nft_info.total}
-
-
-
- {t.price()}
-
- {v.ext_info.nft_info.token}
-
-
-
- {t.date()}
-
- {formatDate(v.event_date)}
-
-
-
-
- ))}
-
- )
- })
- ) : (
-
{t.empty_status()}
- )}
+ ))}
+
+ )
+ })
+ ) : (
+
{t.empty_status()}
+ )}
+
)
}
diff --git a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
index 12a2351a99cd..cb904442e099 100644
--- a/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
+++ b/packages/plugins/Calendar/src/SiteAdaptor/components/NewsList.tsx
@@ -11,10 +11,20 @@ const useStyles = makeStyles()((theme) => ({
flexDirection: 'column',
height: '506px',
width: '100%',
- overflow: 'overlay',
+ overflowY: 'scroll',
position: 'relative',
gap: '10px',
- paddingBottom: '50px',
+ '&::-webkit-scrollbar': {
+ width: '4px',
+ },
+ '&::-webkit-scrollbar-thumb': {
+ backgroundColor: theme.palette.maskColor.secondaryLine,
+ borderRadius: '99px',
+ },
+ marginBottom: '50px',
+ },
+ paddingWrap: {
+ paddingRight: '12px',
},
empty: {
position: 'absolute',
@@ -30,7 +40,7 @@ const useStyles = makeStyles()((theme) => ({
},
eventCard: {
display: 'flex',
- padding: '8px 12px',
+ padding: '8px 0',
flexDirection: 'column',
gap: '8px',
borderBottom: `1px solid ${theme.palette.maskColor.line}`,
@@ -89,7 +99,7 @@ const useStyles = makeStyles()((theme) => ({
fontWeight: 700,
lineHeight: '18px',
color: theme.palette.maskColor.main,
- padding: '10px 12px',
+ padding: '10px 0',
},
}))
@@ -114,39 +124,45 @@ export function NewsList({ list, isLoading, empty, dateString }: NewsListProps)
}, [list, dateString])
return (
- {isLoading && !list?.length ? (
-
-
-
- ) : !empty && listAfterDate.length ? (
- listAfterDate.map((key) => {
- return (
-
-
{format(new Date(key), 'MMM dd,yyy')}
- {list[key].map((v) => (
-
{
- window.open(v.event_url)
- }}>
-
-
-
-
{v.project.name}
+
+ {isLoading && !list?.length ? (
+
+
+
+ ) : !empty && listAfterDate.length ? (
+ listAfterDate.map((key) => {
+ return (
+
+
+ {format(new Date(key), 'MMM dd,yyy')}
+
+ {list[key].map((v) => (
+
{
+ window.open(v.event_url)
+ }}>
+
+
+
+
+ {v.project.name}
+
+
+
{v.event_type}
-
{v.event_type}
+
{v.event_title}
+
{v.event_description}
-
{v.event_title}
-
{v.event_description}
-
- ))}
-
- )
- })
- ) : (
-
{t.empty_status()}
- )}
+ ))}
+
+ )
+ })
+ ) : (
+
{t.empty_status()}
+ )}
+
)
}