carbon-react
Version:
A library of reusable React components for easily building user interfaces.
2 lines (1 loc) • 1.22 kB
JavaScript
import{jsxs as o,jsx as e}from"react/jsx-runtime";import"react";import r from"styled-components";const t=r.div.withConfig({displayName:"placeholder.component__StyledPlaceHolder",componentId:"sc-9e7fe579-0"})(["overflow:hidden;position:relative;height:152px;min-width:152px;background-color:var(--colorsUtilityMajor025);border-bottom-left-radius:var(--borderRadius100);border-top-left-radius:var(--borderRadius100);"]),i=r.div.withConfig({displayName:"placeholder.component__Circle",componentId:"sc-9e7fe579-1"})(["height:22px;width:22px;border-radius:50%;background-color:var(--colorsUtilityMajor100);position:absolute;left:22px;top:30px;"]),l=r.div.withConfig({displayName:"placeholder.component__Square",componentId:"sc-9e7fe579-2"})(["height:200px;width:200px;transform:rotate(45deg);background-color:",";position:absolute;border-radius:2%;top:",";left:",";"],(({color:o})=>o),(({top:o})=>o),(({left:o})=>o)),a=()=>o(t,{"data-component":"link preview image placeholder","data-role":"link preview image placeholder",children:[e(i,{}),e(l,{color:"var(--colorsUtilityMajor050)",top:"120px",left:"-64px"}),e(l,{color:"var(--colorsUtilityMajor150)",top:"96px",left:"16px"})]});export{t as StyledPlaceHolder,a as default};