Idea React components

TypeEcho

_
<TypeEcho text="Hello, Idea React!" />

Horizontal Marquee

idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app
<HorizontalMarquee>
  idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app idea2app
</HorizontalMarquee>

Vertical Marquee

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

Time

<lV
  dateTime="2022-11-27"
  format="YYYY 年 MM 月 DD 日"
/>

Time Distance

<TimeDistance date="1989-06-04" />

Timeline

  1. Discover

    ⏲️

    • Deny

      ⏲️

      • Lock down

        ⏲️

        • Open

          ⏲️

          <div
            style={{
              background: 'linear-gradient(to right, rgba(235, 187, 167, 1), rgba(207, 199, 248, 1))'
            }}
          >
            <Timeline
              events={[
                {
                  time: [
                    '2019-12-01'
                  ],
                  title: 'Discover'
                },
                {
                  time: [
                    '2020-01-02'
                  ],
                  title: 'Deny'
                },
                {
                  time: [
                    '2020-01-23'
                  ],
                  title: 'Lock down'
                },
                {
                  time: [
                    '2022-12-01'
                  ],
                  title: 'Open'
                }
              ]}
              timeFormat="YYYY-MM-DD"
            />
          </div>

          Icon

          <Icon
            className="text-danger"
            name="trash"
            size={2}
          />

          Avatar

          <Avatar src="https://github.com/idea2app.png" />

          Nameplate

          idea2app
          <Nameplate
            avatar="https://github.com/idea2app.png"
            name="idea2app"
          />

          Spinner Button

          <>
            <SpinnerButton
              animation="border"
              className="me-3"
              loading
            />
            <SpinnerButton
              animation="grow"
              loading
              type="submit"
            >
              Submit
            </SpinnerButton>
          </>

          Select

          <Select
            onChange={function nN(){}}
            value="0"
          >
            <Option value="0">
              <Icon
                className="me-2"
                name="heart"
              />
              idea2app
            </Option>
            <Option value="1">
              <Icon
                className="me-2"
                name="bootstrap"
              />
              freeCodeCamp
            </Option>
          </Select>

          Month Calendar

          2024-11
          SundayMondayTuesdayWednesdayThursdayFridaySaturday
          Hello!
          <MonthCalendar
            onChange={function nN(){}}
            onSelect={function nN(){}}
            value={[
              {
                content: 'Hello!',
                date: new Date('2024-11-21T17:37:16.412Z')
              }
            ]}
          />

          IdeaDialog

          <>
            <Button onClick={function nN(){}}>
              显示弹窗
            </Button>
            <DialogComponent />
          </>

          Share Box

          idea2app
          click to share
          <>
            <ShareBox
              text="Every idea of yours is worth our efforts to realize"
              title="idea2app"
              url="https://idea2app.cn"
            >
              <Nameplate
                avatar="https://github.com/idea2app.png"
                name="idea2app"
              />
            </ShareBox>
            click to share
          </>

          Overlay Box

          <OverlayBox
            detail={<Image src="https://github.com/idea2app.png" />}
            title="view info"
            trigger="click"
          >
            <Button>
              查看
            </Button>
          </OverlayBox>
          <PageNav />

          Loading

          <>
            <Button
              onClick={function nN(){}}
              style={{
                zIndex: '1040'
              }}
            >
              显示
            </Button>
          </>

          User Rank

          <UserRankView
            linkOf={function nN(){}}
            rank={[
              {
                avatar: 'https://github.com/Five-great.png',
                id: 1,
                name: 'Five-great',
                score: 100,
                website: 'https://github.com/Five-great'
              },
              {
                avatar: 'https://github.com/TechQuery.png',
                id: 2,
                name: 'TechQuery',
                score: 99,
                website: 'https://github.com/TechQuery'
              },
              {
                avatar: 'https://github.com/stevending1st.png',
                id: 3,
                name: 'stevending1st',
                score: 98,
                website: 'https://github.com/stevending1st'
              },
              {
                avatar: 'https://github.com/wangrunlin.png',
                id: 4,
                name: 'wangrunlin',
                score: 97,
                website: 'https://github.com/wangrunlin'
              }
            ]}
            title="GitHub"
          />