Skip to content

Commit d8e540f

Browse files
GizmotronnGizmotronn
committed
👘💦 ↝ [SSG-76]: Updating travel styling & fetching functionality
1 parent ce1fe85 commit d8e540f

10 files changed

+778
-21
lines changed

‎app/scenes/travel/page.tsx

+32-8
Original file line numberDiff line numberDiff line change
@@ -6,12 +6,36 @@ import { useActivePlanet } from "@/context/ActivePlanet";
66
import SwitchPlanet from "@/components/(scenes)/travel/SolarSystem";
77
import StarnetLayout from "@/components/Layout/Starnet";
88

9-
export default function Travel() {
9+
import PlanetSelector from "@/components/(scenes)/travel/PlanetSelector";
10+
11+
export default function Home() {
12+
const session = useSession();
13+
14+
const mockUser = {
15+
id: "1",
16+
name: session?.user?.id || "Guest",
17+
avatar: "/placeholder.svg?height=40&width=40",
18+
frequentFlyerNumber: "SF123456",
19+
frequentFlyerStatus: "Gold" as "Gold",
20+
};
21+
1022
return (
11-
<StarnetLayout>
12-
<main className="container mx-auto px-4 py-6 relative z-8">
13-
<center><SwitchPlanet /></center>
14-
</main>
15-
</StarnetLayout>
16-
)
17-
};
23+
<main className="min-h-screen bg-[#1D2833] text-[#F7F5E9] p-4 sm:p-6 md:p-8">
24+
<PlanetSelector
25+
user={mockUser}
26+
onSelect={(planet) => console.log("Selected planet:", planet.name)}
27+
/>
28+
</main>
29+
);
30+
};
31+
32+
33+
// export default function Travel() {
34+
// return (
35+
// <StarnetLayout>
36+
// <main className="container mx-auto px-4 py-6 relative z-8">
37+
// {/* <center><SwitchPlanet /></center> */}
38+
// </main>
39+
// </StarnetLayout>
40+
// )
41+
// };

‎components/(scenes)/travel/BoardingPass.tsx

+84
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,84 @@
1+
import React from 'react'
2+
import { motion } from 'framer-motion'
3+
import { User, Planet } from "@/types/Travel";
4+
import Image from 'next/image'
5+
import { Button } from '@/components/ui/button'
6+
import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
7+
8+
interface BoardingPassProps {
9+
user: User
10+
planet: Planet
11+
onBeginTrip: () => void
12+
onCancelBooking: () => void
13+
};
14+
15+
function QRCodePattern() {
16+
const size = 10
17+
const cells = Array(size * size).fill(0).map(() => Math.random() > 0.5)
18+
19+
return (
20+
<div className="w-full aspect-square bg-[#2C4F64] p-4 rounded-2xl">
21+
<div className="w-full h-full grid grid-cols-10 gap-1">
22+
{cells.map((filled, i) => (
23+
<div key={i} className={`rounded-sm ${filled ? 'bg-[#5FCBC3]' : 'bg-transparent'}`}></div>
24+
))}
25+
</div>
26+
</div>
27+
);
28+
};
29+
30+
export default function BoardingPass({ user, planet, onBeginTrip, onCancelBooking }: BoardingPassProps) {
31+
return (
32+
<motion.div
33+
initial={{ opacity: 0, y: 20 }}
34+
animate={{ opacity: 1, y: 0 }}
35+
className="min-h-[calc(100vh-4rem)] flex flex-col items-center justify-center p-4 sm:p-6 md:p-8"
36+
>
37+
<Card className="w-full max-w-md bg-[#2C4F64] text-[#F7F5E9]">
38+
<CardHeader className="text-center">
39+
<CardTitle className="text-3xl font-bold text-[#5FCBC3]">Boarding Pass</CardTitle>
40+
</CardHeader>
41+
<CardContent className="space-y-6">
42+
<div className="space-y-4">
43+
<div className="flex justify-between">
44+
<span className="text-[#F7F5E9]/60">Passenger</span>
45+
<span>{user.name}</span>
46+
</div>
47+
<div className="flex justify-between">
48+
<span className="text-[#F7F5E9]/60">Destination</span>
49+
<span>{planet.name}</span>
50+
</div>
51+
<div className="flex justify-between">
52+
<span className="text-[#F7F5E9]/60">Station</span>
53+
<span>{planet.station}</span>
54+
</div>
55+
<div className="flex justify-between">
56+
<span className="text-[#F7F5E9]/60">Temperature</span>
57+
<span>{planet.temperature}°C</span>
58+
</div>
59+
</div>
60+
<div className="flex justify-center">
61+
<div className="w-48">
62+
<QRCodePattern />
63+
</div>
64+
</div>
65+
</CardContent>
66+
<CardFooter className="flex flex-col sm:flex-row gap-4">
67+
<Button
68+
onClick={onBeginTrip}
69+
className="w-full sm:w-1/2 bg-[#5FCBC3] hover:bg-[#B9E678] text-[#1D2833]"
70+
>
71+
Begin Trip
72+
</Button>
73+
<Button
74+
onClick={onCancelBooking}
75+
variant="outline"
76+
className="w-full sm:w-1/2 border-[#F7F5E9] text-[#F7F5E9] hover:bg-[#F7F5E9]/10"
77+
>
78+
Cancel Booking
79+
</Button>
80+
</CardFooter>
81+
</Card>
82+
</motion.div>
83+
);
84+
};

