64 lines
1.8 KiB
TypeScript
64 lines
1.8 KiB
TypeScript
import React from "react";
|
|
import { Avatar, Space, Typography, Tag } from "antd";
|
|
import { RightOutlined, ClockCircleOutlined, SwapOutlined, EnvironmentOutlined, CalendarOutlined } from "@ant-design/icons";
|
|
|
|
import "./Card.css";
|
|
|
|
interface FlightProps {
|
|
flight_code: string;
|
|
status: string;
|
|
origin: string;
|
|
destination: string;
|
|
departure_time: string;
|
|
arrival_time: string;
|
|
gate: string;
|
|
}
|
|
|
|
interface CardProps {
|
|
flight: FlightProps;
|
|
}
|
|
|
|
const { Text } = Typography;
|
|
|
|
export const Card: React.FC<CardProps> = ({ flight }) => {
|
|
return (
|
|
<div className="flight-card">
|
|
<Space size={8} align="center">
|
|
<Avatar size={64} icon={<RightOutlined />} />
|
|
<div>
|
|
<Text strong>{flight.flight_code}</Text>
|
|
<div>
|
|
<Text type="secondary">
|
|
{flight.origin} <SwapOutlined /> {flight.destination}
|
|
</Text>
|
|
</div>
|
|
</div>
|
|
</Space>
|
|
<div className="flight-details">
|
|
<Space size={8} direction="vertical">
|
|
<Text strong>Status:</Text>
|
|
<Tag color={flight.status === "En ruta" ? "green" : "orange"}>{flight.status}</Tag>
|
|
</Space>
|
|
<Space size={8} direction="vertical">
|
|
<Text strong>Departure:</Text>
|
|
<Space size={2} align="baseline">
|
|
<CalendarOutlined />
|
|
{flight.departure_time}
|
|
</Space>
|
|
</Space>
|
|
<Space size={8} direction="vertical">
|
|
<Text strong>Arrival:</Text>
|
|
<Space size={2} align="baseline">
|
|
<CalendarOutlined />
|
|
{flight.arrival_time}
|
|
</Space>
|
|
</Space>
|
|
<Space size={8} direction="vertical">
|
|
<Text strong>Gate:</Text>
|
|
<Text>{flight.gate}</Text>
|
|
</Space>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|