Skip to content

Commit

Permalink
[add] User Rank component (#57)
Browse files Browse the repository at this point in the history
Co-authored-by: Five-great <43601963+Five-great@users.noreply.github.com>
  • Loading branch information
TechQuery and Five-great authored Oct 18, 2024
1 parent 49e4491 commit c5a6229
Show file tree
Hide file tree
Showing 11 changed files with 438 additions and 21 deletions.
1 change: 1 addition & 0 deletions ReadMe.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ A **[React][1] advanced components library** based on [TypeScript][2] & [Bootstr
18. [Share Box](source/ShareBox.tsx)
19. [Overlay Box](source/OverlayBox.tsx)
20. [Dialog](source/Dialog.tsx)
21. [User Rank](source/UserRank.tsx)

#### Data components

Expand Down
2 changes: 1 addition & 1 deletion package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "idea-react",
"version": "2.0.0-rc.4",
"version": "2.0.0-rc.5",
"license": "LGPL-3.0-or-later",
"author": "shiy2008@gmail.com",
"description": "A React advanced components library based on TypeScript & Bootstrap, built by idea2app remote developers team.",
Expand Down
46 changes: 43 additions & 3 deletions preview/content.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { observable } from 'mobx';
import { observer } from 'mobx-react';
import { PureComponent } from 'react';
import { Component } from 'react';
import { Button, Form, Image, Modal } from 'react-bootstrap';
import { formToJSON, sleep } from 'web-utility';

Expand All @@ -9,6 +9,7 @@ import {
CodeBlock,
Dialog,
DialogClose,
HorizontalMarquee,
Icon,
Loading,
MonthCalendar,
Expand All @@ -20,12 +21,14 @@ import {
ShareBox,
SpinnerButton,
TimeDistance,
TypeEcho
TypeEcho,
UserRankView,
VerticalMarquee
} from '../source';
import { CodeExample, Section } from './utility';

@observer
export class Content extends PureComponent {
export class Content extends Component {
@observable
accessor pageIndex = 1;

Expand Down Expand Up @@ -92,6 +95,22 @@ export class Content extends PureComponent {
</CodeExample>
</Section>

<Section title="Horizontal Marquee">
<CodeExample>
<HorizontalMarquee>
{'idea2app '.repeat(15).trim()}
</HorizontalMarquee>
</CodeExample>
</Section>

<Section title="Vertical Marquee">
<CodeExample>
<VerticalMarquee style={{ height: '10rem' }}>
<img src="https://tech-query.me/medias/featureimages/22.jpg" />
</VerticalMarquee>
</CodeExample>
</Section>

<Section title="Time Distance">
<CodeExample>
<TimeDistance date="1989-06-04" />
Expand Down Expand Up @@ -219,6 +238,27 @@ export class Content extends PureComponent {
{showLoading && <Loading>加载中...</Loading>}
</CodeExample>
</Section>

<Section title="User Rank">
<CodeExample>
<UserRankView
title="GitHub"
rank={[
'Five-great',
'TechQuery',
'stevending1st',
'wangrunlin'
].map((name, index) => ({
id: index + 1,
name,
avatar: `https://github.com/${name}.png`,
website: `https://github.com/${name}`,
score: 100 - index
}))}
linkOf={({ id }) => `/user/${id}`}
/>
</CodeExample>
</Section>
</>
);
}
Expand Down
13 changes: 7 additions & 6 deletions source/HorizontalMarquee/index.tsx
Original file line number Diff line number Diff line change
@@ -1,18 +1,19 @@
import { FC, PropsWithChildren } from 'react';
import { FC, HTMLAttributes } from 'react';

import * as style from './index.module.less';

export type HorizontalMarqueeProps = PropsWithChildren<
Partial<Record<'maxWidth' | 'duration' | 'height', string>>
>;
export type HorizontalMarqueeProps = HTMLAttributes<HTMLDivElement> &
Partial<Record<'maxWidth' | 'duration' | 'height', string>>;

export const HorizontalMarquee: FC<HorizontalMarqueeProps> = ({
className = '',
children,
maxWidth = '100%',
duration,
height
height,
...props
}) => (
<div className="overflow-hidden mw-100">
<div className={`overflow-hidden mw-100 ${className}`} {...props}>
<div
className={`d-inline-block align-top text-nowrap ${style.scrollWrap}`}
style={{
Expand Down
2 changes: 1 addition & 1 deletion source/Icon.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ export const Icon: FC<IconProps> = ({
size,
...props
}) => (
<i
<span
className={classNames(`bi-${name}`, className)}
style={{ fontSize: size && `${size}rem`, ...style }}
{...props}
Expand Down
20 changes: 20 additions & 0 deletions source/UserRank/Address.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import { FC } from 'react';

import { Icon } from '../Icon';

export type UserAddressProps = Partial<Record<'email' | 'website', string>>;

export const UserAddress: FC<UserAddressProps> = ({ email, website }) => (
<address className="mb-0 d-flex justify-content-around gap-2">
{email && (
<a rel="noreferrer" target="_blank" href={'mailto:' + email}>
<Icon name="envelope" />
</a>
)}
{website && (
<a rel="noreferrer" target="_blank" href={website}>
<Icon name="globe2" />
</a>
)}
</address>
);
227 changes: 227 additions & 0 deletions source/UserRank/index.module.less
Original file line number Diff line number Diff line change
@@ -0,0 +1,227 @@
@keyframes suspension {
0% {
position: relative;
top: 0px;
}
50% {
position: relative;
top: -0.8rem;
}
100% {
position: relative;
top: 0px;
}
}

.topUserRow {
--logo-image: url('https://github.com/idea2app.png');
--title-background-image: url('https://hackathon-api.static.kaiyuanshe.cn/6342619375fa1817e0f56ce1/2022/10/09/rrrr.png');
a {
color: inherit;
text-decoration: none;
}
.imgBox {
width: 2.1rem;
&:hover img {
transition: all 0.3s;
transform: scale(1.1);
}
}
.showTitle {
position: relative;
height: 4.8rem;
padding-top: 1.2rem;
z-index: 4;
background-image: var(--title-background-image);
background-attachment: fixed;
background-size: 21rem auto;
margin-top: 1.5rem;
&::before {
content: '';
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border-radius: 0.3rem;
background-color: rgba(161, 160, 152, 0.7);
}
.showMedal {
position: absolute;
top: -1.2rem;
left: 5%;
i {
width: 1.7rem;
height: 1.7rem;
background-image: var(--logo-image),
linear-gradient(#ffd83a, #fdeba0);
background-blend-mode: lighten;
background-position: center;
background-size: 1.5rem 1.5rem;
background-repeat: no-repeat;
border: 0.1rem solid #ffd83a;
box-shadow: 0 0 0.5rem 0 #ffd83a;
&:first-child {
border-color: #d8d8d8;
box-shadow: 0 0 0.5rem 0 #d8d8d8;
background-image: var(--logo-image),
linear-gradient(#d8d8d8, #eeeeee);
}
&:last-child {
border-color: #fab36e;
box-shadow: 0 0 0.5rem 0 #fab36e;
background-image: var(--logo-image),
linear-gradient(#fab36e, #fbe7d3);
}
}
}
h3 {
position: relative;
z-index: 2;
font-size: 2rem;
letter-spacing: 0.4rem;
width: 10rem;
cursor: default;
text-shadow:
0px 1px 0px #c0c0c0,
0px 2px 0px #b0b0b0,
0px 3px 0px #a0a0a0,
0px 4px 0px #909090,
0px 5px 10px rgba(0, 0, 0, 0.6);
color: transparent;
font-family: "'book antiqua', palatino, serif";
&::after {
content: attr(data-text);
display: block;
position: absolute;
z-index: 1;
top: 0;
left: 0;
width: 10rem;
margin: 0 auto;
text-shadow: none;
background-image: linear-gradient(
to right,
#d8d8d8 10%,
#ffd83a 60%,
#fab36e 75%
);
background-clip: text;
}
}
}
.topUserUl {
z-index: 5;
li {
text-align: center;
cursor: default;
.showBox {
min-height: 6rem;
letter-spacing: 1px;
z-index: 3;
}
.imgBox {
z-index: 2;
animation: 3.5s suspension ease-in-out infinite;
transition: all 0.6s;
}
&:nth-child(1) {
order: 2;
padding-top: 0.3rem;
.showBox {
color: #ffd83a;
border-bottom: 1.5rem solid #ffd83a;
text-shadow:
0px 1px 0px #969653,
0px 2px 5px rgba(240, 219, 100, 0.4);
i {
width: 2.5rem;
height: 2.6rem;
background-image: var(--logo-image),
linear-gradient(#ffd83a, #fdeba0);
background-blend-mode: lighten;
background-position: center;
background-size: 2.5rem auto;
background-repeat: no-repeat;
}
}
.imgBox {
width: 6.4rem;
animation-delay: 3.5s;
}
}
&:nth-child(2) {
order: 1;
padding-top: 1rem;
.showBox {
color: #d8d8d8;
border-bottom: 1.2rem solid #d8d8d8;
text-shadow: 0px 1px 0px #d9cdcd 0px 2px 5px
rgba(133, 132, 130, 0.4);
i {
background-image: var(--logo-image),
linear-gradient(#d8d8d8, #eeeeee);
}
}
.imgBox {
width: 6rem;
animation-delay: 1.4s;
}
}
&:nth-child(3) {
order: 3;
padding-top: 1.5rem;
.showBox {
border-bottom: 1rem solid #fab36e;
color: #fab36e;
text-shadow:
0px 1px 0px #aa8865,
0px 2px 5px rgba(167, 129, 67, 0.4);
i {
background-image: var(--logo-image),
linear-gradient(#fab36e, #fbe7d3);
}
}
.imgBox {
width: 5.6rem;
animation-delay: 2.4s;
}
}
&:hover .imgBox {
animation-play-state: paused;
}
}
}
.topUserList {
tr {
&::before {
content: '';
position: absolute;
display: block;
right: 0;
bottom: 0;
width: 0;
height: 2px;
background: #9fc2ef;
transition: all 0.5s;
}
&:hover::before {
left: 0;
width: 100%;
}
}
td {
cursor: default;
background-color: transparent;
.usernameBox {
font-size: 0;
&:hover {
.imgBox > img {
transform: scale(1.2);
}
}
}
}
}
}
Loading

0 comments on commit c5a6229

Please sign in to comment.