@nitrogenbuilder/core/src/__components/ResponsiveWidget/ResponsiveWidget.js

CMS Agnostic Page Builder for React projects

import{jsx as _jsx,jsxs as _jsxs}from"react/jsx-runtime";import{useState}from"react";import"./ResponsiveWidget.scss";export default function ResponsiveWidget({responsiveMode:e,setResponsiveMode:t,expanded:a=!1,expandDirection:n="right",backgroundClass:i="default-bg"}){const[p,d]=useState(a),s=a||p;return _jsx("div",{className:"responsive-widget "+(s?"responsive-widget--expanded":""),onClick:()=>d(!p),children:_jsxs("div",{className:`responsive-widget__container ${i} ${s?""+("up"===n?"responsive-widget__container--expanded-up":"responsive-widget__container--expanded-right"):""+("up"===n?"responsive-widget__container--not-expanded-up":"responsive-widget__container--not-expanded-right")}`,children:[_jsx("div",{className:`desktop-btn ${"desktop"===e?"desktop-btn--active "+(s?"":""+("up"===n?"desktop-btn--active--not-expanded-up":"desktop-btn--active--not-expanded-right")):""} ${s?"desktop-btn--visible":"desktop-btn--hidden"} ${"up"===n?"desktop-btn--expanded-up":"desktop-btn--expanded-right"}`,onClick:()=>t("desktop"),children:_jsx("i",{className:"fa-regular fa-display"})}),_jsx("div",{className:`laptop-btn ${"laptop"===e?"laptop-btn--active "+(s?"":""+("up"===n?"laptop-btn--active--not-expanded-up":"laptop-btn--active--not-expanded-right")):""} ${s?"laptop-btn--visible":"laptop-btn--hidden"} ${"up"===n?"laptop-btn--expanded-up":"laptop-btn--expanded-right"}`,onClick:()=>t("laptop"),children:_jsx("i",{className:"fa-regular fa-laptop"})}),_jsx("div",{className:`tablet-btn ${"tablet"===e?"tablet-btn--active "+(s?"":""+("up"===n?"tablet-btn--active--not-expanded-up":"tablet-btn--active--not-expanded-right")):""} ${s?"tablet-btn--visible":"tablet-btn--hidden"} ${"up"===n?"tablet-btn--expanded-up":"tablet-btn--expanded-right"}`,onClick:()=>t("tablet"),children:_jsx("i",{className:"fa-regular fa-tablet"})}),_jsx("div",{className:`mobile-landscape-btn ${"mobileLandscape"===e?"mobile-landscape-btn--active "+(s?"":""+("up"===n?"mobile-landscape-btn--active--not-expanded-up":"mobile-landscape-btn--active--not-expanded-right")):""} ${s?"mobile-landscape-btn--visible":"mobile-landscape-btn--hidden"} ${"up"===n?"mobile-landscape-btn--expanded-up":"mobile-landscape-btn--expanded-right"}`,onClick:()=>t("mobileLandscape"),children:_jsx("i",{className:"fa-regular fa-mobile -rotate-90"})}),_jsx("div",{className:`mobile-portrait-btn ${"mobile"===e?"mobile-portrait-btn--active  "+(s?"":""+("up"===n?"mobile-portrait-btn--active--not-expanded-up":"mobile-portrait-btn--active--not-expanded-right")):""} ${s?"mobile-portrait-btn--visible":"mobile-portrait-btn--hidden"} ${"up"===n?"mobile-portrait-btn--expanded-up":"mobile-portrait-btn--expanded-right"}`,onClick:()=>t("mobile"),children:_jsx("i",{className:"fa-regular fa-mobile"})})]})})}