@tidy-ui/card
Version:
The Card component gives your website a modern card layout, perfect for showcasing important details in a stylish box. Whether you're displaying products, music albums, movies, or hotel info, the possibilities are endless. Multiple cards can create a cool
2 lines (1 loc) • 4.97 kB
JavaScript
import n from"react";import{css as e,createFontStyle as r,styled as t,hsla as o,color as a,applyStandardOverrideStyles as i,Icon as d}from"@tidy-ui/commons";var l=function(){return l=Object.assign||function(n){for(var e,r=1,t=arguments.length;r<t;r++)for(var o in e=arguments[r])Object.prototype.hasOwnProperty.call(e,o)&&(n[o]=e[o]);return n},l.apply(this,arguments)};function c(n,e){var r={};for(var t in n)Object.prototype.hasOwnProperty.call(n,t)&&e.indexOf(t)<0&&(r[t]=n[t]);if(null!=n&&"function"==typeof Object.getOwnPropertySymbols){var o=0;for(t=Object.getOwnPropertySymbols(n);o<t.length;o++)e.indexOf(t[o])<0&&Object.prototype.propertyIsEnumerable.call(n,t[o])&&(r[t[o]]=n[t[o]])}return r}function p(n,e){return Object.defineProperty?Object.defineProperty(n,"raw",{value:e}):n.raw=e,n}var s,m,h,u,f,b,g,v,y,w,x,O,E,P,k,j,D=e(u||(u=p(["\n ","\n"],["\n ","\n"])),function(n){var t=n.theme,o=t.palette,a=t.layout,i=n.isSharp,d=n.accent,l=n.accentPosition,c=n.href,u=n.margin,f=n.height,b=n.width;return e(h||(h=p(["\n ","\n background-color: ",";\n box-shadow: ",";\n color: ",";\n margin: ",";\n height: ",";\n width: ",";\n ","\n ","\n ","\n "],["\n ","\n background-color: ",";\n box-shadow: ",";\n color: ",";\n margin: ",";\n height: ",";\n width: ",";\n ","\n ","\n ","\n "])),r(),o.background.card,a.shadow,o.text.primary,u,f,b,!i&&e(s||(s=p(["\n border-radius: ",";\n "],["\n border-radius: ",";\n "])),a.radius),d&&"border-".concat(l,": 2px solid ").concat(o[d][600],";"),c&&e(m||(m=p(["\n cursor: pointer;\n "],["\n cursor: pointer;\n "]))))}),C=t.a(b||(b=p(["\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(30%, -30%);\n padding: 0.5rem;\n background-color: ",";\n ","\n &:hover {\n background-color: ",";\n }\n"],["\n display: none;\n position: absolute;\n top: 0;\n right: 0;\n transform: translate(30%, -30%);\n padding: 0.5rem;\n background-color: ",";\n ","\n &:hover {\n background-color: ",";\n }\n"])),o(a.slate[400],.1),function(n){var r=n.theme.layout;return e(f||(f=p(["\n border-radius: ",";\n "],["\n border-radius: ",";\n "])),r.radius)},o(a.slate[400],.2)),N=t.header(y||(y=p(["\n ","\n ","\n"],["\n ","\n ","\n"])),function(n){var t=n.theme.palette,o=n.isDivided;return e(v||(v=p(["\n ","\n position: relative;\n width: 100%;\n ","\n "],["\n ","\n position: relative;\n width: 100%;\n ","\n "])),r("h5"),o&&e(g||(g=p(["\n padding-bottom: 0.25rem;\n border-bottom: 1px solid ",";\n "],["\n padding-bottom: 0.25rem;\n border-bottom: 1px solid ",";\n "])),t.divider))},i),R=t(d.Launch)(x||(x=p(["\n ","\n"],["\n ","\n"])),function(n){var r=n.theme,t=r.palette,o=r.isDark;return e(w||(w=p(["\n height: 1.25rem;\n width: 1.25rem;\n top: 0.5rem;\n right: 0.5rem;\n color: ",";\n "],["\n height: 1.25rem;\n width: 1.25rem;\n top: 0.5rem;\n right: 0.5rem;\n color: ",";\n "])),o?t.neutral[500]:t.neutral[400])}),S=t.section(O||(O=p(["\n padding: 1rem;\n display: flex;\n flex-direction: column;\n ","\n &:hover "," {\n display: flex;\n }\n ","\n"],["\n padding: 1rem;\n display: flex;\n flex-direction: column;\n ","\n &:hover "," {\n display: flex;\n }\n ","\n"])),D,C,i),F=t.footer(k||(k=p(["\n ","\n ","\n ","\n"],["\n ","\n ","\n ","\n"])),r("body2"),function(n){var r=n.theme.palette,t=n.isDivided;return e(P||(P=p(["\n ","\n "],["\n ","\n "])),t&&e(E||(E=p(["\n padding-top: 0.25rem;\n border-top: 1px solid ",";\n "],["\n padding-top: 0.25rem;\n border-top: 1px solid ",";\n "])),r.divider))},i),B=t.div(j||(j=p(["\n padding: 0.25rem 0;\n ","\n"],["\n padding: 0.25rem 0;\n ","\n"])),i),H=n.forwardRef(function(e,r){var t=e.children,o=e.ele,a=e.href,i=c(e,["children","ele","href"]),d=o?n.cloneElement(o,{},t):t;return n.createElement(S,l({role:"article",ref:r,href:a},i),a?n.createElement("a",{href:a},d):n.createElement(n.Fragment,null,d))});H.defaultProps={accentPosition:"top",isSharp:!1},H.displayName="Card";var I=n.forwardRef(function(e,r){var t=e.children,o=e.ele,a=c(e,["children","ele"]);return n.createElement(B,l({role:"presentation",ref:r},a),o?n.cloneElement(o,{},t):t)});I.displayName="CardBody";var L=n.forwardRef(function(e,r){var t=e.children,o=e.ele,a=c(e,["children","ele"]);return n.createElement(F,l({role:"presentation",ref:r},a),o?n.cloneElement(o,{},t):t)});L.defaultProps={isDivided:!1},L.displayName="CardFooter";var _=n.forwardRef(function(e,r){var t=e.children,o=e.ele,a=e.href,i=c(e,["children","ele","href"]);return n.createElement(N,l({role:"heading",ref:r},i),o?n.cloneElement(o,{},t):t,a&&n.createElement(C,{href:a,target:"_blank"},n.createElement(R,null)))});_.defaultProps={isDivided:!1},_.displayName="CardHeader";export{H as Card,I as CardBody,L as CardFooter,_ as CardHeader};