@deep-foundation/deepcase
Version:
[](https://gitpod.io/#https://github.com/deep-foundation/deepcase) [](https://discord.gg/deep-
209 lines • 8.49 kB
JavaScript
import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
import { Box, Circle, Text, useColorMode } from '@chakra-ui/react';
import { AnimatePresence, motion, useAnimation } from 'framer-motion';
import React, { useEffect } from 'react';
import { Install } from "./icons/install";
import { Uninstall } from './icons/uninstall';
const tabInstall = {
active: {
background: '#0080ff',
transition: {
type: "tween",
duration: 0.4
}
},
inactive: {
background: '#eeeeee',
borderColor: '#718096',
borderWidth: 'thin',
transition: {
type: "tween",
duration: 0.4
}
},
inactiveDark: {
background: '#19202B',
borderColor: '#718096',
borderWidth: 'thin',
transition: {
type: "tween",
duration: 0.4
}
},
initial: {
originX: 0,
},
};
const tabUninstalled = {
active: {
background: '#0080ff',
transition: {
type: "tween",
duration: 0.4
}
},
inactive: {
background: '#eeeeee',
borderColor: '#a0aec0',
borderWidth: 'thin',
transition: {
type: "tween",
duration: 0.4
}
},
inactiveDark: {
background: '#19202B',
borderColor: '#718096',
borderWidth: 'thin',
transition: {
type: "tween",
duration: 0.4
}
},
initial: {
borderRadius: '5rem',
borderColor: '#a0aec0',
borderWidth: 'thin',
originX: 0,
}
};
const textUninstalled = {
show: {
color: '#fff',
transition: {
type: "tween",
duration: 0.4,
}
},
hide: {
color: '#3a3a3a',
transition: {
type: "tween",
duration: 0.4
}
},
initial: {
originX: 0,
color: '#fff',
}
};
const textInstall = {
show: {
color: '#fff',
transition: {
type: "tween",
duration: 0.4
}
},
hide: {
color: '#3a3a3a',
transition: {
type: "tween",
duration: 0.4
}
},
initial: {
originX: 0,
color: '#3a3a3a',
}
};
const QuantityPackages = React.memo(({ quantity, borderColor }) => {
return (_jsx(Circle, { size: '1.2rem', sx: {
w: 'max-content', minW: '1.2rem', p: '0 0.25rem',
border: `1px solid ${borderColor}`
}, children: _jsx(Text, { fontSize: 'xs', fontWeight: 'bold', color: borderColor, children: quantity }) }));
});
export const TabsPackages = React.memo(({ selectedTab = 0, onSelectMode, quantityInstall = 0, quantityUninstalled = 0, }) => {
const controlTabInstall = useAnimation();
const controlTabUninstalled = useAnimation();
const controlTextInstall = useAnimation();
const controlTextUninstalled = useAnimation();
const { colorMode } = useColorMode();
useEffect(() => {
if (selectedTab === 0 && colorMode === 'light') {
controlTabInstall.start("active");
controlTabUninstalled.start("inactive");
controlTextInstall.start("show");
controlTextUninstalled.start("hide");
}
else if (selectedTab === 0 && colorMode === 'dark') {
controlTabInstall.start("active");
controlTabUninstalled.start("inactiveDark");
controlTextUninstalled.start("show");
}
else if (selectedTab === 1 && colorMode === 'light') {
controlTabUninstalled.start("active");
controlTabInstall.start("inactive");
controlTextInstall.start("hide");
controlTextUninstalled.start("show");
}
else {
controlTabInstall.start("inactiveDark");
controlTabUninstalled.start("active");
controlTextInstall.start("show");
controlTextUninstalled.start("show");
}
}, [controlTabInstall, controlTabUninstalled, controlTextInstall, controlTextUninstalled, selectedTab, colorMode]);
return (_jsxs(Box, { as: motion.div, width: '100%', display: 'flex', justifyContent: 'space-between', pl: 2, pr: 2, pb: 2, sx: {
'& > *:nth-of-type(1)': {
mr: 1
}
}, children: [_jsx(AnimatePresence, { children: _jsxs(Box, { as: motion.div, role: 'button', animate: controlTabInstall, initial: 'initial', exit: 'initial', variants: tabInstall, onClick: onSelectMode, sx: {
display: 'flex',
alignItems: 'center',
justifyContent: 'space-between',
borderRadius: '5rem',
w: '100%',
p: 2,
'& > *:nth-of-type(1)': {
mr: 1
}
}, children: [_jsxs(Box, { sx: {
display: 'flex',
alignItems: 'center',
'& > *:nth-of-type(1)': {
mr: 1
}
}, children: [_jsx(Install, { stroke: (selectedTab === 0 && colorMode === 'dark')
? '#ffffff'
: (selectedTab === 0 && colorMode === 'light')
? '#ffffff'
: (colorMode === 'dark')
? '#ffffff'
: '#3a3a3a' }), _jsx(Text, { as: motion.div, color: 'whiteAlpha.800', animate: controlTextInstall, variants: textInstall, initial: 'initial', sx: { lineHeight: 1 }, children: "Installed" })] }), _jsx(Box, { children: _jsx(QuantityPackages, { quantity: quantityInstall, borderColor: (selectedTab === 0 && colorMode === 'dark')
? '#ffffff'
: (selectedTab === 0 && colorMode === 'light')
? '#ffffff'
: (colorMode === 'dark')
? '#ffffff'
: '#3a3a3a' }) })] }) }), _jsx(AnimatePresence, { children: _jsxs(Box, { as: motion.div, role: 'button', animate: controlTabUninstalled, initial: 'initial', exit: 'initial', variants: tabUninstalled, onClick: onSelectMode, sx: {
display: 'flex',
justifyContent: 'space-between',
alignItems: 'center',
borderRadius: '5rem',
w: '100%',
p: 2,
'& > *:nth-of-type(1)': {
mr: 1
}
}, children: [_jsxs(Box, { sx: {
display: 'flex',
alignItems: 'center',
'& > *:nth-of-type(1)': {
mr: 1
}
}, children: [_jsx(Uninstall, { stroke: (selectedTab === 1 && colorMode === 'dark')
? '#ffffff'
: (selectedTab === 1)
? '#ffffff'
: (colorMode === 'dark')
? '#ffffff'
: '#3a3a3a' }), _jsx(Text, { as: motion.div, animate: controlTextUninstalled, variants: textUninstalled, initial: 'initial', sx: { lineHeight: 1 }, children: "Not installed" })] }), _jsx(Box, { children: _jsx(QuantityPackages, { quantity: quantityUninstalled, borderColor: (selectedTab === 1 && colorMode === 'dark')
? '#ffffff'
: (selectedTab === 1)
? '#ffffff'
: (colorMode === 'dark')
? '#ffffff'
: '#3a3a3a' }) })] }, 1) })] }));
});
//# sourceMappingURL=packager-interface-tabs-menu.js.map