ocearo-ui
Version:
Ocean Robot UI: Sailing made smarter
1 lines • 4.08 kB
JavaScript
;(self.webpackChunk_N_E=self.webpackChunk_N_E||[]).push([[138],{59138:function(e,t,l){l.r(t);var n=l(57437),s=l(2265),a=l(53082),i=l(33145),o=l(51268),c=l(35217);t.default=()=>{let{nightMode:e}=(0,a.yC)(),[t,l]=(0,s.useState)(null),[r,d]=(0,s.useState)(!1),m=e=>{l(e),d(!1)},x=e=>{window.open(e,"_blank","noopener,noreferrer")};return(0,n.jsx)("div",{className:"bg-rightPaneBg flex flex-col h-full p-6 overflow-auto",children:t?(0,n.jsxs)("div",{className:"flex-1 flex flex-col",children:[(0,n.jsxs)("div",{className:"flex justify-between items-center mb-4 pb-2 border-b border-gray-700",children:[(0,n.jsx)("h2",{className:"text-lg font-semibold ".concat(e?"text-oNight":"text-white"),children:t.name}),(0,n.jsx)("button",{onClick:()=>{l(null),d(!1)},className:"p-2 rounded-full hover:bg-gray-700","aria-label":"Close",children:(0,n.jsx)(o.G,{icon:c.NBC,size:"lg",className:"".concat(e?"text-oNight":"text-white")})})]}),(0,n.jsx)("div",{className:"flex-1 rounded-lg overflow-hidden",children:t.external?(0,n.jsxs)("div",{className:"w-full h-full flex flex-col items-center justify-center bg-oGray2 rounded-lg p-6 shadow-lg",children:[(0,n.jsx)("div",{className:"w-32 h-32 mb-4 relative",children:(0,n.jsx)(i.default,{src:t.icon,alt:t.name,className:"w-full h-full object-contain",width:128,height:128})}),(0,n.jsx)("p",{className:"text-lg font-semibold ".concat(e?"text-oNight":"text-white"),children:t.name}),(0,n.jsx)("p",{className:"text-sm ".concat(e?"text-oNight":"text-white"," opacity-80 mb-4 text-center"),children:"This service will open in a new browser window"}),(0,n.jsxs)("button",{onClick:()=>x(t.url),className:"px-4 py-2 rounded-md flex items-center ".concat(e?"bg-oNight hover:bg-oRed":"bg-oBlue hover:bg-blue-600"," text-white transition-colors"),children:[(0,n.jsxs)("span",{children:["Open ",t.name]}),(0,n.jsx)(o.G,{icon:c.Xjp,className:"ml-2 text-sm"})]})]}):r?(0,n.jsxs)("div",{className:"w-full h-full flex flex-col items-center justify-center bg-oGray2 rounded-lg p-6",children:[(0,n.jsxs)("p",{className:"mb-3 ".concat(e?"text-oNight":"text-white"),children:["Unable to embed ",t.name]}),(0,n.jsxs)("a",{href:t.url,target:"_blank",rel:"noopener noreferrer",className:"underline flex items-center ".concat(e?"text-oNight hover:text-oRed":"text-white hover:text-blue-300"),children:[(0,n.jsx)("span",{children:"Open in new tab"}),(0,n.jsx)(o.G,{icon:c.Xjp,className:"ml-1 text-sm"})]})]}):(0,n.jsx)("iframe",{src:t.url,title:t.name,className:"w-full h-full rounded-lg border-0",allow:"autoplay; encrypted-media",allowFullScreen:!0,loading:"lazy",onError:()=>{d(!0)}})})]}):(0,n.jsxs)(n.Fragment,{children:[(0,n.jsx)("h2",{className:"text-lg font-semibold ".concat(e?"text-oNight":"text-white"," mb-4"),children:"Media Services"}),(0,n.jsx)("div",{className:"grid grid-cols-2 sm:grid-cols-3 gap-6",children:[{name:"Netflix",url:"https://www.netflix.com",icon:"./icons/mediaplayer/netflix.png",external:!0},{name:"YouTube",url:"https://www.youtube.com",icon:"./icons/mediaplayer/youtube.png",external:!0},{name:"Disney+",url:"https://www.disneyplus.com",icon:"./icons/mediaplayer/disneyplus.png",external:!0},{name:"Prime Video",url:"https://www.primevideo.com",icon:"./icons/mediaplayer/amazon.png",external:!0},{name:"Spotify",url:"https://open.spotify.com/embed/playlist/37i9dQZF1DXcBWIGoYBM5M",icon:"./icons/mediaplayer/spotify.png"},{name:"Deezer",url:"https://widget.deezer.com/widget/dark/playlist/1479458365",icon:"./icons/mediaplayer/deezer.png"}].map(t=>(0,n.jsxs)("button",{onClick:()=>m(t),className:"bg-oGray2 p-4 rounded-lg flex flex-col items-center justify-center transition-colors hover:bg-gray-700 shadow-lg",children:[(0,n.jsx)("div",{className:"w-24 h-24 mb-3",children:(0,n.jsx)(i.default,{src:t.icon,alt:t.name,className:"w-full h-full object-contain",width:96,height:96})}),(0,n.jsx)("span",{className:"text-sm font-medium ".concat(e?"text-oNight":"text-white"),children:t.name}),t.external&&(0,n.jsx)(o.G,{icon:c.Xjp,className:"text-sm mt-1 ".concat(e?"text-oNight":"text-white"," opacity-80")})]},t.name))})]})})}}}]);