idea2app · TechQuery · Oct 18, 2024 · Oct 18, 2024 · Oct 18, 2024
diff --git a/ReadMe.md b/ReadMe.md
@@ -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
 

diff --git a/package.json b/package.json
@@ -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.",

diff --git a/preview/content.tsx b/preview/content.tsx
@@ -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';
 
@@ -9,6 +9,7 @@ import {
     CodeBlock,
     Dialog,
     DialogClose,
+    HorizontalMarquee,
     Icon,
     Loading,
     MonthCalendar,
@@ -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;
 
@@ -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" />
@@ -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>
             </>
         );
     }

diff --git a/source/HorizontalMarquee/index.tsx b/source/HorizontalMarquee/index.tsx
@@ -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={{

diff --git a/source/Icon.tsx b/source/Icon.tsx
@@ -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}

diff --git a/source/UserRank/Address.tsx b/source/UserRank/Address.tsx
@@ -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>
+);
diff --git a/source/UserRank/index.module.less b/source/UserRank/index.module.less
@@ -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);
+                    }
+                }
+            }
+        }
+    }
+}