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