From 1036b4a04f28d44b6fc3b902bcb3499979d16820 Mon Sep 17 00:00:00 2001
From: Connor Gannaway <charlesconnorgannaway@gmail.com>
Date: Mon, 21 Apr 2025 09:48:09 -0400
Subject: [PATCH] make venue name clickable, opens in new google maps tab

---
 apps/userweb/src/views/EventDetailsPage.tsx | 27 ++++++++++++++++++---
 1 file changed, 24 insertions(+), 3 deletions(-)

diff --git a/apps/userweb/src/views/EventDetailsPage.tsx b/apps/userweb/src/views/EventDetailsPage.tsx
index 3a22cea..30737c9 100644
--- a/apps/userweb/src/views/EventDetailsPage.tsx
+++ b/apps/userweb/src/views/EventDetailsPage.tsx
@@ -1,6 +1,7 @@
 import { isEthereumWallet } from '@dynamic-labs/ethereum';
 import { getAuthToken, useDynamicContext } from '@dynamic-labs/sdk-react-core';
 import { UserEventDetailsResponse } from '@platform/types';
+import { ExternalLinkIcon } from '@radix-ui/react-icons';
 import { Card, Flex, Heading, Inset, Text } from '@radix-ui/themes';
 import { useEffect, useState } from 'react';
 import { useParams } from 'react-router-dom';
@@ -51,6 +52,13 @@ const RightColumn = styled.div`
 	}
 `;
 
+const UnderlineFlex = styled(Flex)`
+	cursor: pointer;
+	&:hover {
+		text-decoration: underline;
+	}
+`;
+
 export default function EventDetailsPage() {
 	// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
 	const id = useParams().id!;
@@ -184,9 +192,22 @@ export default function EventDetailsPage() {
 											}}
 										/>
 									</Inset>
-									<Heading size="4" mb="3">
-										{data.Venuename}
-									</Heading>
+									<UnderlineFlex
+										gap="2"
+										align="center"
+										mb="2"
+										onClick={() => {
+											window.open(
+												`https://www.google.com/maps/place/${data.StreetAddress},+${data.City},+${data.StateCode}+${data.Zip}`,
+												'_blank'
+											);
+										}}
+									>
+										<Heading size="4">
+											{data.Venuename}
+										</Heading>
+										<ExternalLinkIcon />
+									</UnderlineFlex>
 									<Text as="p" size="3">
 										{data.StreetAddress}
 									</Text>