Skip to content

Commit

Permalink
👘💦 ↝ [SSG-76]: Updating travel styling & fetching functionality
Browse files Browse the repository at this point in the history
  • Loading branch information
@Gizmotronn
Gizmotronn committed Nov 26, 2024
1 parent ce1fe85 commit d8e540f
Show file tree
Hide file tree
Showing 10 changed files with 778 additions and 21 deletions.
40 changes: 32 additions & 8 deletions app/scenes/travel/page.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,12 +6,36 @@ import { useActivePlanet } from "@/context/ActivePlanet";
import SwitchPlanet from "@/components/(scenes)/travel/SolarSystem";
import StarnetLayout from "@/components/Layout/Starnet";

export default function Travel() {
import PlanetSelector from "@/components/(scenes)/travel/PlanetSelector";

export default function Home() {
const session = useSession();

const mockUser = {
id: "1",
name: session?.user?.id || "Guest",
avatar: "/placeholder.svg?height=40&width=40",
frequentFlyerNumber: "SF123456",
frequentFlyerStatus: "Gold" as "Gold",
};

return (
<StarnetLayout>
<main className="container mx-auto px-4 py-6 relative z-8">
<center><SwitchPlanet /></center>
</main>
</StarnetLayout>
)
};
<main className="min-h-screen bg-[#1D2833] text-[#F7F5E9] p-4 sm:p-6 md:p-8">
<PlanetSelector
user={mockUser}
onSelect={(planet) => console.log("Selected planet:", planet.name)}
/>
</main>
);
};


// export default function Travel() {
// return (
// <StarnetLayout>
// <main className="container mx-auto px-4 py-6 relative z-8">
// {/* <center><SwitchPlanet /></center> */}
// </main>
// </StarnetLayout>
// )
// };
84 changes: 84 additions & 0 deletions components/(scenes)/travel/BoardingPass.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,84 @@
import React from 'react'
import { motion } from 'framer-motion'
import { User, Planet } from "@/types/Travel";
import Image from 'next/image'
import { Button } from '@/components/ui/button'
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'

interface BoardingPassProps {
user: User
planet: Planet
onBeginTrip: () => void
onCancelBooking: () => void
};

function QRCodePattern() {
const size = 10
const cells = Array(size * size).fill(0).map(() => Math.random() > 0.5)

return (
<div className="w-full aspect-square bg-[#2C4F64] p-4 rounded-2xl">
<div className="w-full h-full grid grid-cols-10 gap-1">
{cells.map((filled, i) => (
<div key={i} className={`rounded-sm ${filled ? 'bg-[#5FCBC3]' : 'bg-transparent'}`}></div>
))}
</div>
</div>
);
};

export default function BoardingPass({ user, planet, onBeginTrip, onCancelBooking }: BoardingPassProps) {
return (
<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="min-h-[calc(100vh-4rem)] flex flex-col items-center justify-center p-4 sm:p-6 md:p-8"
>
<Card className="w-full max-w-md bg-[#2C4F64] text-[#F7F5E9]">
<CardHeader className="text-center">
<CardTitle className="text-3xl font-bold text-[#5FCBC3]">Boarding Pass</CardTitle>
</CardHeader>
<CardContent className="space-y-6">
<div className="space-y-4">
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Passenger</span>
<span>{user.name}</span>
</div>
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Destination</span>
<span>{planet.name}</span>
</div>
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Station</span>
<span>{planet.station}</span>
</div>
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Temperature</span>
<span>{planet.temperature}°C</span>
</div>
</div>
<div className="flex justify-center">
<div className="w-48">
<QRCodePattern />
</div>
</div>
</CardContent>
<CardFooter className="flex flex-col sm:flex-row gap-4">
<Button
onClick={onBeginTrip}
className="w-full sm:w-1/2 bg-[#5FCBC3] hover:bg-[#B9E678] text-[#1D2833]"
>
Begin Trip
</Button>
<Button
onClick={onCancelBooking}
variant="outline"
className="w-full sm:w-1/2 border-[#F7F5E9] text-[#F7F5E9] hover:bg-[#F7F5E9]/10"
>
Cancel Booking
</Button>
</CardFooter>
</Card>
</motion.div>
);
};
38 changes: 38 additions & 0 deletions components/(scenes)/travel/BoardingPassCard.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,38 @@
import React from 'react';
import { BoardingPass } from "@/types/Travel";
import Image from 'next/image';

interface BoardingPassCardProps {
boardingPass: BoardingPass;
}

