@longears-mobile/rcs-client-mockup
Version:
A React smartphone preview components for RCS client mockups.
3 lines (2 loc) • 14.9 kB
JavaScript
import{jsx as e,jsxs as t}from"react/jsx-runtime";import{Signal as a,Wifi as s,Battery as i,ChevronLeft as n,Phone as l}from"lucide-react";const c=({children:a,title:s="Preview of your agent",actions:i})=>e("div",Object.assign({className:"flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4"},{children:t("div",Object.assign({className:"bg-white rounded-lg border border-gray-200 p-6 w-96"},{children:[e("div",Object.assign({className:"text-center text-lg font-medium mb-2"},{children:s})),i,e("div",Object.assign({className:"flex justify-center"},{children:a}))]}))})),r=({options:t,value:a,onChange:s})=>e("div",Object.assign({className:"flex justify-center border-b border-gray-200 mb-6"},{children:t.map((t=>e("button",Object.assign({onClick:()=>s(t.value),className:"px-4 py-2 text-sm font-medium "+(a===t.value?"text-blue-600 border-b-2 border-blue-600":"text-gray-600 hover:text-gray-800")},{children:t.label}),t.value)))}));var d,o,g,h,m,b,x,p,u;!function(e){e.Small="sm",e.Medium="md",e.Large="lg"}(d||(d={})),function(e){e.Info="info",e.Options="options"}(o||(o={})),function(e){e.Sent="sent",e.Delivered="delivered",e.Read="read"}(g||(g={})),function(e){e.Image="image",e.Video="video",e.Gif="gif"}(h||(h={})),function(e){e.Short="short",e.Medium="medium",e.Tall="tall"}(m||(m={})),function(e){e.Wide="16:9",e.Panoramic="2:1",e.Long="7:3"}(b||(b={})),function(e){e.Vertical="vertical",e.Horizontal="horizontal"}(x||(x={})),function(e){e.Left="left",e.Right="right",e.Top="top"}(p||(p={})),function(e){e.Small="small",e.Medium="medium"}(u||(u={}));const f={sm:{container:"w-58 h-116",notch:"w-18 h-6",camera:"w-1.5 h-1.5",statusBar:"pt-3 px-2 text-xs space-x-12",icons:"14",iconGap:"gap-1.5",homeIndicator:"w-24 h-1",content:"mt-2 h-101"},md:{container:"w-72 h-144",notch:"w-24 h-7",camera:"w-2 h-2",statusBar:"pt-4 px-5 text-xs space-x-20",icons:"16",iconGap:"gap-1",homeIndicator:"w-32 h-1",content:"mt-4 h-125"},lg:{container:"w-96 h-192",notch:"w-32 h-8",camera:"w-2.5 h-2.5",statusBar:"pt-4 px-4 text-sm space-x-26",icons:"18",iconGap:"gap-2",homeIndicator:"w-40 h-1",content:"mt-6 h-172"}},v=({children:n,time:l="12:33",size:c=d.Medium})=>{const r=f[c];return t("div",Object.assign({className:`relative ${r.container} bg-white rounded-3xl shadow-xl overflow-hidden border-8 border-gray-700`},{children:[e("div",Object.assign({className:`absolute top-2 left-1/2 transform -translate-x-1/2 ${r.notch} bg-gray-700 rounded-full flex items-center justify-center`},{children:e("div",{className:`absolute right-2 ${r.camera} rounded-full bg-gray-800`})})),t("div",Object.assign({className:`relative ${r.statusBar} flex justify-between items-center`},{children:[e("span",Object.assign({className:"text-black font-medium"},{children:l})),t("div",Object.assign({className:`flex items-center ${r.iconGap}`},{children:[e(a,{size:parseInt(r.icons)}),e(s,{size:parseInt(r.icons)}),e(i,{size:parseInt(r.icons)})]}))]})),e("div",Object.assign({className:r.content},{children:n})),e("div",{className:`absolute bottom-1 left-1/2 transform -translate-x-1/2 ${r.homeIndicator} bg-gray-700 rounded-full`})]}))},j={sm:{header:{padding:"px-1 py-1.5",iconSize:"w-4 h-4",fontSize:"text-sm"},logo:{size:"w-12 h-12",bottom:"-22px"},content:{titlePadding:"px-4 pt-8 pb-3",titleSize:"text-sm",descSize:"text-xs",buttonPadding:"px-4 py-1.5",buttonIconSize:"w-4 h-4",contentPadding:"px-3 py-1.5",tabPadding:"py-2",iconSize:"w-4 h-4"}},md:{header:{padding:"px-1 py-2",iconSize:"w-5 h-5",fontSize:"text-base"},logo:{size:"w-16 h-16",bottom:"-28px"},content:{titlePadding:"px-6 pt-12 pb-4",titleSize:"text-base",descSize:"text-sm",buttonPadding:"px-6 py-2",buttonIconSize:"w-5 h-5",contentPadding:"px-4 py-2",tabPadding:"py-3",iconSize:"w-5 h-5"}},lg:{header:{padding:"px-2 py-3",iconSize:"w-6 h-6",fontSize:"text-lg"},logo:{size:"w-20 h-20",bottom:"-36px"},content:{titlePadding:"px-8 pt-16 pb-6",titleSize:"text-lg",descSize:"text-base",buttonPadding:"px-8 py-3",buttonIconSize:"w-6 h-6",contentPadding:"px-6 py-3",tabPadding:"py-4",iconSize:"w-6 h-6"}}},N=({heroImage:a,logoImage:s,title:i,description:c,phoneNumber:r,phoneLabel:g,callButtonLabel:h="Call",activeTab:m=o.Info,onBackClick:b,onTabChange:x,size:p=d.Medium,accentColor:u="#2563eb"})=>{const f=j[p];return t("div",Object.assign({className:"flex flex-col h-full bg-white"},{children:[t("div",Object.assign({className:`flex items-center ${f.header.padding}`},{children:[e("button",Object.assign({onClick:b,className:"p-1 hover:bg-gray-100 rounded-full"},{children:e(n,{className:`${f.header.iconSize} text-gray-600`})})),e("span",Object.assign({className:`ml-4 ${f.header.fontSize} text-gray-700`},{children:"Info & options"}))]})),t("div",Object.assign({className:"relative"},{children:[e("div",Object.assign({className:"w-full aspect-[1440/448] bg-gray-100 overflow-hidden"},{children:a&&e("img",{src:a,alt:"Cover",width:1440,height:448,className:"w-full h-full object-cover"})})),e("div",Object.assign({className:"absolute left-1/2 transform -translate-x-1/2",style:{bottom:f.logo.bottom}},{children:e("div",Object.assign({className:`${f.logo.size} rounded-full bg-white border-2 border-white shadow-lg flex items-center justify-center overflow-hidden`},{children:e("img",{src:s,alt:"Logo",width:1440,height:448,className:"w-full h-full object-contain"})}))}))]})),t("div",Object.assign({className:`flex flex-col items-center ${f.content.titlePadding}`},{children:[e("span",Object.assign({className:`${f.content.titleSize} text-gray-800`},{children:i})),e("span",Object.assign({className:`${f.content.descSize} text-gray-500`},{children:c}))]})),e("div",Object.assign({className:`flex justify-center ${f.content.buttonPadding}`},{children:t("button",Object.assign({className:"flex items-center justify-center w-full py-2 rounded-lg hover:bg-opacity-10",style:{color:u,backgroundColor:`${u}10`}},{children:[e(l,{className:`${f.content.buttonIconSize} mr-2`}),e("span",{children:h})]}))})),t("div",Object.assign({className:"flex border-b border-gray-200 mt-2"},{children:[e("button",Object.assign({onClick:()=>null==x?void 0:x(o.Info),className:`flex-1 ${f.content.tabPadding} ${f.content.descSize} font-medium ${"info"===m?"border-b-2 text-gray-600":"text-gray-600"}`,style:"info"===m?{color:u,borderColor:u}:{}},{children:"Info"})),e("button",Object.assign({onClick:()=>null==x?void 0:x(o.Options),className:`flex-1 ${f.content.tabPadding} ${f.content.descSize} font-medium ${"options"===m?"border-b-2 text-gray-600":"text-gray-600"}`,style:"options"===m?{color:u,borderColor:u}:{}},{children:"Options"}))]})),e("div",Object.assign({className:`flex-1 ${f.content.contentPadding}`},{children:t("div","info"===m?Object.assign({className:"flex items-center py-2 border-b border-gray-200 w-full"},{children:[e(l,{className:`${f.content.iconSize} text-gray-600 mr-3`}),t("div",Object.assign({className:"flex flex-col"},{children:[e("span",Object.assign({className:`${f.content.descSize} text-gray-900`},{children:r})),e("span",Object.assign({className:"text-xs text-gray-500"},{children:g}))]}))]}):Object.assign({className:"space-y-2"},{children:[e("div",Object.assign({className:"py-2 border-b border-gray-200 w-full"},{children:e("span",Object.assign({className:`${f.content.descSize} text-gray-900`},{children:"Notifications"}))})),t("div",Object.assign({className:"pb-2 border-b border-gray-200 w-full"},{children:[e("span",Object.assign({className:`${f.content.descSize} text-gray-900`},{children:"App settings"})),e("div",Object.assign({className:"text-xs text-gray-500 uppercase mt-1"},{children:"Business"}))]}))]}))}))]}))},y={sm:{header:{padding:"p-1.5",avatar:"w-7 h-7",title:"text-[10px]",chevron:"w-6 h-6"},content:{padding:"px-2 py-1"},input:{padding:"p-1.5",height:"h-8"}},md:{header:{padding:"p-2",avatar:"w-6 h-6",title:"text-[11px]",chevron:"w-4 h-4"},content:{padding:"px-3 py-2"},input:{padding:"p-2",height:"h-10"}},lg:{header:{padding:"p-3",avatar:"w-8 h-8",title:"text-xs",chevron:"w-5 h-5"},content:{padding:"px-4 py-3"},input:{padding:"p-3",height:"h-12"}}},w=({children:a,logoImage:s,title:i,onBackClick:l,size:c=d.Medium})=>{const r=y[c];return t("div",Object.assign({className:"flex flex-col h-full bg-white"},{children:[t("div",Object.assign({className:`flex items-start border-b border-gray-200 ${r.header.padding}`},{children:[e("button",Object.assign({onClick:l,className:"hover:bg-gray-100 rounded-full mt-0.5"},{children:e(n,{className:`${r.header.chevron} text-blue-500`})})),t("div",Object.assign({className:"flex-1 flex flex-col items-center"},{children:[e("div",Object.assign({className:`${r.header.avatar} rounded-full overflow-hidden`},{children:e("img",{src:s,alt:i,className:"w-full h-full object-cover"})})),e("div",Object.assign({className:"mt-1"},{children:e("div",Object.assign({className:`${r.header.title}`},{children:i}))}))]})),e("div",Object.assign({className:`${r.header.chevron} invisible`},{children:e(n,{})}))]})),t("div",Object.assign({className:`flex-1 overflow-y-auto bg-gray-100 ${r.content.padding}`},{children:[t("div",Object.assign({className:"text-center mb-4"},{children:[e("div",Object.assign({className:"text-[8px] h-3 text-gray-500"},{children:"Text Message • RCS"})),e("div",Object.assign({className:"text-[8px] h-3 text-gray-500"},{children:"Today 9:38 AM"}))]})),e("div",Object.assign({className:"w-full "},{children:a}))]})),e("div",Object.assign({className:`border-t border-gray-200 ${r.input.padding}`},{children:t("div",Object.assign({className:"flex items-center"},{children:[e("button",Object.assign({className:"p-1 rounded-full hover:bg-gray-200"},{children:e("svg",Object.assign({className:"w-4 h-4 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},{children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M12 6v6m0 0v6m0-6h6m-6 0H6"})}))})),e("div",Object.assign({className:"flex-1 mx-2"},{children:e("div",Object.assign({className:"bg-white border border-gray-300 rounded-full px-3 py-1 text-[11px] text-gray-400"},{children:"Text Message"}))})),e("button",Object.assign({className:"p-1"},{children:e("svg",Object.assign({className:"w-4 h-4 text-gray-500",fill:"none",stroke:"currentColor",viewBox:"0 0 24 24"},{children:e("path",{strokeLinecap:"round",strokeLinejoin:"round",strokeWidth:2,d:"M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m4 0h4m-4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z"})}))}))]}))}))]}))},O=({children:a,timestamp:s,status:i})=>t("div",Object.assign({className:"flex flex-col items-end"},{children:[e("div",Object.assign({className:"max-w-[70%] bg-green-500 rounded-2xl rounded-tr-sm px-3 py-1.5"},{children:e("div",Object.assign({className:"text-xs text-white"},{children:a}))})),t("div",Object.assign({className:"flex items-center mt-0.5 space-x-1"},{children:["read"===i&&e("div",Object.assign({className:"text-[10px] text-gray-500"},{children:"Read"})),s&&e("div",Object.assign({className:"text-[10px] text-gray-500"},{children:s}))]}))]})),z={short:"h-16",medium:"h-28",tall:"h-36"},$={short:"h-24",medium:"h-38",tall:"h-48"},S=({title:a,description:s,media:i,layout:n="vertical",mediaPosition:l="top",suggestions:c=[]})=>{"vertical"===n&&(l="top");const r=i?"vertical"===n?z[i.height||"medium"]:$[i.height||"medium"]:"",d=i&&i.url;return d||a||s?t("div","horizontal"===n?Object.assign({className:"flex rounded-lg overflow-hidden bg-white shadow-sm border border-gray-200 max-w-sm"},{children:[d&&"left"===l&&e("div",Object.assign({className:`w-22 flex-shrink-0 bg-gray-100 overflow-hidden ${r}`},{children:"video"===i.type?e("video",{src:i.url,className:"w-full h-full object-cover",controls:!0}):e("img",{src:i.url,alt:a||"Rich card media",className:"w-full h-full object-cover"})})),t("div",Object.assign({className:"flex-1 p-2 flex flex-col"},{children:[a&&e("div",Object.assign({className:"font-medium text-gray-900 mb-1 text-[10px] leading-3"},{children:a})),s&&e("div",Object.assign({className:"text-gray-600 text-[9px] leading-3"},{children:s})),c.length>0&&e("div",Object.assign({className:"mt-2"},{children:c.slice(0,4).map(((a,s)=>t("button",Object.assign({className:"w-full px-3 border-b last:border-b-0 border-gray-100 pt-1 text-blue-600 hover:bg-blue-50 text-[0.65rem]"},{children:[a.icon&&e("div",Object.assign({className:"mr-2"},{children:a.icon})),a.text]}),s)))}))]})),d&&"right"===l&&e("div",Object.assign({className:"w-32 flex-shrink-0 bg-gray-100 overflow-hidden"},{children:"video"===i.type?e("video",{src:i.url,className:"w-full h-full object-cover",controls:!0}):e("img",{src:i.url,alt:a||"Rich card media",className:"w-full h-full object-cover"})}))]}):Object.assign({className:"rounded-lg overflow-hidden bg-white shadow-sm border border-gray-200 max-w-sm"},{children:[d&&e("div",Object.assign({className:`w-full ${r} bg-gray-100 overflow-hidden`},{children:"video"===i.type?e("video",{src:i.url,className:"w-full h-full object-cover",controls:!0}):e("img",{src:i.url,alt:a||"Rich card media",className:"w-full h-full object-cover"})})),t("div",Object.assign({className:"p-2"},{children:[a&&e("div",Object.assign({className:"font-medium text-gray-900 mb-1 text-[10px] leading-3"},{children:a})),s&&e("div",Object.assign({className:"text-gray-600 text-[9px] leading-3 mb-1"},{children:s})),c.length>0&&e("div",Object.assign({className:"mt-2"},{children:c.slice(0,4).map(((a,s)=>t("button",Object.assign({className:"w-full px-3 border-b last:border-b-0 border-gray-100 pt-0.5 text-blue-600 hover:bg-blue-50 text-[0.65rem]"},{children:[a.icon&&e("div",Object.assign({className:"mr-2"},{children:a.icon})),a.text]}),s)))}))]}))]})):null},k=({cards:t=[],width:a="medium"})=>{if(!t.length)return null;const s="small"===a?"w-32":"w-60";return e("div",Object.assign({className:"overflow-hidden"},{children:e("div",Object.assign({className:"flex space-x-2 overflow-x-auto pb-2 scrollbar-hide"},{children:t.map(((t,a)=>e("div",Object.assign({className:`flex-shrink-0 ${s} snap-start`},{children:e(S,Object.assign({},t,{layout:x.Vertical,mediaPosition:p.Top}))}),a)))}))}))},P=({replies:a})=>a.length?e("div",Object.assign({className:"flex flex-row space-x-1 pt-3 overflow-x-auto no-scrollbar"},{children:a.map(((a,s)=>t("button",Object.assign({onClick:a.onClick,className:"flex items-center px-4 py-2 rounded-full border border-gray-200 \n bg-white text-gray-700 hover:bg-gray-50 text-xs whitespace-nowrap"},{children:[a.icon&&e("span",Object.assign({className:"mr-2 flex items-center"},{children:a.icon})),e("span",{children:a.text.length>25?a.text.substring(0,25):a.text})]}),`${a.text}-${s}`)))})):null;export{b as AspectRatios,m as CardTypes,N as InfoScreen,x as Layouts,p as MediaPositions,h as MediaTypes,O as MessageBubble,w as MessageScreen,r as PreviewToggle,c as PreviewWrapper,P as ReplyChip,S as RichCard,k as RichCardCarousel,d as Sizes,v as Smartphone,g as Statuses,o as Tabs,u as Widths};
//# sourceMappingURL=index.esm.js.map