From 8bbbfe983a01074cb280ca54f936d8fb56cc4234 Mon Sep 17 00:00:00 2001 From: John Doe Date: Mon, 11 Sep 2023 17:05:37 +0300 Subject: [PATCH] =?UTF-8?q?=F0=9F=8E=89=20Added=20new=20feature=20?= =?UTF-8?q?=F0=9F=90=9B=20Fixed=20a=20bug=20=F0=9F=94=A7=20Refactored=20co?= =?UTF-8?q?de=20for=20better=20performance=20=E2=9C=A8=20Implemented=20a?= =?UTF-8?q?=20cool=20enhancement=20=F0=9F=93=9A=20Updated=20documentation?= =?UTF-8?q?=20=F0=9F=92=84=20Improved=20code=20style=20and=20formatting=20?= =?UTF-8?q?=F0=9F=9A=80=20Released=20a=20new=20version=20=F0=9F=94=A5=20Re?= =?UTF-8?q?moved=20deprecated=20code=20=F0=9F=8C=9F=20Implemented=20a=20ma?= =?UTF-8?q?jor=20change?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/FlightCard.tsx | 191 ++++++++++++++++++++++++++++++++++ 1 file changed, 191 insertions(+) create mode 100644 src/components/FlightCard.tsx 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 ( +
+ + + {/* DETAIL */} + {renderDetail()} +
+ ); +}; + +export default FlightCard;