@useloops/design-system
Version:
The official React based Loops design system
2 lines (1 loc) • 868 B
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{styled as o,Box as r,linkClasses as n}from"@mui/material";import{Fragment as i}from"react";import m from"../Link/Link.js";import a from"../Typography/Typography.js";const c=o(r)(({theme:e})=>({alignItems:"center",display:"flex",gap:e.spacing(.5)})),l=o(m)(({theme:e})=>({[`&.${n.root}`]:{"&:hover":{textDecorationColor:e.custom.palette.text.secondary}}})),p=o(a)(({theme:e})=>({color:e.custom.palette.text.secondary})),s=o(a)(({theme:e})=>({color:e.custom.palette.text.secondary})),h=({links:o})=>e(c,{children:o?.map(({label:r,...n},m)=>t(i,{children:[n.href||void 0!==n.onClick?e(l,{underline:"hover",...n,children:e(p,{variation:"sm",component:"p",children:r})},r):e(p,{variation:"sm",component:"p",children:r}),e(s,{variation:"sm",component:"p",children:m+1<o?.length?"/":""})]},r))});export{h as default};