<div id="app">
  
</div>              

body {
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  padding: 0;
  margin: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(90deg, #7b2ff7, #f107a3);
}

import React,{useState, StrictMode,useEffect} from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'
import {motion,useAnimationControls} from "https://esm.sh/framer-motion@8.3.3";

function randomSort(arr) {
  // your code here
   var newArr = [];
  var len = arr.length;
  for (var i = 0; i < len; i++) {
    var random = Math.floor(Math.random() * arr.length);
    newArr.push(arr[random]);
    arr.splice(random, 1);
  }
  return newArr;
}

const App = function() {
  
  const [list,setList] = useState(['JavaScript','html','css','webAssembly'])
  
  return (
    <div style={{
        display:'flex',
        flexDirection:'column',
        justifyContent:'center',
        alignItems:'center',
        fontFamily:'system-ui',
         fontSize:'1.5rem',
           fontWeight:'bold',
      }}>
     <motion.div
       style={{
          display:'flex',
          flexDirection:'column',
           alignItems:'center',
           gap:20
        }}
       >
      {
        list.map(item=>{
          return (

      <motion.div
        layout
        style={{
          width:200,
            height:60,
              background:'white',
           display:'flex',
           justifyContent:'center',
             alignItems:'center',
               borderRadius:12
        }}
      
        key={item}
        >
        {item}
        
        </motion.div>)
        })
      }
       <motion.div
         style={{
            width:160,
            height:50,
              background:'white',
           display:'flex',
           justifyContent:'center',
             alignItems:'center',
               borderRadius:8,
                 fontSize:20,
                   fontWeight:100,
           backgroundColor:'black',
             color:'white',
           letterSpacing:2,
             cursor:'pointer'
         }}
           onTap={()=>{
                setList(randomSort(list))
              }}
         >
         点击改变顺序
       </motion.div>
    </motion.div>
  
      
      
    </div>

  )
}

const container = document.querySelector("#app")
console.log(container)
const root = ReactDOM.createRoot(container)
root.render(
 <StrictMode>
    <App />
  </StrictMode>
)