index.js

const uis = [{
  href: "47-css-custom-scrollbar",
  text: "CSS 自定义滚动条样式",
  newItem: true
}, {
  href: "46-css-aspect-ratio",
  text: "CSS 设置宽高比"
}, {
  href: "45-URLSearchParams",
  text: "URLSearchParams 使用简介"
}, {
  href: "44-css-pointer-events",
  text: "CSS 事件穿透"
}, {
  href: "43-css-gradient-shadow",
  text: "CSS 渐变阴影"
}, {
  href: "42-clipboard-api",
  text: "剪贴板 API 操作"
}, {
  href: "41-css-scroll-snap",
  text: "CSS 滚动贴合"
}, {
  href: "40-multi-column-layout",
  text: "Multi-column 布局"
}, {
  href: "39-web-animations",
  text: "Web Animations API"
}, {
  href: "38-horizontal-scrolling",
  text: "横向滚动"
}, {
  href: "37-container-queries",
  text: "CSS Container Queries"
}, {
  href: "36-tech-website",
  text: "HTML&CSS 工业风网站"
}, {
  href: "35-collision-physics",
  text: "JS 碰撞物理引擎"
}, {
  href: "34-drag-drop-api",
  text: "原生拖拽与拖放操作"
}, {
  href: "33-text-image-layout",
  text: "图片文字环绕"
}, {
  href: "32-place-item-center",
  text: "2行代码居中元素"
}, {
  href: "31-05-wechat-emoji-effect",
  text: "仿微信8.0表情动画"
}, {
  href: "31-webcomponent-get-started",
  text: "Web Components 入门实战"
}, {
  href: "01-social-icon-hover-glow-effect",
  text: "社交图标Hover发光特效"
}, {
  href: "02-login-form-glass-effect",
  text: "登录表单玻璃特效"
}, {
  href: "03-chatting-ui",
  text: "移动聊天UI实现"
}, {
  href: "04-svg-text-drawing-effect",
  text: "文本绘制及渐变特效"
}, {
  href: "05-button-hover-border-drawing-effect",
  text: "按钮Hover边框绘制特效"
}, {
  href: "06-libra-ui-concept",
  text: "Libra概念UI设计实现"
}, {
  href: "07-3d-cubic-images",
  text: "3D立方体照片墙"
}, {
  href: "08-parallax-scrolling",
  text: "纯CSS页面视差滚动特效"
}, {
  href: "09-japanese-pronunciation",
  text: "CSS翻转特效制作五十音图"
}, {
  href: "10-navigation-bar",
  text: "4种不同的导航高亮指示"
}, {
  href: "11-canvas-bar-chart",
  text: "原生Canvas实现柱状图"
}, {
  href: "12-skill-progress-bar",
  text: "CSS技能进度条表现效果"
}, {
  href: "14-image-slider",
  text: "图片轮播组件"
}, {
  href: "15-responsive-navbar",
  text: "响应式全屏导航"
}, {
  href: "16-svg-animation-truck",
  text: "SVG工厂动画"
}, {
  href: "17-upload-button",
  text: "动画上传按钮"
}, {
  href: "18-elsa-magic-effect",
  text: "冰雪奇缘魔法特效"
}, {
  href: "19-profile-card",
  text: "个人资料卡页面"
}, {
  href: "20-typewritter-effect",
  text: "打字机效果"
}, {
  href: "21-range-slider",
  text: "滑动选择器美化"
}, {
  href: "22-face-reco-mask",
  text: "人脸识别戴口罩"
}, {
  href: "23-fullwebsite-design-agency",
  text: "整站-科技公司首页"
}, {
  href: "24-fetch-get-data",
  text: "使用 fetch 加载远程数据"
}, {
  href: "25-neumorphism-tabs",
  text: "新拟态选项卡"
}, {
  href: "26-glassmorphism",
  text: "玻璃态特效"
}, {
  href: "27-glitch-effect",
  text: "赛博朋克按钮"
}, {
  href: "28-css-colors",
  text: "HSL 颜色表示法"
}, {
  href: "29-resizable-element",
  text: "可缩放元素"
}, {
  href: "30-gradient-background-animation",
  text: "渐变背景过渡动画"
}];

function UILists() {
  return uis.map((ui, i) => {
    return /*#__PURE__*/React.createElement("li", {
      style: {
        position: "relative"
      }
    }, /*#__PURE__*/React.createElement(Link, {
      item: ui,
      key: i
    }));
  });
}

function Link({
  item
}) {
  return /*#__PURE__*/React.createElement("a", {
    href: item.href
  }, item.text, item.newItem ? /*#__PURE__*/React.createElement("span", {
    style: {
      background: "hsl(121deg 100% 50%)",
      borderRadius: 4,
      fontSize: 10,
      padding: "6px 4px",
      color: "#000000",
      fontWeight: 600,
      position: "absolute",
      right: -14,
      top: -6
    }
  }, "\uFF08NEW!\uFF09") : null);
}

const list = document.querySelector(".list");
ReactDOM.render( /*#__PURE__*/React.createElement(UILists, null), list);