Untitled
unknown
jsx
a year ago
2.9 kB
3
Indexable
Never
import React from 'react' import { CloseOutlined, Grading, PersonOutlined, ShoppingCartOutlined, Warehouse } from '@mui/icons-material'; import "../widget/widget.scss" import { useState } from 'react'; import { AnimateSharedLayout } from 'framer-motion'; const Widget =({type}) => { let data; //temporary const [expanded, setExpanded]= useState(false); //const diff =20; switch(type){ case "BestSeller": data={ amount:10, title:"Best Seller", isMoney:false, link:"View Best Seller items", icon:<PersonOutlined className="icon" style={{color:"white", backgroundColor:"green",}}/>, }; break; case "lowstock": data={ amount:20, title:"Low Stock", isMoney:false, link:"View Low stock item ", icon:<ShoppingCartOutlined className="icon" style={{color:"white", backgroundColor:"maroon",}}/>, }; break; case "instock": data={ amount:30, title:"In Stock", isMoney:true, link:"View purchased order", icon:<Warehouse className="icon" style={{color:"white", backgroundColor:"green",}}/>, }; break; case "out": data={ amount:40, title:"Out", isMoney:true, link:"View sales order", icon:<Grading className="icon" style={{color:"white", backgroundColor:"grey",}}/>, }; break; default: break; } return ( expanded ? <ExpandedCard param={data} setExpanded={()=>setExpanded(false)}/> : <CompactCard param={data} setExpanded={()=>setExpanded(true)}/> ); }; //compactCard function CompactCard ({param, setExpanded}){ return( <div className="widget" onClick={setExpanded} layoutId={`card-${param.title}`}> <div className="left"> <span className="title">{param.title}</span> <span className="counter">{param.isMoney && "$"}{param.amount}</span> <span className="link">{param.link}</span> </div> <div className="right"> {/*<div className="percentage positive"> <KeyboardArrowUp/> {diff}% </div>*/} {param.icon} </div> </div> ) } //expandedCard function ExpandedCard ({param,setExpanded}){ return( <div className="ExpandedCard" layoutId={`card-${param.title}`}> <div> <CloseOutlined onClick={setExpanded}/> </div> <span>{param.title}</span> </div> ) } export default Widget