-
Notifications
You must be signed in to change notification settings - Fork 2
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #531 from us3r-network/u3-degen
U3 degen
- Loading branch information
Showing
33 changed files
with
1,756 additions
and
15 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,34 @@ | ||
| import { useNavigate } from 'react-router-dom'; | ||
| import { UserAvatar, UserName } from '@us3r-network/profile'; | ||
| import useLogin from '../../hooks/shared/useLogin'; | ||
|
|
||
| export default function LoginButtonV2() { | ||
| const { isLogin, login } = useLogin(); | ||
| const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <button | ||
| type="button" | ||
| className="flex items-center gap-[8px] rounded-[12px] text-white text-[16px] font-bold" | ||
| onClick={() => { | ||
| if (isLogin) { | ||
| navigate('/u'); | ||
| } else { | ||
| login(); | ||
| } | ||
| }} | ||
| > | ||
| {isLogin ? ( | ||
| <> | ||
| <UserAvatar | ||
| className="w-[40px] h-[40px] flex-shrink-0" | ||
| style={{ width: '40px', height: '40px' }} | ||
| /> | ||
| <UserName className="text-[#FFF] text-[16px] font-normal" /> | ||
| </> | ||
| ) : ( | ||
| <span className="wl-user-button_no-login-text">Login</span> | ||
| )} | ||
| </button> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
133 changes: 133 additions & 0 deletions
133
apps/u3/src/components/news/links/community/CommunityLinks.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,133 @@ | ||
| /* | ||
| * @Author: shixuewen [email protected] | ||
| * @Date: 2022-07-05 15:35:42 | ||
| * @LastEditors: bufan [email protected] | ||
| * @LastEditTime: 2023-12-06 10:36:45 | ||
| * @Description: 首页任务看板 | ||
| */ | ||
| import styled from 'styled-components'; | ||
| // import { useNavigate } from 'react-router-dom'; | ||
| import InfiniteScroll from 'react-infinite-scroll-component'; | ||
| import Loading from '../../../common/loading/Loading'; | ||
| import ListScrollBox from '../../../common/box/ListScrollBox'; | ||
| import { MainWrapper } from '../../../layout/Index'; | ||
| import NoResult from '../../../layout/NoResult'; | ||
| import { LinksPageProps } from '../LinksPage'; | ||
| import LinksList from './LinksList'; | ||
|
|
||
| export default function CommunityLinks({ | ||
| loading, | ||
| hasMore, | ||
| links, | ||
| // currentSearchParams, | ||
| // searchParamsChange, | ||
| getMore, | ||
| quickView, | ||
| }: LinksPageProps) { | ||
| // const navigate = useNavigate(); | ||
|
|
||
| return ( | ||
| <Box> | ||
| {(() => { | ||
| if (loading) { | ||
| return ( | ||
| <LinksWrapper> | ||
| <div className="loading"> | ||
| <Loading /> | ||
| </div> | ||
| </LinksWrapper> | ||
| ); | ||
| } | ||
| if (links.length === 0) { | ||
| return ( | ||
| <LinksWrapper> | ||
| <NoResult /> | ||
| </LinksWrapper> | ||
| ); | ||
| } | ||
|
|
||
| return ( | ||
| <ListBox id="links-scroll-wrapper"> | ||
| <InfiniteScroll | ||
| style={{ overflow: 'hidden' }} | ||
| dataLength={links?.length || 0} | ||
| next={() => { | ||
| if (loading) return; | ||
| getMore(); | ||
| }} | ||
| hasMore={hasMore} | ||
| scrollThreshold="600px" | ||
| loader={ | ||
| <LoadingMoreWrapper> | ||
| <Loading /> | ||
| </LoadingMoreWrapper> | ||
| } | ||
| scrollableTarget="links-scroll-wrapper" | ||
| > | ||
| <LinksList | ||
| data={links} | ||
| onItemClick={(item) => { | ||
| // navigate(item?.url); | ||
| if (quickView) { | ||
| quickView(item); | ||
| return; | ||
| } | ||
| window.open(item?.url, '_blank'); | ||
| }} | ||
| /> | ||
| </InfiniteScroll> | ||
| </ListBox> | ||
| ); | ||
| })()} | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| const Box = styled(MainWrapper)` | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 24px; | ||
| `; | ||
| const LinksWrapper = styled.div` | ||
| border-radius: 20px; | ||
| overflow: hidden; | ||
| display: flex; | ||
| flex-grow: 1; | ||
| & .loading { | ||
| width: 100%; | ||
| display: flex; | ||
| align-items: center; | ||
| justify-content: center; | ||
| height: 100%; | ||
| } | ||
| `; | ||
| const ListBox = styled(ListScrollBox)` | ||
| width: 100%; | ||
| height: calc(100%); | ||
| overflow: scroll; | ||
| & .load-more { | ||
| margin: 20px; | ||
| text-align: center; | ||
| color: #718096; | ||
| > button { | ||
| cursor: pointer; | ||
| background-color: inherit; | ||
| color: #fff; | ||
| border: 1px solid gray; | ||
| border-radius: 5px; | ||
| padding: 10px 20px; | ||
| outline: none; | ||
| } | ||
| } | ||
| `; | ||
|
|
||
| const LoadingMoreWrapper = styled.div` | ||
| width: 100%; | ||
| display: flex; | ||
| justify-content: center; | ||
| align-items: center; | ||
| margin-top: 20px; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,41 @@ | ||
| /* | ||
| * @Author: shixuewen [email protected] | ||
| * @Date: 2022-12-08 14:04:04 | ||
| * @LastEditors: bufan [email protected] | ||
| * @LastEditTime: 2023-11-14 17:42:47 | ||
| * @Description: file description | ||
| */ | ||
| import styled from 'styled-components'; | ||
| import { LinkListItem } from 'src/services/news/types/links'; | ||
| import AnimatedListItem, { | ||
| useAnimatedListTransition, | ||
| } from '../../../common/animation/AnimatedListItem'; | ||
| import ListItem from './LinksListItem'; | ||
|
|
||
| export type LinksListProps = { | ||
| data: LinkListItem[]; | ||
| onItemClick?: (item: LinkListItem) => void; | ||
| }; | ||
| export default function LinksList({ data, onItemClick }: LinksListProps) { | ||
| const transitions = useAnimatedListTransition(data); | ||
| return ( | ||
| <Wrapper> | ||
| {transitions((styles, item) => { | ||
| return ( | ||
| <AnimatedListItem key={item.url} styles={{ ...styles }}> | ||
| <ListItem | ||
| data={item} | ||
| onClick={() => onItemClick && onItemClick(item)} | ||
| /> | ||
| </AnimatedListItem> | ||
| ); | ||
| })} | ||
| </Wrapper> | ||
| ); | ||
| } | ||
| const Wrapper = styled.div` | ||
| width: 100%; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 20px; | ||
| `; |
84 changes: 84 additions & 0 deletions
84
apps/u3/src/components/news/links/community/LinksListItem.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /* | ||
| * @Author: shixuewen [email protected] | ||
| * @Date: 2023-03-01 10:08:00 | ||
| * @LastEditors: bufan [email protected] | ||
| * @LastEditTime: 2023-11-15 16:43:21 | ||
| * @Description: file description | ||
| */ | ||
| import styled, { StyledComponentPropsWithRef } from 'styled-components'; | ||
| import { LinkListItem } from 'src/services/news/types/links'; | ||
| import { useMemo } from 'react'; | ||
| import EllipsisText from '../../../common/text/EllipsisText'; | ||
| import LinkLogo from '../LinkLogo'; | ||
|
|
||
| type Props = StyledComponentPropsWithRef<'div'> & { | ||
| data: LinkListItem; | ||
| }; | ||
| export default function ListItem({ data, ...otherProps }: Props) { | ||
| const { url, metadata } = data; | ||
| const platformLogo = useMemo(() => metadata?.icon || '', [metadata]); | ||
| return ( | ||
| <CardWrapper {...otherProps}> | ||
| <CardBody> | ||
| <Logo logo={platformLogo} link={url} /> | ||
| <Right> | ||
| <Title>{metadata?.title}</Title> | ||
| <Url>{url}</Url> | ||
| </Right> | ||
| </CardBody> | ||
| </CardWrapper> | ||
| ); | ||
| } | ||
|
|
||
| const CardWrapper = styled.div` | ||
| width: 100%; | ||
| background: #1b1e23; | ||
| overflow: hidden; | ||
| cursor: pointer; | ||
| `; | ||
| const CardBody = styled.div` | ||
| width: 100%; | ||
| height: 100%; | ||
| box-sizing: border-box; | ||
| display: flex; | ||
| align-items: center; | ||
| gap: 10px; | ||
| transition: all 0.3s; | ||
| &:hover { | ||
| transform: scale(1.05); | ||
| } | ||
| `; | ||
| const Logo = styled(LinkLogo)` | ||
| width: 48px; | ||
| height: 48px; | ||
| border-radius: 40px; | ||
| `; | ||
| const Right = styled.div` | ||
| width: 0; | ||
| flex: 1; | ||
| display: flex; | ||
| flex-direction: column; | ||
| gap: 6px; | ||
| `; | ||
| const Title = styled(EllipsisText)` | ||
| color: #fff; | ||
| width: 100%; | ||
| /* medium-16 */ | ||
| font-family: Rubik; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 500; | ||
| line-height: normal; | ||
| text-align: left; | ||
| `; | ||
| const Url = styled(EllipsisText)` | ||
| color: var(--718096, #718096); | ||
| width: 100%; | ||
| /* Regular-16 */ | ||
| font-family: Rubik; | ||
| font-size: 16px; | ||
| font-style: normal; | ||
| font-weight: 400; | ||
| line-height: normal; | ||
| text-align: left; | ||
| `; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.