‎components/(scenes)/travel/BoardingPassCard.tsx

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import { BoardingPass } from "@/types/Travel";
3+
import Image from 'next/image';
4+
5+
interface BoardingPassCardProps {
6+
boardingPass: BoardingPass;
7+
}
8+
9+
const BoardingPassCard: React.FC<BoardingPassCardProps> = ({ boardingPass }) => {
10+
return (
11+
<div className="bg-[#2C4F64] p-6 rounded-lg shadow-lg">
12+
<h2 className="text-3xl font-bold mb-4 text-center text-[#5FCBC3]">Boarding Pass</h2>
13+
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
14+
<div>
15+
<h3 className="text-xl font-semibold mb-2 text-[#B9E678]">Passenger Information</h3>
16+
<p><span className="font-semibold">Name:</span> {boardingPass.userName}</p>
17+
<p><span className="font-semibold">Frequent Flyer:</span> {boardingPass.frequentFlyerNumber}</p>
18+
<p><span className="font-semibold">Status:</span> {boardingPass.frequentFlyerStatus}</p>
19+
</div>
20+
<div>
21+
<h3 className="text-xl font-semibold mb-2 text-[#B9E678]">Flight Information</h3>
22+
<p><span className="font-semibold">From:</span> {boardingPass.departurePlanet} ({boardingPass.departureTemperature}°C)</p>
23+
<p><span className="font-semibold">To:</span> {boardingPass.destinationPlanet} ({boardingPass.destinationTemperature}°C)</p>
24+
<p><span className="font-semibold">Rocket:</span> {boardingPass.rocketType}</p>
25+
<p><span className="font-semibold">Departure:</span> {new Date(boardingPass.departureTime).toLocaleString()}</p>
26+
</div>
27+
</div>
28+
<div className="mt-6 flex justify-center">
29+
<Image src="/qr-code-placeholder.png" alt="QR Code" width={150} height={150} />
30+
</div>
31+
<div className="mt-4 flex justify-center">
32+
<Image src="/barcode-placeholder.png" alt="Barcode" width={250} height={80} />
33+
</div>
34+
</div>
35+
);
36+
};
37+
38+
export default BoardingPassCard;

‎components/(scenes)/travel/BookingConfirmation.tsx

