react-icons/fi#FiPower TypeScript Examples
The following examples show how to use
react-icons/fi#FiPower.
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: index.tsx From GoBarber with MIT License | 6 votes |
|
Header: React.FC = () => {
const { signOut, user } = useAuth();
return (
<Container>
<HeaderContent>
<img src={logoImg} alt="logo" />
<Profile>
<img src={user.avatar_url} alt={user.id} />
<Info>
<span>Bem-vindo(a), </span>
<Link to="/profile">
<strong>{user.name}</strong>
</Link>
</Info>
</Profile>
<button onClick={signOut} type="button">
<FiPower />
</button>
</HeaderContent>
</Container>
);
}
Example #2
| Source File: index.tsx From front-entenda-direito with GNU General Public License v3.0 | 5 votes |
|
Dashboard: React.FC = () => {
const { signOut, user } = useAuth();
return (
<Container>
<Header>
<HeaderContent>
<img src={logoImg} alt="Entenda Direito" />
<Profile>
<img src={user.avatar_url} alt={user.name} />
<div>
<span>Bem-vindo,</span>
<Link to="/profile">
<strong>{user.name}</strong>
</Link>
</div>
</Profile>
<button type="button" onClick={signOut}>
<FiPower />
</button>
</HeaderContent>
</Header>
<Content>
<Schedule>
<Section>
<Search />
</Section>
</Schedule>
<Calendar>
<Section>
<Dictionary />
</Section>
</Calendar>
</Content>
</Container>
);
}
Example #3
| Source File: index.tsx From gobarber-web with MIT License | 4 votes |
|
Dashboard: React.FC = () => {
const { signOut, user } = useAuth();
const [selectedDate, setSelectedDate] = useState(new Date());
const [currentMonth, setCurrentMonth] = useState(new Date());
const [monthAvailability, setMonthAvailability] = useState<
MonthAvailabilityItem[]
>([]);
const [appointments, setAppointments] = useState<Appointment[]>([]);
const handleDateChange = useCallback((day: Date, modifiers: DayModifiers) => {
if (modifiers.available && !modifiers.disabled) {
setSelectedDate(day);
}
}, []);
const handleMonthChange = useCallback((month: Date) => {
setCurrentMonth(month);
}, []);
useEffect(() => {
api
.get(`/providers/${user.id}/month-availability`, {
params: {
year: currentMonth.getFullYear(),
month: currentMonth.getMonth() + 1,
},
})
.then(response => setMonthAvailability(response.data));
}, [currentMonth, user.id]);
useEffect(() => {
api
.get<Appointment[]>('/appointments/me', {
params: {
year: selectedDate.getFullYear(),
month: selectedDate.getMonth() + 1,
day: selectedDate.getDate(),
},
})
.then(response => {
const appointmentsFormatted = response.data.map(appointment => ({
...appointment,
hourFormatted: format(parseISO(appointment.date), 'HH:mm'),
}));
setAppointments(appointmentsFormatted);
});
}, [selectedDate]);
const disableDays = useMemo(() => {
return monthAvailability
.filter(monthDay => monthDay.available === false)
.map(monthDay => {
const year = currentMonth.getFullYear();
const month = currentMonth.getMonth();
return new Date(year, month, monthDay.day);
});
}, [currentMonth, monthAvailability]);
const selectedDateAsText = useMemo(() => {
return format(selectedDate, "'Dia' dd 'de' MMMM", { locale: ptBR });
}, [selectedDate]);
const selectedWeekDay = useMemo(() => {
return format(selectedDate, 'cccc', { locale: ptBR });
}, [selectedDate]);
const morningAppointments = useMemo(() => {
return appointments.filter(appointment => {
return parseISO(appointment.date).getHours() < 12;
});
}, [appointments]);
const afternoonAppointments = useMemo(() => {
return appointments.filter(appointment => {
return parseISO(appointment.date).getHours() >= 12;
});
}, [appointments]);
const nextAppointment = useMemo(() => {
return appointments.find(appointment =>
isAfter(parseISO(appointment.date), new Date()),
);
}, [appointments]);
return (
<S.Container>
<S.Header>
<S.HeaderContent>
<img src={logoImg} alt="Logo GoBarber" />
<S.HeaderProfile>
<img
src={
user.avatar_url ||
'https://api.adorable.io/avatars/56/[email protected]'
}
alt={user.name}
/>
<div>
<span>Bem-vindo,</span>
<Link to="/profile">
<strong>{user.name}</strong>
</Link>
</div>
</S.HeaderProfile>
<button type="button" onClick={signOut}>
<FiPower size={20} />
</button>
</S.HeaderContent>
</S.Header>
<S.Content>
<S.Schedule>
<h1>Horários agendados</h1>
<p>
{isToday(selectedDate) && <span>Hoje</span>}
<span>{selectedDateAsText}</span>
<span>{`${selectedWeekDay}-feira`}</span>
</p>
{isToday(selectedDate) && nextAppointment && (
<S.NextAppointment>
<strong>Atendimento a seguir</strong>
<div>
<img
src={
nextAppointment.user.avatar_url ||
'https://api.adorable.io/avatars/80/[email protected]'
}
alt={nextAppointment.user.name}
/>
<strong>{nextAppointment.user.name}</strong>
<span>
<FiClock size={24} />
{nextAppointment.hourFormatted}
</span>
</div>
</S.NextAppointment>
)}
<S.Section>
<strong>Manhã</strong>
{morningAppointments.length === 0 && (
<p>Nenhum agendamento neste período</p>
)}
{morningAppointments.map(appointment => (
<S.Appointment key={appointment.id}>
<span>
<FiClock size={20} />
{appointment.hourFormatted}
</span>
<div>
<img
src={
appointment.user.avatar_url ||
'https://api.adorable.io/avatars/56/[email protected]'
}
alt={appointment.user.name}
/>
<strong>{appointment.user.name}</strong>
</div>
</S.Appointment>
))}
</S.Section>
<S.Section>
<strong>Tarde</strong>
{afternoonAppointments.length === 0 && (
<p>Nenhum agendamento neste período</p>
)}
{afternoonAppointments.map(appointment => (
<S.Appointment key={appointment.id}>
<span>
<FiClock size={20} />
{appointment.hourFormatted}
</span>
<div>
<img
src={
appointment.user.avatar_url ||
'https://api.adorable.io/avatars/56/[email protected]'
}
alt={appointment.user.name}
/>
<strong>{appointment.user.name}</strong>
</div>
</S.Appointment>
))}
</S.Section>
</S.Schedule>
<S.Calendar>
<DayPicker
weekdaysShort={['D', 'S', 'T', 'Q', 'Q', 'S', 'S']}
fromMonth={new Date()}
disabledDays={[{ daysOfWeek: [0, 6] }, ...disableDays]}
modifiers={{
available: { daysOfWeek: [1, 2, 3, 4, 5] },
}}
onMonthChange={handleMonthChange}
selectedDays={selectedDate}
onDayClick={handleDateChange}
months={[
'Janeiro',
'Fevereiro',
'Março',
'Abril',
'Maio',
'Junho',
'Julho',
'Agosto',
'Setembro',
'Outubro',
'Novembro',
'Dezembro',
]}
/>
</S.Calendar>
</S.Content>
</S.Container>
);
}
Example #4
| Source File: index.tsx From gobarber-project with MIT License | 4 votes |
|
Dashboard: React.FC = () => {
const { user, signOut } = useAuth();
const [selectedDate, setSelectedDate] = useState(new Date());
const [currentMonth, setCurrentMonth] = useState(new Date());
const [monthAvailability, setMonthAvailability] = useState<
MonthAvailabilityItem[]
>([]);
const [appointments, setAppointments] = useState<Appointments[]>([]);
const handleDateChange = useCallback((day: Date, modifiers: DayModifiers) => {
if (modifiers.available && !modifiers.disabled) {
setSelectedDate(day);
}
}, []);
const handleMonthChange = useCallback((month: Date) => {
setCurrentMonth(month);
}, []);
useEffect(() => {
api
.get(`/providers/${user.id}/month-availability`, {
params: {
year: currentMonth.getFullYear(),
month: currentMonth.getMonth() + 1,
},
})
.then(response => {
setMonthAvailability(response.data);
});
}, [currentMonth, user.id]);
useEffect(() => {
api
.get<Appointments[]>('/appointments/me', {
params: {
year: selectedDate.getFullYear(),
month: selectedDate.getMonth() + 1,
day: selectedDate.getDate(),
},
})
.then(response => {
const appointmentsFormatted = response.data.map(appointment => {
return {
...appointment,
hourFormatted: format(parseISO(appointment.date), 'HH:mm'),
};
});
setAppointments(appointmentsFormatted);
});
}, [selectedDate]);
const disabledDays = useMemo(() => {
const dates = monthAvailability
.filter(monthDay => monthDay.available === false)
.map(monthDay => {
const year = currentMonth.getFullYear();
const month = currentMonth.getMonth();
return new Date(year, month, monthDay.day);
});
return dates;
}, [currentMonth, monthAvailability]);
const selectedDateAsText = useMemo(() => {
return format(selectedDate, "'Dia' dd 'de' MMMM", {
locale: ptBR,
});
}, [selectedDate]);
const selectedWeekDay = useMemo(() => {
return format(selectedDate, 'cccc', {
locale: ptBR,
});
}, [selectedDate]);
const morningAppointments = useMemo(() => {
return appointments.filter(appointment => {
return parseISO(appointment.date).getHours() < 12;
});
}, [appointments]);
const afternoonAppointments = useMemo(() => {
return appointments.filter(appointment => {
return parseISO(appointment.date).getHours() >= 12;
});
}, [appointments]);
const nextAppointment = useMemo(() => {
return appointments.find(appointment =>
isAfter(parseISO(appointment.date), new Date()),
);
}, [appointments]);
return (
<Container>
<Header>
<HeaderContent>
<img src={logo} alt="GoBarber" />
<Profile>
<img src={user.avatar_url} alt={user.name} />
<div>
<span>Bem-vindo,</span>
<Link to="/profile">
<strong>{user.name}</strong>
</Link>
</div>
</Profile>
<button type="button" onClick={signOut}>
<FiPower />
</button>
</HeaderContent>
</Header>
<Content>
<Schedule>
<h1>Horários agendados</h1>
<p>
{isToday(selectedDate) && <span>Hoje</span>}
<span>{selectedDateAsText}</span>
<span>{selectedWeekDay}</span>
</p>
{isToday(selectedDate) && nextAppointment && (
<NextAppointment>
<strong>Agendamento a seguir</strong>
<div>
<img
src={nextAppointment.user.avatar_url}
alt={nextAppointment.user.name}
/>
<strong>{nextAppointment.user.name}</strong>
<span>
<FiClock />
{nextAppointment.hourFormatted}
</span>
</div>
</NextAppointment>
)}
<Section>
<strong>Manhã</strong>
{morningAppointments.length === 0 && (
<p>Nenhum agendamento no horário da manhã</p>
)}
{morningAppointments.map(appointment => (
<Appointment key={appointment.id}>
<span>
<FiClock />
{appointment.hourFormatted}
</span>
<div>
<img
src={appointment.user.avatar_url}
alt={appointment.user.name}
/>
<strong>{appointment.user.name}</strong>
</div>
</Appointment>
))}
</Section>
<Section>
<strong>Tarde</strong>
{afternoonAppointments.length === 0 && (
<p>Nenhum agendamento no horário da tarde</p>
)}
{afternoonAppointments.map(appointment => (
<Appointment key={appointment.id}>
<span>
<FiClock />
{appointment.hourFormatted}
</span>
<div>
<img
src={appointment.user.avatar_url}
alt={appointment.user.name}
/>
<strong>{appointment.user.name}</strong>
</div>
</Appointment>
))}
</Section>
</Schedule>
<Calender>
<DayPicker
weekdaysShort={['D', 'S', 'T', 'Q', 'Q', 'S', 'S']}
fromMonth={new Date()}
disabledDays={[{ daysOfWeek: [0, 6] }, ...disabledDays]}
modifiers={{
available: { daysOfWeek: [1, 2, 3, 4, 5] },
}}
onMonthChange={handleMonthChange}
selectedDays={selectedDate}
onDayClick={handleDateChange}
months={[
'Janeiro',
'Fevereiro',
'Março',
'Abril',
'Maio',
'Junho',
'Julho',
'Agosto',
'Setembro',
'Outubro',
'Novembro',
'Dezembro',
]}
/>
</Calender>
</Content>
</Container>
);
}
Example #5
| 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 */}
</>
);
}
