1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
/** @jsxImportSource https://esm.sh/react */
import { ExternalLinkIcon } from "https://esm.sh/@chakra-ui/icons";
import {
Badge,
Box,
ChakraProvider,
Heading,
Link,
Text,
useColorModeValue,
VStack,
} from "https://esm.sh/@chakra-ui/react";
import * as React from "https://esm.sh/react";
// import React, { useEffect, useState } from "https://esm.sh/react";
import { createRoot } from "https://esm.sh/react-dom/client";
import itinerary from "https://esm.town/v/namwen/veryTealAardvark";
import { renderToString } from "npm:react-dom/server";
function printItinerary() {
const rows = itinerary.trim().split("\n").map(row => row.split(","));
const headers = rows[0];
const data = rows.slice(1);
// Print the parsed data to the console
console.log("Itinerary:");
data.forEach(row => {
console.log("---");
headers.forEach((header, index) => {
console.log(`${header}: ${row[index]}`);
});
});
}
const currentDate = new Date();
type TravelDay = {
date: string;
activities: string;
startLocation: string;
endLocation: string;
accomodation: string;
whoBooked: string;
confirmationNumber: string;
cost: string;
address: string;
routeLink: string;
};
const TravelDayCard = ({ day: TravelDay }) => {
const bgColor = useColorModeValue("white", "gray.700");
const borderColor = useColorModeValue("gray.200", "gray.600");
return (
<Box
borderWidth="1px"
borderRadius="lg"
overflow="hidden"
p={6}
boxShadow="md"
bg={bgColor}
borderColor={borderColor}
maxWidth="400px"
width="100%"
>
<VStack align="start" spacing={3}>
<Heading size="md">{day.date}</Heading>
<Text>
<strong>Activities:</strong> {day.activities}
</Text>
<Text>
<strong>From:</strong> {day.startLocation} <strong>To:</strong> {day.endLocation}
</Text>
<Text>
<strong>Accommodation:</strong> {day.accomodation}
</Text>
<Text>
<strong>Booked by:</strong> {day.whoBooked}
</Text>
<Text>
<strong>Confirmation #:</strong> {day.confirmationNumber}
</Text>
<Text>
<strong>Cost:</strong> {day.cost}
</Text>
<Text>
<strong>Address:</strong> {day.address}
</Text>
<Link href={day.routeLink} isExternal color="teal.500">
View Route <ExternalLinkIcon mx="2px" />
</Link>
<Badge colorScheme="green" alignSelf="flex-end">
Travel Day
</Badge>
</VStack>
</Box>
);
};