react-icons/fi#FiAlignLeft TypeScript Examples
The following examples show how to use
react-icons/fi#FiAlignLeft.
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: AddButtons.tsx From tobira with Apache License 2.0 | 5 votes |
|
AddButtons: React.FC<Props> = ({ index, realm }) => {
const { t } = useTranslation();
const { id: realmId } = useFragment(graphql`
fragment AddButtonsRealmData on Realm {
id
}
`, realm);
const env = useRelayEnvironment();
const addBlock = (
type: string,
prepareBlock?: (store: RecordSourceProxy, block: RecordProxy) => void,
) => {
commitLocalUpdate(env, store => {
const realm = store.get(realmId) ?? bug("could not find realm");
const blocks = [
...realm.getLinkedRecords("blocks") ?? bug("realm does not have blocks"),
];
const id = "clNEWBLOCK";
const block = store.create(id, `${type}Block`);
prepareBlock?.(store, block);
block.setValue(true, "editMode");
block.setValue(id, "id");
blocks.splice(index, 0, block);
realm.setLinkedRecords(blocks, "blocks");
});
};
return <ButtonGroup css={{ alignSelf: "center" }}>
<span
title={t("manage.realm.content.add")}
css={{
color: "white",
backgroundColor: "var(--grey20)",
}}
>
<FiPlus />
</span>
<Button title={t("manage.realm.content.add-title")} onClick={() => addBlock("Title")}>
<FiType />
</Button>
<Button title={t("manage.realm.content.add-text")} onClick={() => addBlock("Text")}>
<FiAlignLeft />
</Button>
<Button
title={t("manage.realm.content.add-series")}
onClick={() => addBlock("Series", (_store, block) => {
block.setValue("NEW_TO_OLD", "order");
block.setValue(true, "showTitle");
})}
>
<FiGrid />
</Button>
<Button
title={t("manage.realm.content.add-video")}
onClick={() => addBlock("Video", (_store, block) => {
block.setValue(true, "showTitle");
})}
>
<FiFilm />
</Button>
</ButtonGroup>;
}
Example #2
| Source File: Index.tsx From meshtastic-web with GNU General Public License v3.0 | 4 votes |
|
Settings = ({ open, setOpen }: SettingsProps): JSX.Element => {
const [modulesOpen, setModulesOpen] = useState(false);
const [channelsOpen, setChannelsOpen] = useState(false);
const moduleConfig = useAppSelector(
(state) => state.meshtastic.radio.moduleConfig,
);
const hasGps = true;
const hasWifi = true;
return (
<>
<SidebarOverlay
title="Settings"
open={open}
close={(): void => {
setOpen(false);
}}
direction="y"
>
<CollapsibleSection icon={<FiUser />} title="User">
<User />
</CollapsibleSection>
<CollapsibleSection icon={<FiSmartphone />} title="Device">
<WiFi />
</CollapsibleSection>
<CollapsibleSection icon={<FiMapPin />} title="Position">
<Position />
</CollapsibleSection>
<CollapsibleSection icon={<FiPower />} title="Power">
<Power />
</CollapsibleSection>
<CollapsibleSection icon={<FiWifi />} title="WiFi">
<WiFi />
</CollapsibleSection>
<CollapsibleSection icon={<FiTv />} title="Display">
<Display />
</CollapsibleSection>
<CollapsibleSection icon={<FiRss />} title="LoRa">
<LoRa />
</CollapsibleSection>
<ExternalSection
onClick={(): void => {
setChannelsOpen(true);
}}
icon={<FiLayers />}
title="Channels"
/>
<ExternalSection
onClick={(): void => {
setModulesOpen(true);
}}
icon={<FiPackage />}
title="Modules"
/>
<CollapsibleSection icon={<FiLayout />} title="Interface">
<Interface />
</CollapsibleSection>
</SidebarOverlay>
{/* Modules */}
<SidebarOverlay
title="Modules"
open={modulesOpen}
close={(): void => {
setModulesOpen(false);
}}
direction="x"
>
<CollapsibleSection
icon={<FiWifi />}
title="MQTT"
status={!moduleConfig.mqtt.disabled}
>
<MQTT />
</CollapsibleSection>
<CollapsibleSection
icon={<FiAlignLeft />}
title="Serial"
status={moduleConfig.serial.enabled}
>
<SerialSettingsPanel />
</CollapsibleSection>
<CollapsibleSection
icon={<FiBell />}
title="External Notifications"
status={moduleConfig.extNotification.enabled}
>
<ExternalNotificationsSettingsPlanel />
</CollapsibleSection>
<CollapsibleSection
icon={<FiFastForward />}
title="Store & Forward"
status={moduleConfig.storeForward.enabled}
>
<StoreForwardSettingsPanel />
</CollapsibleSection>
<CollapsibleSection
icon={<FiRss />}
title="Range Test"
status={moduleConfig.rangeTest.enabled}
>
<RangeTestSettingsPanel />
</CollapsibleSection>
<CollapsibleSection
icon={<FiActivity />}
title="Telemetry"
status={true}
>
<Telemetry />
</CollapsibleSection>
<CollapsibleSection
icon={<FiMessageSquare />}
title="Canned Message"
status={moduleConfig.cannedMessage.enabled}
>
<CannedMessage />
</CollapsibleSection>
</SidebarOverlay>
{/* End Modules */}
{/* Channels */}
<SidebarOverlay
title="Channels"
open={channelsOpen}
close={(): void => {
setChannelsOpen(false);
}}
direction="x"
>
<ChannelsGroup />
</SidebarOverlay>
{/* End Channels */}
</>
);
}
Example #3
| Source File: NodeCard.tsx From meshtastic-web with GNU General Public License v3.0 | 4 votes |
|
NodeCard = ({
node,
isMyNode,
selected,
setSelected,
}: NodeCardProps): JSX.Element => {
const { map } = useMapbox();
const [infoOpen, setInfoOpen] = useState(false);
const [PositionConfidence, setPositionConfidence] =
useState<PositionConfidence>('none');
useEffect(() => {
setPositionConfidence(
node.position
? new Date(node.position.posTimestamp * 1000) >
new Date(new Date().getTime() - 1000 * 60 * 30)
? 'high'
: 'low'
: 'none',
);
}, [node.position]);
return (
<>
<SidebarItem
selected={selected}
setSelected={setSelected}
actions={
<>
<IconButton
nested
tooltip={PositionConfidence !== 'none' ? 'Fly to Node' : ''}
disabled={PositionConfidence === 'none'}
onClick={(e): void => {
e.stopPropagation();
setSelected();
if (PositionConfidence !== 'none' && node.position) {
map?.flyTo({
center: new LngLat(
node.position.longitudeI / 1e7,
node.position.latitudeI / 1e7,
),
zoom: 16,
});
}
}}
icon={
PositionConfidence === 'high' ? (
<MdGpsFixed />
) : PositionConfidence === 'low' ? (
<MdGpsNotFixed />
) : (
<MdGpsOff />
)
}
/>
<IconButton
nested
tooltip="Show Node Info"
onClick={(e): void => {
e.stopPropagation();
setInfoOpen(true);
}}
icon={<FiAlignLeft />}
/>
</>
}
>
<div className="flex dark:text-white">
<div className="relative m-auto">
{isMyNode && (
<Tooltip content="Your Node">
<m.div
whileHover={{ scale: 1.05 }}
className="absolute -right-1 -top-1 rounded-full bg-yellow-500 p-0.5"
>
<BiCrown className="h-3 w-3" />
</m.div>
</Tooltip>
)}
<Hashicon value={node.num.toString()} size={32} />
</div>
</div>
<div className="my-auto mr-auto text-xs font-semibold dark:text-gray-400">
{node.lastHeard
? new Date(node.lastHeard).toLocaleTimeString(undefined, {
hour: '2-digit',
minute: '2-digit',
})
: 'Never'}
</div>
</SidebarItem>
<SidebarOverlay
title={`Node ${node.user?.longName ?? 'UNK'} `}
open={infoOpen}
close={(): void => {
setInfoOpen(false);
}}
direction="x"
>
<CollapsibleSection title="User" icon={<FiUser />}>
<div className="flex p-2">
<div className="m-auto flex flex-col gap-2">
<Hashicon value={node.num.toString()} size={180} />
<div className="text-center text-lg font-medium dark:text-white">
{node?.user?.longName || 'Unknown'}
</div>
</div>
</div>
</CollapsibleSection>
<CollapsibleSection title="Location" icon={<FiMapPin />}>
<>
<div className="flex h-10 select-none justify-between rounded-md border border-gray-400 bg-transparent bg-gray-300 px-1 text-gray-500 dark:border-gray-600 dark:bg-secondaryDark dark:text-gray-400 ">
{node.position ? (
<>
<div className="my-auto px-1">
{(node.position.latitudeI / 1e7).toPrecision(6)}
,
{(node.position?.longitudeI / 1e7).toPrecision(6)}
</div>
<CopyButton
data={
node.position
? `${node.position.latitudeI / 1e7},${
node.position.longitudeI / 1e7
}`
: ''
}
/>
</>
) : (
<div className="my-auto px-1">No location data received</div>
)}
</div>
</>
</CollapsibleSection>
<CollapsibleSection title="Line of Sight" icon={<IoTelescope />}>
<div>Info</div>
</CollapsibleSection>
<CollapsibleSection title="Administration" icon={<FiSliders />}>
<div>Info</div>
</CollapsibleSection>
<CollapsibleSection title="Debug" icon={<FiCode />}>
<>
<div className="fixed right-0 mr-6">
<CopyButton data={JSON.stringify(node)} />
</div>
<JSONPretty className="max-w-sm" data={node} />
</>
</CollapsibleSection>
</SidebarOverlay>
</>
);
}
