@bothub-chat/ui/dist/components/theme-preview/index.js

Bothub UI Components

import{jsxs as t,Fragment as e,jsx as i}from"react/jsx-runtime";import{ThemePreviewScreenVersion as h}from"./styled.js";const r=({colors:r})=>t(e,{children:[i(h,{$screen:"desktop",children:t("svg",{width:"750px",height:"450px",viewBox:"0 0 750 450",fill:"none",children:[i("rect",{x:"0.5",y:"0.5",width:"749",height:"449",rx:"19.5",fill:r.bg}),i("rect",{x:"0.5",y:"0.5",width:"749",height:"449",rx:"19.5",stroke:r.border}),i("rect",{x:"12",y:"12",width:"180",height:"426",rx:"10",fill:r.interface.bg}),i("rect",{x:"24",y:"24",width:"18",height:"10",rx:"4",fill:r.accent}),i("rect",{x:"170",y:"24",width:"10",height:"10",rx:"2",fill:r.accent}),i("rect",{x:"24.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",fill:r.accent}),i("rect",{x:"24.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",stroke:r.border,strokeWidth:"0.5"}),i("rect",{x:"40.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",fill:r.border}),i("rect",{x:"40.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",stroke:r.border,strokeWidth:"0.5"}),i("rect",{x:"56.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",stroke:r.border,strokeWidth:"0.5"}),i("path",{d:"M24 64H180",stroke:r.border,strokeLinecap:"round"}),i("rect",{x:"24",y:"74",width:"156",height:"10",rx:"2",fill:r.icons}),i("rect",{x:"24",y:"94",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"114",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"134",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"154",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"174",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"194",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"214",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"410",width:"156",height:"16",rx:"2",fill:r.accent}),i("rect",{x:"204",y:"12",width:"534",height:"426",rx:"10",fill:r.interface.bg}),i("rect",{x:"417",y:"28",width:"108",height:"16",rx:"4",fill:"#222B44"}),i("rect",{x:"421",y:"32",width:"100",height:"8",rx:"2",fill:r.border}),i("path",{d:"M490 88C490 82.4772 494.477 78 500 78H712C717.523 78 722 82.4772 722 88V114H500C494.477 114 490 109.523 490 104V88Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"506.5",y:"91.5",width:"199",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"506.5",y:"91.5",width:"199",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"228.5",y:"133.5",width:"199",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"133.5",width:"199",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"228.5",y:"153.5",width:"159",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"153.5",width:"159",height:"9",rx:"1.5",stroke:r.assistant.text}),i("path",{d:"M490 192C490 186.477 494.477 182 500 182H712C717.523 182 722 186.477 722 192V218H500C494.477 218 490 213.523 490 208V192Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"506.5",y:"195.5",width:"199",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"506.5",y:"195.5",width:"199",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"228.5",y:"237.5",width:"199",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"237.5",width:"199",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"228.5",y:"257.5",width:"159",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"257.5",width:"159",height:"9",rx:"1.5",stroke:r.assistant.text}),i("path",{d:"M490 296C490 290.477 494.477 286 500 286H712C717.523 286 722 290.477 722 296V322H500C494.477 322 490 317.523 490 312V296Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"506.5",y:"299.5",width:"199",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"506.5",y:"299.5",width:"199",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"228.5",y:"341.5",width:"199",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"341.5",width:"199",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"228.5",y:"361.5",width:"159",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"361.5",width:"159",height:"9",rx:"1.5",stroke:r.assistant.text})]})}),i(h,{$screen:"tablet",children:t("svg",{width:"762px",height:"400px",viewBox:"0 0 762 400",fill:"none",children:[i("rect",{x:"0.5",y:"0.5",width:"761",height:"399",rx:"19.5",fill:r.bg}),i("rect",{x:"0.5",y:"0.5",width:"761",height:"399",rx:"19.5",stroke:r.border}),i("rect",{x:"12",y:"12",width:"180",height:"376",rx:"10",fill:r.interface.bg}),i("rect",{x:"24",y:"24",width:"18",height:"10",rx:"4",fill:r.accent}),i("rect",{x:"170",y:"24",width:"10",height:"10",rx:"2",fill:r.accent}),i("rect",{x:"24.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",fill:r.accent}),i("rect",{x:"24.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",stroke:r.border,strokeWidth:"0.5"}),i("rect",{x:"40.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",fill:"#222B44"}),i("rect",{x:"40.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",stroke:r.border,strokeWidth:"0.5"}),i("rect",{x:"56.25",y:"44.25",width:"9.5",height:"9.5",rx:"1.75",stroke:r.border,strokeWidth:"0.5"}),i("path",{d:"M24 64H180",stroke:r.border,strokeLinecap:"round"}),i("rect",{x:"24",y:"74",width:"156",height:"10",rx:"2",fill:r.icons}),i("rect",{x:"24",y:"94",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"114",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"134",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"154",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"174",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"194",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"214",width:"156",height:"10",rx:"2",fill:r.icons,fillOpacity:"0.5"}),i("rect",{x:"24",y:"360",width:"156",height:"16",rx:"2",fill:r.accent}),i("rect",{x:"204",y:"12",width:"546",height:"376",rx:"10",fill:r.interface.bg}),i("rect",{x:"423",y:"28",width:"108",height:"16",rx:"4",fill:"#222B44"}),i("rect",{x:"427",y:"32",width:"100",height:"8",rx:"2",fill:r.border}),i("path",{d:"M502 88C502 82.4772 506.477 78 512 78H724C729.523 78 734 82.4772 734 88V114H512C506.477 114 502 109.523 502 104V88Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"518.5",y:"91.5",width:"199",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"518.5",y:"91.5",width:"199",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"228.5",y:"133.5",width:"199",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"133.5",width:"199",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"228.5",y:"153.5",width:"159",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"153.5",width:"159",height:"9",rx:"1.5",stroke:r.assistant.text}),i("path",{d:"M502 192C502 186.477 506.477 182 512 182H724C729.523 182 734 186.477 734 192V218H512C506.477 218 502 213.523 502 208V192Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"518.5",y:"195.5",width:"199",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"518.5",y:"195.5",width:"199",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"228.5",y:"237.5",width:"199",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"237.5",width:"199",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"228.5",y:"257.5",width:"159",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"228.5",y:"257.5",width:"159",height:"9",rx:"1.5",stroke:r.assistant.text}),i("path",{d:"M502 296C502 290.477 506.477 286 512 286H724C729.523 286 734 290.477 734 296V322H512C506.477 322 502 317.523 502 312V296Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"518.5",y:"299.5",width:"199",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"518.5",y:"299.5",width:"199",height:"9",rx:"1.5",stroke:r.message.text})]})}),i(h,{$screen:"mobile",children:t("svg",{width:"343px",height:"400px",viewBox:"0 0 343 400",fill:"none",children:[i("rect",{x:"0.5",y:"0.5",width:"342",height:"399",rx:"19.5",fill:r.bg}),i("rect",{x:"0.5",y:"0.5",width:"342",height:"399",rx:"19.5",stroke:r.border}),i("rect",{x:"12",y:"12",width:"319",height:"376",rx:"10",fill:r.interface.bg}),i("rect",{x:"117.5",y:"28",width:"108",height:"16",rx:"4",fill:"#222B44"}),i("rect",{x:"121.5",y:"32",width:"100",height:"8",rx:"2",fill:r.border}),i("path",{d:"M183 88C183 82.4772 187.477 78 193 78H305C310.523 78 315 82.4772 315 88V114H193C187.477 114 183 109.523 183 104V88Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"199.5",y:"91.5",width:"99",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"199.5",y:"91.5",width:"99",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"36.5",y:"133.5",width:"138",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"36.5",y:"133.5",width:"138",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"36.5",y:"153.5",width:"110",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"36.5",y:"153.5",width:"110",height:"9",rx:"1.5",stroke:r.assistant.text}),i("path",{d:"M183 192C183 186.477 187.477 182 193 182H305C310.523 182 315 186.477 315 192V218H193C187.477 218 183 213.523 183 208V192Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"199.5",y:"195.5",width:"99",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"199.5",y:"195.5",width:"99",height:"9",rx:"1.5",stroke:r.message.text}),i("rect",{x:"36.5",y:"237.5",width:"138",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"36.5",y:"237.5",width:"138",height:"9",rx:"1.5",stroke:r.assistant.text}),i("rect",{x:"36.5",y:"257.5",width:"110",height:"9",rx:"1.5",fill:r.assistant.text}),i("rect",{x:"36.5",y:"257.5",width:"110",height:"9",rx:"1.5",stroke:r.assistant.text}),i("path",{d:"M183 296C183 290.477 187.477 286 193 286H305C310.523 286 315 290.477 315 296V322H193C187.477 322 183 317.523 183 312V296Z",fill:r.message.bg,fillOpacity:"0.5"}),i("rect",{x:"199.5",y:"299.5",width:"99",height:"9",rx:"1.5",fill:r.message.text}),i("rect",{x:"199.5",y:"299.5",width:"99",height:"9",rx:"1.5",stroke:r.message.text})]})})]});export{r as ThemePreview};