react-icons/fi#FiBluetooth TypeScript Examples
The following examples show how to use
react-icons/fi#FiBluetooth.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: HardwareModal.tsx From Meshtastic with GNU General Public License v3.0 | 4 votes |
|
HardwareModal = ({
device,
open,
close,
}: HardwareModal): JSX.Element => {
const [hideDetails, setHideDetails] = useState(false);
const { breakpoint } = useBreakpoint(BREAKPOINTS, 'md');
return (
<Modal open={open} onClose={close}>
<div className="absolute right-0 z-20 m-2 md:flex">
<Button onClick={close}>
<FiX />
</Button>
</div>
<div className="absolute inset-0">
<motion.div
layout
animate={
breakpoint === 'sm'
? hideDetails
? 'hiddenSm'
: 'visibleSm'
: hideDetails
? 'hidden'
: 'visible'
}
variants={{
hidden: { width: '100%', height: '100%' },
hiddenSm: { height: '100%', width: '100%' },
visible: { width: '20%', height: '100%' },
visibleSm: { height: '33%', width: '100%' },
}}
transition={{
type: 'just',
}}
className="flex flex-col md:h-full md:flex-row"
>
<motion.div
layout
className={`relative z-10 flex h-full w-full rounded-t-2xl md:rounded-l-2xl md:rounded-tr-none ${device.misc.Gradient}`}
>
<motion.img
layout
src={device.images.Front}
alt=""
className="pointer-events-none m-auto max-h-full max-w-full object-cover p-2"
/>
<div className="absolute -bottom-5 z-20 flex w-full md:bottom-auto md:-right-5 md:h-full md:w-auto">
<Button
animate={
breakpoint === 'sm'
? hideDetails
? 'hiddenSm'
: 'visibleSm'
: hideDetails
? 'hidden'
: 'visible'
}
variants={{
hidden: { rotate: 180 },
hiddenSm: { rotate: -90 },
visible: { rotate: 0 },
visibleSm: { rotate: 90 },
}}
onClick={() => {
setHideDetails(!hideDetails);
}}
>
<FiChevronRight />
</Button>
</div>
<AnimatePresence>
{!hideDetails && (
<>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className={`absolute -bottom-5 z-20 flex md:mt-0 md:hidden md:pb-2 ${
hideDetails ? 'opacity-0' : 'opacity-100'
}`}
>
<VariantSelectButton options={device.variants} />
</motion.div>
<motion.div
initial={{ opacity: 0 }}
animate={{ opacity: 1 }}
exit={{ opacity: 0 }}
className="absolute -bottom-3 right-0 m-auto mr-2 ml-auto flex md:inset-x-1 md:bottom-4 md:mt-2"
>
<div className="m-auto flex gap-2">
{device.features.BLE && (
<Badge
name="Bluetooth"
color="bg-blue-500"
icon={<FiBluetooth />}
/>
)}
{device.features.WiFi && (
<Badge
name="WiFi"
color="bg-orange-500"
icon={<FiWifi />}
/>
)}
</div>
</motion.div>
</>
)}
</AnimatePresence>
</motion.div>
<div
className={`h-7 bg-base opacity-0 md:h-auto md:w-7 ${
hideDetails ? 'flex' : 'hidden'
}`}
/>
</motion.div>
</div>
<div className="z-[1] mt-[25%] flex h-full flex-col md:ml-[20%] md:mt-0 md:w-4/5">
<div className="z-0 hidden pb-2 md:flex">
<VariantSelectButton options={device.variants} />
</div>
<div
className={`mt-1 flex flex-grow rounded-2xl bg-base p-2 shadow-inner transition-opacity duration-100 ease-linear md:mt-0 md:rounded-l-none md:rounded-r-2xl md:p-4 ${
hideDetails ? 'opacity-0' : 'opacity-100'
}`}
>
<Tab.Group
as="div"
className="flex flex-grow flex-col rounded-2xl bg-primary p-2"
>
<Tab.List className="flex gap-2">
<CardTab title="Info" />
<CardTab title="Power" />
<CardTab title="Pinout" />
</Tab.List>
<Tab.Panels as="div" className="flex-grow overflow-y-auto">
<InfoTab device={device} />
<PowerTab device={device} />
<PinoutTab device={device} />
</Tab.Panels>
</Tab.Group>
</div>
</div>
</Modal>
);
}
Example #2
| Source File: BottomNav.tsx From meshtastic-web with GNU General Public License v3.0 | 4 votes |
|
BottomNav = (): JSX.Element => {
const [showVersionInfo, setShowVersionInfo] = useState(false);
const dispatch = useAppDispatch();
const meshtasticState = useAppSelector((state) => state.meshtastic);
const appState = useAppSelector((state) => state.app);
const primaryChannelSettings = useAppSelector(
(state) => state.meshtastic.radio.channels,
).find((channel) => channel.role === Protobuf.Channel_Role.PRIMARY)?.settings;
const metrics =
meshtasticState.nodes[meshtasticState.radio.hardware.myNodeNum]?.metrics;
return (
<div className="z-20 flex justify-between divide-x divide-gray-400 border-t border-gray-400 bg-white dark:divide-gray-600 dark:border-gray-600 dark:bg-secondaryDark">
<BottomNavItem tooltip="Meshtastic WebUI">
<img
title="Logo"
className="my-auto w-5"
src={appState.darkMode ? '/Logo_White.svg' : '/Logo_Black.svg'}
/>
</BottomNavItem>
<BottomNavItem
tooltip="Connection Status"
onClick={(): void => {
dispatch(openConnectionModal());
}}
className={
[
Types.DeviceStatusEnum.DEVICE_CONNECTED,
Types.DeviceStatusEnum.DEVICE_CONFIGURED,
].includes(meshtasticState.deviceStatus)
? 'bg-primary dark:bg-primary'
: [
Types.DeviceStatusEnum.DEVICE_CONNECTING,
Types.DeviceStatusEnum.DEVICE_RECONNECTING,
Types.DeviceStatusEnum.DEVICE_CONFIGURING,
].includes(meshtasticState.deviceStatus)
? 'bg-yellow-400 dark:bg-yellow-400'
: ''
}
>
{appState.connType === connType.BLE ? (
<FiBluetooth className="h-4" />
) : appState.connType === connType.SERIAL ? (
<FiCpu className="h-4" />
) : (
<FiWifi className="h-4" />
)}
<div className="truncate text-xs font-medium">
{meshtasticState.nodes.find(
(node) =>
node.data.num === meshtasticState.radio.hardware.myNodeNum,
)?.data.user?.longName ?? 'Disconnected'}
</div>
</BottomNavItem>
<BottomNavItem tooltip="Battery Level">
{!metrics?.batteryLevel ? (
<IoBatteryDeadOutline className="h-4" />
) : metrics?.batteryLevel > 50 ? (
<IoBatteryFullOutline className="h-4" />
) : metrics?.batteryLevel > 0 ? (
<IoBatteryFullOutline className="h-4" />
) : (
<IoBatteryChargingOutline className="h-4" />
)}
<div className="truncate text-xs font-medium">
{metrics?.batteryLevel
? `${metrics?.batteryLevel}% - ${metrics?.voltage}v`
: 'No Battery'}
</div>
</BottomNavItem>
<BottomNavItem tooltip="Network Utilization">
<div className="m-auto h-3 w-3 rounded-full bg-primary" />
<div className="truncate text-xs font-medium">
{`${metrics?.airUtilTx ?? 0}% - Air`} |
</div>
<div
className={`m-auto h-3 w-3 rounded-full ${
!metrics?.channelUtilization
? 'bg-primary'
: metrics?.channelUtilization > 50
? 'bg-red-400'
: metrics?.channelUtilization > 24
? 'bg-yellow-400'
: 'bg-primary'
}`}
/>
<div className="truncate text-xs font-medium">
{`${metrics?.channelUtilization ?? 0}% - Ch`}
</div>
</BottomNavItem>
<BottomNavItem tooltip="MQTT Status">
{primaryChannelSettings?.uplinkEnabled &&
primaryChannelSettings?.downlinkEnabled &&
!meshtasticState.radio.moduleConfig.mqtt.disabled ? (
<RiArrowUpDownLine className="h-4" />
) : primaryChannelSettings?.uplinkEnabled &&
!meshtasticState.radio.moduleConfig.mqtt.disabled ? (
<RiArrowUpLine className="h-4" />
) : primaryChannelSettings?.downlinkEnabled &&
!meshtasticState.radio.moduleConfig.mqtt.disabled ? (
<RiArrowDownLine className="h-4" />
) : (
<FiX className="h-4" />
)}
</BottomNavItem>
<div className="flex-grow">
<BottomNavItem
onClick={(): void => {
dispatch(toggleMobileNav());
}}
className="md:hidden"
>
{appState.mobileNavOpen ? (
<FiX className="m-auto h-4" />
) : (
<FiMenu className="m-auto h-4" />
)}
</BottomNavItem>
</div>
<BottomNavItem
tooltip={
appState.updateAvaliable ? 'Update Avaliable' : 'Current Commit'
}
onClick={(): void => {
setShowVersionInfo(true);
}}
className={appState.updateAvaliable ? 'animate-pulse' : ''}
>
{appState.updateAvaliable ? (
<MdUpgrade className="h-4" />
) : (
<FiGitBranch className="h-4" />
)}
<p className="text-xs opacity-60">{process.env.COMMIT_HASH}</p>
</BottomNavItem>
<BottomNavItem
tooltip="Toggle Theme"
onClick={(): void => {
dispatch(setDarkModeEnabled(!appState.darkMode));
}}
>
{appState.darkMode ? (
<FiSun className="h-4" />
) : (
<FiMoon className="h-4" />
)}
</BottomNavItem>
<VersionInfo
modalOpen={showVersionInfo}
onClose={(): void => {
setShowVersionInfo(false);
}}
/>
</div>
);
}
