@kiwicom/smart-faq
Version:
Smart FAQ
59 lines (54 loc) • 1.99 kB
JavaScript
// @flow
import * as React from 'react';
import idx from 'idx';
import Text from '@kiwicom/orbit-components/lib/Text';
import type { ThemeProps } from '@kiwicom/nitro/lib/records/Theme';
import {
FlightDirect,
ChevronDown,
ChevronUp,
} from '@kiwicom/orbit-components/lib/icons';
import Stack from '@kiwicom/orbit-components/lib/Stack';
import { withTheme } from 'styled-components';
import CarrierLogoWrapper from './CarrierLogoWrapper';
import { FormatDate } from '../../helpers/dateUtils';
import type { AccordionTripSummary_trip } from './__generated__/AccordionTripSummary_trip.graphql';
type Props = {|
trip: AccordionTripSummary_trip,
isToggled: boolean,
...ThemeProps,
|};
const AccordionHeader = ({ trip, isToggled, theme }: Props) => {
const departureDate = idx(trip, _ => _.departure.localTime);
const departureCode = idx(trip, _ => _.departure.airport.locationId);
const departureCity = idx(trip, _ => _.departure.airport.city.name);
const arrivalCity = idx(trip, _ => _.arrival.airport.city.name);
const arrivalCode = idx(trip, _ => _.arrival.airport.locationId);
return (
<Stack flex align="center">
<div>
<CarrierLogoWrapper legs={trip.legs} />
</div>
<Stack spacing="extraTight">
<Text type="secondary" size="small">
{departureDate ? <FormatDate dateString={departureDate} /> : null}
</Text>
<Stack flex align="center">
<Text weight="bold" type="primary">
{departureCity} {departureCode}
</Text>
<FlightDirect customColor={theme.orbit.paletteInkLighter} />
<Text weight="bold" type="primary">
{arrivalCity} {arrivalCode}
</Text>
</Stack>
</Stack>
{isToggled ? (
<ChevronUp customColor={theme.orbit.paletteInkLighter} />
) : (
<ChevronDown customColor={theme.orbit.paletteInkLighter} />
)}
</Stack>
);
};
export default withTheme(AccordionHeader);