diff --git a/src/components/FlightCard.tsx b/src/components/FlightCard.tsx new file mode 100644 index 0000000..d4c9bdf --- /dev/null +++ b/src/components/FlightCard.tsx @@ -0,0 +1,191 @@ +"use client"; + +import Image from "next/image"; +import React, { FC, useState } from "react"; + +export interface FlightCardProps { + className?: string; + data: { + id: string; + airlines: { + logo: string; + name: string; + }; + price: string; + }; +} + +const FlightCard: FC = ({ className = "", data }) => { + const [isOpen, setIsOpen] = useState(false); + + const renderDetailTop = () => { + return ( +
+
+
+ +
+
+
+ + + +
+
+
+ + Monday, August 12 · 10:00 + + + Tokyo International Airport (HND) + +
+
+ + Monday, August 16 · 10:00 + + + Singapore International Airport (SIN) + +
+
+
+
+
    +
  • Trip time: 7 hours 45 minutes
    • +
  • ANA · Business class · Boeing 787 · NH 847
    • +
+
+
+ ); + }; + + const renderDetail = () => { + if (!isOpen) return null; + return ( +
+ {renderDetailTop()} +
+
+
+ Transit time: 15 hours 45 minutes - Bangkok (BKK) +
+
+
+ {renderDetailTop()} +
+ ); + }; + + return ( +
+
+ {/* eslint-disable-next-line jsx-a11y/anchor-has-content */} + + + setIsOpen(!isOpen)} + > + + + +
+ {/* LOGO IMG */} +
+ air-logo +
+ + {/* FOR MOBILE RESPONSIVE */} +
+
+
+ 11:00 + + HND + +
+ + + +
+ 20:00 + + SIN + +
+
+ +
+ Nonstop + · + 7h 45m + · + HAN +
+
+ + {/* TIME - NAME */} +
+
11:00 - 20:00
+
+ {data.airlines.name} +
+
+ + {/* TIMME */} +
+
HND - SIN
+
+ 7 hours 15 minutes +
+
+ + {/* TYPE */} +
+
1 stop
+
+ 2 hours 15 minutes BKK +
+
+ + {/* PRICE */} +
+
+ + {data.price} + +
+
+ round-trip +
+
+
+
+ + {/* DETAIL */} + {renderDetail()} +
+ ); +}; + +export default FlightCard;