{OasisBandInfo.name}

Origin: {OasisBandInfo.origin}

Active Years: {OasisBandInfo.activeYears}

Genre: {OasisBandInfo.genre}

{OasisBandInfo.description}

\n \n

Band Members

\n {OasisBandInfo.members.map((member, index) => (\n

{member.name}

Role: {member.role}

Period: {member.period}

\n ))}\n

\n \n \n

\n );\n}\n\nfunction AlbumCard({ album }) {\n return (\n

{album.name}

Type: {album.type}

Release Date: {album.releaseDate}

Sales: {album.sales}

{album.description}

Tracks:

{track}

\n );\n}\n\nfunction App() {\n return (\n

Oasis: The Complete Story

\n \n

Discography

\n {OasisDiscography.map((album, index) => (\n \n ))}\n

\n \n

\n );\n}\n\nfunction client() {\n createRoot(document.getElementById(\"root\")).render();\n}\nif (typeof document !== \"undefined\") { client(); }\n\nexport default async function handler(request: Request): Promise {\n return new Response(`\n \n \n Oasis: The Complete Story\n \n \n \n

\n \n \n \n \n `, {\n headers: {\n \"content-type\": \"text/html\",\n },\n });\n}\n\nconst css = `\nbody {\n font-family: 'Arial', sans-serif;\n background-color: #f4f4f4;\n margin: 0;\n padding: 20px;\n}\n\n.oasis-discography {\n max-width: 1200px;\n margin: 0 auto;\n}\n\nh1, h2 {\n text-align: center;\n color: #333;\n border-bottom: 2px solid #666;\n padding-bottom: 10px;\n}\n\n.band-introduction {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n margin-bottom: 20px;\n}\n\n.band-details {\n display: flex;\n justify-content: space-around;\n margin-bottom: 15px;\n}\n\n.band-description {\n text-align: center;\n font-style: italic;\n color: #666;\n margin-bottom: 20px;\n}\n\n.band-members {\n text-align: center;\n}\n\n.members-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));\n gap: 15px;\n}\n\n.member-card {\n background-color: #f9f9f9;\n border-radius: 8px;\n padding: 10px;\n box-shadow: 0 2px 4px rgba(0,0,0,0.1);\n}\n\n.external-links {\n margin-top: 20px;\n text-align: center;\n}\n\n.links-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));\n gap: 15px;\n}\n\n.external-link {\n text-decoration: none;\n color: inherit;\n}\n\n.link-card {\n background-color: #f0f0f0;\n border-radius: 8px;\n padding: 15px;\n transition: transform 0.3s ease, box-shadow 0.3s ease;\n border: 1px solid #ddd;\n}\n\n.link-card:hover {\n transform: scale(1.05);\n box-shadow: 0 4px 8px rgba(0,0,0,0.1);\n}\n\n.link-card h4 {\n margin: 0 0 10px 0;\n color: #333;\n}\n\n.link-card p {\n color: #666;\n margin: 0 0 10px 0;\n}\n\n.link-url {\n font-size: 0.8em;\n color: #888;\n word-break: break-all;\n}\n\n.album-grid {\n display: grid;\n grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));\n gap: 20px;\n}\n\n.album-card {\n background-color: white;\n border-radius: 8px;\n box-shadow: 0 4px 6px rgba(0,0,0,0.1);\n padding: 20px;\n transition: transform 0.3s ease;\n}\n\n.album-card:hover {\n transform: scale(1.02);\n}\n\n.album-card h2 {\n color: #1a1a1a;\n margin-bottom: 10px;\n border: none;\n text-align: left;\n}\n\n.album-card ul {\n list-style-type: none;\n padding: 0;\n}\n\n.album-card li {\n background-color: #f9f9f9;\n margin: 5px 0;\n padding: 5px;\n border-radius: 4px;\n}\n\nfooter {\n text-align: center;\n margin-top: 20px;\n font-size: 0.8em;\n color: #666;\n}\n`;","deleted","label",[98],"permalink","https://www.val.town/x/richi1969/OasisDiscography/code/main.tsx","extension","actionData","errors"]