diff --git a/src/screens/Information/View.js b/src/screens/Information/View.js index a96867f..f39c8fb 100644 --- a/src/screens/Information/View.js +++ b/src/screens/Information/View.js @@ -9,34 +9,41 @@ import { } from '@mui/material'; import { createArrayFrom1ToN } from '../../utils/createArrayFrom1ToN'; +import styles from './styles'; + function View({ faq, layoutType }) { + const { + stackContainer, + skeletonTitle, + skeletonQuestion, + skeletonStack, + accordionSkeletonStack, + title, + accordionSummary, + } = styles[layoutType]; + if (layoutType === 'desktop') { return ( - + {faq === null ? ( - - + + {createArrayFrom1ToN(6).map(i => ( ))} ) : faq.length !== 0 ? ( - -

Perguntas Frequentes

+ +

Perguntas Frequentes

{faq.map((f, index) => ( } aria-controls="panel1a-content" id="panel1a-header" @@ -56,34 +63,26 @@ function View({ faq, layoutType }) { ); } else if (layoutType === 'mobile') { return ( - + {faq === null ? ( - - + + {createArrayFrom1ToN(6).map(i => ( ))} ) : faq.length !== 0 ? ( - -

Perguntas Frequentes

+ +

Perguntas Frequentes

{faq.map((f, index) => ( } aria-controls="panel1a-content" id="panel1a-header" diff --git a/src/screens/Information/styles.js b/src/screens/Information/styles.js new file mode 100644 index 0000000..67cd627 --- /dev/null +++ b/src/screens/Information/styles.js @@ -0,0 +1,112 @@ +// ========== Desktop ========== +const desktopStackContainer = { + paddingTop: '80px', +}; + +const desktopSkeletonTitle = { + variant: 'rectangular', + width: 500, + height: 50, + sx: { + marginBottom: '20px', + }, +}; + +const desktopSkeletonQuestion = { + width: innerWidth => innerWidth * 0.6, + height: 50, +}; + +const desktopSkeletonStack = { + width: '70%', + alignItems: 'center', + gap: '10px', +}; + +const desktopAccordionSkeletonStack = { + width: '70%', + alignItems: 'center', + gap: '10px', +}; + +const desktopTitle = { + textAlign: 'center', +}; + +const desktopAccordionSummary = { + backgroundColor: '#f7f7f7', +}; + +const desktop = { + stackContainer: desktopStackContainer, + skeletonTitle: desktopSkeletonTitle, + skeletonQuestion: desktopSkeletonQuestion, + skeletonStack: desktopSkeletonStack, + accordionSkeletonStack: desktopAccordionSkeletonStack, + title: desktopTitle, + accordionSummary: desktopAccordionSummary, +}; + +// ========== Mobile ========== +const mobileStackContainer = { + paddingTop: '30px', + paddingBottom: '100px', +}; + +const mobileSkeletonTitle = { + variant: 'rectangular', + width: 200, + height: 50, + sx: { + marginBottom: '20px', + }, +}; + +const mobileSkeletonQuestion = { + width: innerWidth => innerWidth * 0.9, + height: 80, +}; + +const mobileSkeletonStack = { + width: '70%', + alignItems: 'center', + gap: '10px', +}; + +const mobileAccordionSkeletonStack = { + width: '90%', + alignItems: 'center', + gap: '10px', +}; + +const mobileTitle = { + textAlign: 'center', +}; + +const mobileAccordionSummary = { + backgroundColor: '#f7f7f7', +}; + +const mobile = { + stackContainer: mobileStackContainer, + skeletonTitle: mobileSkeletonTitle, + skeletonQuestion: mobileSkeletonQuestion, + skeletonStack: mobileSkeletonStack, + accordionSkeletonStack: mobileAccordionSkeletonStack, + title: mobileTitle, + accordionSummary: mobileAccordionSummary, +}; + +// ========== Unset ========== +const unset = { + stackContainer: null, + skeletonTitle: null, + skeletonQuestion: null, + skeletonStack: null, + accordionSkeletonStack: null, + title: null, + accordionSummary: null, +}; + +const styles = { desktop, mobile, unset }; +export default styles;