+109
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,109 @@
1+
'use client'
2+
3+
import { motion } from 'framer-motion'
4+
import { ChevronLeft } from 'lucide-react'
5+
import { Button } from '@/components/ui/button'
6+
import { Card } from '@/components/ui/card'
7+
import Image from 'next/image'
8+
import { Planet, Departure, User } from '@/types/Travel'
9+
10+
interface BookingConfirmationProps {
11+
planet: Planet
12+
departure: Departure
13+
user: User
14+
onBack: () => void
15+
};
16+
17+
function QRCodePattern() {
18+
const size = 10
19+
const cells = Array(size * size).fill(0).map(() => Math.random() > 0.5)
20+
21+
return (
22+
<div className="w-48 h-48 bg-[#2C4F64] p-4 rounded-3xl">
23+
<div className="w-full h-full grid grid-cols-10 gap-1">
24+
{cells.map((filled, i) => (
25+
<div key={i} className={`rounded-sm ${filled ? 'bg-[#5FCBC3]' : 'bg-transparent'}`}></div>
26+
))}
27+
</div>
28+
</div>
29+
);
30+
};
31+
32+
export default function BookingConfirmation({ planet, departure, user, onBack }: BookingConfirmationProps) {
33+
return (
34+
<div className="h-[calc(100vh-4rem)]">
35+
<header className="flex items-center gap-4 mb-8">
36+
<button onClick={onBack} className="w-10 h-10 rounded-full bg-[#2C4F64] flex items-center justify-center">
37+
<ChevronLeft className="w-6 h-6" />
38+
</button>
39+
<h1 className="text-2xl font-bold">Booking Confirmation</h1>
40+
</header>
41+
42+
<motion.div
43+
initial={{ opacity: 0, y: 20 }}
44+
animate={{ opacity: 1, y: 0 }}
45+
className="space-y-6"
46+
>
47+
<Card className="bg-[#2C4F64] border-none p-6">
48+
<div className="flex justify-between items-start mb-6">
49+
<div>
50+
<h2 className="text-2xl font-bold mb-1">{planet.name}</h2>
51+
<p className="text-sm text-[#F7F5E9]/60">{planet.station}</p>
52+
</div>
53+
<Image
54+
src={planet.image}
55+
alt={planet.name}
56+
width={60}
57+
height={60}
58+
className="rounded-lg"
59+
/>
60+
</div>
61+
62+
<div className="space-y-4">
63+
<div className="flex justify-between">
64+
<span className="text-[#F7F5E9]/60">Passenger</span>
65+
<span>{user.name
66+
}</span>
67+
</div>
68+
<div className="flex justify-between">
69+
<span className="text-[#F7F5E9]/60">Departure</span>
70+
<span>{new Date(departure.departureTime).toLocaleString()}, Gate {departure.gate}</span>
71+
</div>
72+
<div className="flex justify-between">
73+
<span className="text-[#F7F5E9]/60">Duration</span>
74+
<span>{departure.duration}</span>
75+
</div>
76+
<div className="flex justify-between">
77+
<span className="text-[#F7F5E9]/60">Rocket</span>
78+
<span>{departure.rocketType}</span>
79+
</div>
80+
</div>
81+
82+
<div className="mt-6 pt-6 border-t border-[#F7F5E9]/10">
83+
<div className="flex justify-between items-end">
84+
<div>
85+
<span className="text-sm text-[#F7F5E9]/60">Total Price</span>
86+
<p className="text-2xl font-bold">${departure.price}</p>
87+
</div>
88+
<div className="text-right">
89+
<span className="text-sm text-[#F7F5E9]/60">Booking Reference</span>
90+
<p className="font-mono">{planet.name.substring(0, 3).toUpperCase()}-{Math.random().toString(36).substring(2, 7).toUpperCase()}</p>
91+
</div>
92+
</div>
93+
</div>
94+
</Card>
95+
96+
<div className="flex justify-center">
97+
<QRCodePattern />
98+
</div>
99+
100+
<Button
101+
className="w-full bg-[#5FCBC3] hover:bg-[#B9E678] text-[#1D2833]"
102+
size="lg"
103+
>
104+
Download Ticket
105+
</Button>
106+
</motion.div>
107+
</div>
108+
);
109+
};

‎components/(scenes)/travel/DepartureList.tsx

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import React from 'react';
2+
import { Departure } from '@/types/Travel';
3+
4+
interface DepartureListProps {
5+
departures: Departure[];
6+
onSelect: (departure: Departure) => void;
7+
selectedDeparture: Departure | null;
8+
}
9+
10+
const DepartureList: React.FC<DepartureListProps> = ({ departures, onSelect, selectedDeparture }) => {
11+
return (
12+
<div className="mb-8">
13+
<h2 className="text-2xl font-semibold mb-4 text-[#B9E678]">Select Your Departure</h2>
14+
<ul className="space-y-2">
15+
{departures.map(departure => (
16+
<li
17+
key={departure.id}
18+
className={`cursor-pointer p-2 rounded-md transition-colors ${
19+
selectedDeparture?.id === departure.id ? 'bg-[#2C4F64]' : 'hover:bg-[#2C4F64]'
20+
}`}
21+
onClick={() => onSelect(departure)}
22+
>
23+
<span className="font-semibold">{departure.rocketType}</span> - Departs at{' '}
24+
{new Date(departure.departureTime).toLocaleString()}
25+
</li>
26+
))}
27+
</ul>
28+
</div>
29+
);
30+
};
31+
32+
export default DepartureList;

0 commit comments

Comments
 (0)