Browse Source
🎉 Added new feature
🎉 Added new feature
🐛 Fixed a bug 🔧 Refactored code for better performance ✨ Implemented a cool enhancement 📚 Updated documentation 💄 Improved code style and formatting 🚀 Released a new version 🔥 Removed deprecated code 🌟 Implemented a major changemain
John Doe
1 year ago
1 changed files with 191 additions and 0 deletions
@ -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<FlightCardProps> = ({ className = "", data }) => { |
||||
|
const [isOpen, setIsOpen] = useState(false); |
||||
|
|
||||
|
const renderDetailTop = () => { |
||||
|
return ( |
||||
|
<div> |
||||
|
<div className="flex flex-col md:flex-row "> |
||||
|
<div className="w-24 md:w-20 lg:w-24 flex-shrink-0 md:pt-7"> |
||||
|
<Image |
||||
|
src={data.airlines.logo} |
||||
|
className="w-10" |
||||
|
alt="" |
||||
|
sizes="40px" |
||||
|
width={40} |
||||
|
height={40} |
||||
|
/> |
||||
|
</div> |
||||
|
<div className="flex my-5 md:my-0"> |
||||
|
<div className="flex-shrink-0 flex flex-col items-center py-2"> |
||||
|
<span className="block w-6 h-6 rounded-full border border-neutral-400"></span> |
||||
|
<span className="block flex-grow border-l border-neutral-400 border-dashed my-1"></span> |
||||
|
<span className="block w-6 h-6 rounded-full border border-neutral-400"></span> |
||||
|
</div> |
||||
|
<div className="ml-4 space-y-10 text-sm"> |
||||
|
<div className="flex flex-col space-y-1"> |
||||
|
<span className=" text-neutral-500 dark:text-neutral-400"> |
||||
|
Monday, August 12 · 10:00 |
||||
|
</span> |
||||
|
<span className=" font-semibold"> |
||||
|
Tokyo International Airport (HND) |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="flex flex-col space-y-1"> |
||||
|
<span className=" text-neutral-500 dark:text-neutral-400"> |
||||
|
Monday, August 16 · 10:00 |
||||
|
</span> |
||||
|
<span className=" font-semibold"> |
||||
|
Singapore International Airport (SIN) |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
<div className="border-l border-neutral-200 dark:border-neutral-700 md:mx-6 lg:mx-10"></div> |
||||
|
<ul className="text-sm text-neutral-500 dark:text-neutral-400 space-y-1 md:space-y-2"> |
||||
|
<li>Trip time: 7 hours 45 minutes</li> |
||||
|
<li>ANA · Business class · Boeing 787 · NH 847</li> |
||||
|
</ul> |
||||
|
</div> |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
const renderDetail = () => { |
||||
|
if (!isOpen) return null; |
||||
|
return ( |
||||
|
<div className="p-4 md:p-8 border border-neutral-200 dark:border-neutral-700 rounded-2xl "> |
||||
|
{renderDetailTop()} |
||||
|
<div className="my-7 md:my-10 space-y-5 md:pl-24"> |
||||
|
<div className="border-t border-neutral-200 dark:border-neutral-700" /> |
||||
|
<div className="text-neutral-700 dark:text-neutral-300 text-sm md:text-base"> |
||||
|
Transit time: 15 hours 45 minutes - Bangkok (BKK) |
||||
|
</div> |
||||
|
<div className="border-t border-neutral-200 dark:border-neutral-700" /> |
||||
|
</div> |
||||
|
{renderDetailTop()} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
return ( |
||||
|
<div |
||||
|
className={`nc-FlightCardgroup p-4 sm:p-6 relative bg-white dark:bg-neutral-900 border border-neutral-100
|
||||
|
dark:border-neutral-800 rounded-2xl overflow-hidden hover:shadow-lg transition-shadow space-y-6 ${className}`}
|
||||
|
> |
||||
|
<div className={` sm:pr-20 relative ${className}`}> |
||||
|
{/* eslint-disable-next-line jsx-a11y/anchor-has-content */} |
||||
|
<a href="##" className="absolute inset-0" /> |
||||
|
|
||||
|
<span |
||||
|
className={`absolute right-0 bottom-0 sm:bottom-auto sm:top-1/2 sm:-translate-y-1/2 w-10 h-10 bg-neutral-50 dark:bg-neutral-800 rounded-full flex items-center justify-center cursor-pointer ${ |
||||
|
isOpen ? "transform -rotate-180" : "" |
||||
|
}`}
|
||||
|
onClick={() => setIsOpen(!isOpen)} |
||||
|
> |
||||
|
<i className="text-xl las la-angle-down"></i> |
||||
|
</span> |
||||
|
|
||||
|
<div className="flex flex-col sm:flex-row sm:items-center space-y-6 sm:space-y-0"> |
||||
|
{/* LOGO IMG */} |
||||
|
<div className="w-24 lg:w-32 flex-shrink-0"> |
||||
|
<Image |
||||
|
src={data.airlines.logo} |
||||
|
width={40} |
||||
|
height={40} |
||||
|
className="w-10" |
||||
|
alt="air-logo" |
||||
|
sizes="40px" |
||||
|
/> |
||||
|
</div> |
||||
|
|
||||
|
{/* FOR MOBILE RESPONSIVE */} |
||||
|
<div className="block lg:hidden space-y-1"> |
||||
|
<div className="flex font-semibold"> |
||||
|
<div> |
||||
|
<span>11:00</span> |
||||
|
<span className="flex items-center text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
HND |
||||
|
</span> |
||||
|
</div> |
||||
|
<span className="w-12 flex justify-center"> |
||||
|
<i className=" text-2xl las la-long-arrow-alt-right"></i> |
||||
|
</span> |
||||
|
<div> |
||||
|
<span>20:00</span> |
||||
|
<span className="flex items-center text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
SIN |
||||
|
</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
<div className="text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
<span className="VG3hNb">Nonstop</span> |
||||
|
<span className="mx-2">·</span> |
||||
|
<span>7h 45m</span> |
||||
|
<span className="mx-2">·</span> |
||||
|
<span>HAN</span> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* TIME - NAME */} |
||||
|
<div className="hidden lg:block min-w-[150px] flex-[4] "> |
||||
|
<div className="font-medium text-lg">11:00 - 20:00</div> |
||||
|
<div className="text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
{data.airlines.name} |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* TIMME */} |
||||
|
<div className="hidden lg:block flex-[4] whitespace-nowrap"> |
||||
|
<div className="font-medium text-lg"> HND - SIN</div> |
||||
|
<div className="text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
7 hours 15 minutes |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* TYPE */} |
||||
|
<div className="hidden lg:block flex-[4] whitespace-nowrap"> |
||||
|
<div className="font-medium text-lg">1 stop</div> |
||||
|
<div className="text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
2 hours 15 minutes BKK |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* PRICE */} |
||||
|
<div className="flex-[4] whitespace-nowrap sm:text-right"> |
||||
|
<div> |
||||
|
<span className="text-xl font-semibold text-secondary-6000"> |
||||
|
{data.price} |
||||
|
</span> |
||||
|
</div> |
||||
|
<div className="text-xs sm:text-sm text-neutral-500 font-normal mt-0.5"> |
||||
|
round-trip |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
</div> |
||||
|
|
||||
|
{/* DETAIL */} |
||||
|
{renderDetail()} |
||||
|
</div> |
||||
|
); |
||||
|
}; |
||||
|
|
||||
|
export default FlightCard; |
||||
Write
Preview
Loading…
Cancel
Save
Reference in new issue