const BoardingPassCard: React.FC<BoardingPassCardProps> = ({ boardingPass }) => {
return (
<div className="bg-[#2C4F64] p-6 rounded-lg shadow-lg">
<h2 className="text-3xl font-bold mb-4 text-center text-[#5FCBC3]">Boarding Pass</h2>
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
<div>
<h3 className="text-xl font-semibold mb-2 text-[#B9E678]">Passenger Information</h3>
<p><span className="font-semibold">Name:</span> {boardingPass.userName}</p>
<p><span className="font-semibold">Frequent Flyer:</span> {boardingPass.frequentFlyerNumber}</p>
<p><span className="font-semibold">Status:</span> {boardingPass.frequentFlyerStatus}</p>
</div>
<div>
<h3 className="text-xl font-semibold mb-2 text-[#B9E678]">Flight Information</h3>
<p><span className="font-semibold">From:</span> {boardingPass.departurePlanet} ({boardingPass.departureTemperature}°C)</p>
<p><span className="font-semibold">To:</span> {boardingPass.destinationPlanet} ({boardingPass.destinationTemperature}°C)</p>
<p><span className="font-semibold">Rocket:</span> {boardingPass.rocketType}</p>
<p><span className="font-semibold">Departure:</span> {new Date(boardingPass.departureTime).toLocaleString()}</p>
</div>
</div>
<div className="mt-6 flex justify-center">
<Image src="/qr-code-placeholder.png" alt="QR Code" width={150} height={150} />
</div>
<div className="mt-4 flex justify-center">
<Image src="/barcode-placeholder.png" alt="Barcode" width={250} height={80} />
</div>
</div>
);
};

export default BoardingPassCard;
109 changes: 109 additions & 0 deletions components/(scenes)/travel/BookingConfirmation.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
'use client'

import { motion } from 'framer-motion'
import { ChevronLeft } from 'lucide-react'
import { Button } from '@/components/ui/button'
import { Card } from '@/components/ui/card'
import Image from 'next/image'
import { Planet, Departure, User } from '@/types/Travel'

interface BookingConfirmationProps {
planet: Planet
departure: Departure
user: User
onBack: () => void
};

function QRCodePattern() {
const size = 10
const cells = Array(size * size).fill(0).map(() => Math.random() > 0.5)

return (
<div className="w-48 h-48 bg-[#2C4F64] p-4 rounded-3xl">
<div className="w-full h-full grid grid-cols-10 gap-1">
{cells.map((filled, i) => (
<div key={i} className={`rounded-sm ${filled ? 'bg-[#5FCBC3]' : 'bg-transparent'}`}></div>
))}
</div>
</div>
);
};

export default function BookingConfirmation({ planet, departure, user, onBack }: BookingConfirmationProps) {
return (
<div className="h-[calc(100vh-4rem)]">
<header className="flex items-center gap-4 mb-8">
<button onClick={onBack} className="w-10 h-10 rounded-full bg-[#2C4F64] flex items-center justify-center">
<ChevronLeft className="w-6 h-6" />
</button>
<h1 className="text-2xl font-bold">Booking Confirmation</h1>
</header>

<motion.div
initial={{ opacity: 0, y: 20 }}
animate={{ opacity: 1, y: 0 }}
className="space-y-6"
>
<Card className="bg-[#2C4F64] border-none p-6">
<div className="flex justify-between items-start mb-6">
<div>
<h2 className="text-2xl font-bold mb-1">{planet.name}</h2>
<p className="text-sm text-[#F7F5E9]/60">{planet.station}</p>
</div>
<Image
src={planet.image}
alt={planet.name}
width={60}
height={60}
className="rounded-lg"
/>
</div>

<div className="space-y-4">
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Passenger</span>
<span>{user.name
}</span>
</div>
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Departure</span>
<span>{new Date(departure.departureTime).toLocaleString()}, Gate {departure.gate}</span>
</div>
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Duration</span>
<span>{departure.duration}</span>
</div>
<div className="flex justify-between">
<span className="text-[#F7F5E9]/60">Rocket</span>
<span>{departure.rocketType}</span>
</div>
</div>

<div className="mt-6 pt-6 border-t border-[#F7F5E9]/10">
<div className="flex justify-between items-end">
<div>
<span className="text-sm text-[#F7F5E9]/60">Total Price</span>
<p className="text-2xl font-bold">${departure.price}</p>
</div>
<div className="text-right">
<span className="text-sm text-[#F7F5E9]/60">Booking Reference</span>
<p className="font-mono">{planet.name.substring(0, 3).toUpperCase()}-{Math.random().toString(36).substring(2, 7).toUpperCase()}</p>
</div>
</div>
</div>
</Card>

<div className="flex justify-center">
<QRCodePattern />
</div>

<Button
className="w-full bg-[#5FCBC3] hover:bg-[#B9E678] text-[#1D2833]"
size="lg"
>
Download Ticket
</Button>
</motion.div>
</div>
);
};
32 changes: 32 additions & 0 deletions components/(scenes)/travel/DepartureList.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import { Departure } from '@/types/Travel';

interface DepartureListProps {
departures: Departure[];
onSelect: (departure: Departure) => void;
selectedDeparture: Departure | null;
}

const DepartureList: React.FC<DepartureListProps> = ({ departures, onSelect, selectedDeparture }) => {
return (
<div className="mb-8">
<h2 className="text-2xl font-semibold mb-4 text-[#B9E678]">Select Your Departure</h2>
<ul className="space-y-2">
{departures.map(departure => (
<li
key={departure.id}
className={`cursor-pointer p-2 rounded-md transition-colors ${
selectedDeparture?.id === departure.id ? 'bg-[#2C4F64]' : 'hover:bg-[#2C4F64]'
}`}
onClick={() => onSelect(departure)}
>
<span className="font-semibold">{departure.rocketType}</span> - Departs at{' '}
{new Date(departure.departureTime).toLocaleString()}
</li>
))}
</ul>
</div>
);
};

export default DepartureList;
Loading

0 comments on commit d8e540f

Please sign in to comment.