feat: minimap svgs show contact info on hover

brown-ccv · Jun 4, 2024 · 71de217 · 71de217
1 parent 82a8613
commit 71de217
Show file tree

Hide file tree

Showing 4 changed files with 117 additions and 3 deletions.
diff --git a/src/components/HoverCard.tsx b/src/components/HoverCard.tsx
@@ -0,0 +1,49 @@
+import React from "react"
+import * as HoverCard from "@radix-ui/react-hover-card"
+
+interface HoverCardItemProps {
+  image?: string
+  alt?: string
+  title: string
+  content: string | React.ReactNode
+  footer?: string | React.ReactNode
+  children: React.ReactNode
+}
+
+const HoverCardItem: React.FC<HoverCardItemProps> = ({
+  children,
+  alt,
+  title,
+  content,
+  footer,
+  image,
+}) => {
+  return (
+    <HoverCard.Root openDelay={2}>
+      <HoverCard.Trigger asChild>
+        <a className="cursor-pointer" rel="noreferrer noopener">
+          {children}
+        </a>
+      </HoverCard.Trigger>
+      <HoverCard.Portal>
+        <HoverCard.Content sideOffset={5}>
+          <div className="bg-white p-5 rounded shadow flex flex-col gap-3.5">
+            {image && alt && <img className="w-14 h-14 rounded-full" src={image} alt={alt} />}
+            <div className="flex flex-col gap-3.5">
+              <p className="font-semibold">{title}</p>
+              <div>{content}</div>
+              {footer && (
+                <div className="flex gap-3.5">
+                  <p>{footer}</p>
+                </div>
+              )}
+            </div>
+          </div>
+          <HoverCard.Arrow className="fill-white" />
+        </HoverCard.Content>
+      </HoverCard.Portal>
+    </HoverCard.Root>
+  )
+}
+
+export default HoverCardItem
diff --git a/src/components/svg/MiniMaps.tsx b/src/components/svg/MiniMaps.tsx
@@ -1,4 +1,5 @@
 import React from "react"
+import HoverCardItem from "../HoverCard.tsx"
 
 const MiniMapSvg = () => {
   return (
@@ -18,7 +19,34 @@ const MiniMapSvg = () => {
         stroke-width="3"
         mask="url(#path-1-inside-1_65_1451)"
       />
-      <circle cx="99" cy="103" r="16" fill="#317A7C" />
+      <HoverCardItem
+        title={"MEXICO"}
+        content={
+          <>
+            <p>Depto. de Estudios Sobre Movimientos Sociales (DESMOS)</p>
+            <p>Universidad de Guadalajara</p>
+            <p>Av. Maestros y Alcalde, Puerta 1</p>
+            <p>Guadalajara, CP 44269</p>
+            <p>Jalisco, México</p>
+          </>
+        }
+        footer={
+          <>
+            <div className="flex flex-row items-center gap-3.5">
+              <div className="flex flex-row items-center gap-2">
+                <h3 className="font-semibold">Tel: </h3>
+                <p>(52.33) 38.19.33.27</p>
+              </div>
+              <div className="flex flex-row items-center gap-2">
+                <h3 className="font-semibold">Fax: </h3>
+                <p>(52.33) 38.19.33.28</p>
+              </div>
+            </div>
+          </>
+        }
+        children={<circle cx="99" cy="103" r="16" fill="#317A7C" />}
+      ></HoverCardItem>
+
       <mask id="path-3-inside-2_65_1451" fill="white">
         <path d="M546 23.8848L540.212 19.7469L537.305 10.8952L529.946 10.2662L528.112 23.0473L525.782 26.7404L524.342 29.2021L515.725 31.5584L508.575 33.2613L502.813 40.7252L504.437 44.182L492.364 51.83L488.671 56.5171L485.214 59.0842L475.864 64.6366L470.704 63.0646L474.686 53.6627L468.793 45.4655L467.065 38.604L462.665 36.2466L455.122 43.1347L453.577 49.0277L455.856 56.465L453.603 64.924L450.172 65.4742L448.261 60.4454L447.291 55.2347L449.15 44.5225L447.658 42.6111L449.989 36.849L464.079 34.8322L458.998 29.8045L447.946 32.8686L442.525 29.1488L433.463 33.4965L425.371 32.6844L428.147 23.8327L422.411 20.6377L417.33 20.9261L410.783 17.7567L401.486 17.7311L370.504 16.1592L332.24 10.9473L316.631 7.75231L312.258 6.7572L287.168 0L285.388 5.60456L276.797 2.67138L276.587 16.5519L279.599 17.9142L275.068 20.9517L266.348 37.6089L266.19 43.6062L262 53.3742L262.262 64.3216L270.747 98.4726L280.569 103.973L285.125 110.049L286.016 115.89L299.817 117.696L298.953 119.006L319.329 130.974L330.696 132.756L335.933 130.372L345.833 131.682L353.794 140.062L355.969 147.212L363.852 152.607L367.047 147.631L374.694 147.893L385.458 163.633L387.789 171.778L398.84 174.03L397.427 167.85L400.778 160.778L409.474 155.828L420.185 147.264L429.404 150.066L431.892 147.92L437.916 152.424L444.62 150.224L445.589 144.646L452.137 142.785L457.898 141.634L466.043 142L473.089 145.982L478.274 141.896L487.728 149.123L487.624 156.588L493.49 165.388L504.672 171.83L505.301 159.574L500.796 149.831L492.495 135.61L494.564 126.129L502.919 116.675L505.432 111.332L518.343 95.0945L515.62 90.6947L515.699 90.6681L515.96 90.616L516.432 90.5117L516.563 90.4851L512.136 86.5046L512.477 81.9739L510.975 80.4718L515.541 80.8479L516.877 80.1923L517.715 76.9451L517.873 76.9196L517.925 76.893L513.891 68.4074L515.62 66.5481L520.727 67.308L519.679 58.7436L520.989 58.3509L529.369 53.9766L531.675 50.5465L531.936 50.7029L532.591 51.6725L534.922 48.8702L531.569 42.296L531.517 40.8561L535.944 34.2298L546 23.8848Z" />
       </mask>
@@ -28,7 +56,17 @@ const MiniMapSvg = () => {
         stroke-width="3"
         mask="url(#path-3-inside-2_65_1451)"
       />
-      <circle cx="524" cy="58" r="16" fill="#317A7C" />
+      <HoverCardItem
+        title={"United States"}
+        content={
+          <>
+            <p>Office of Population Research</p>
+            <p>Princeton University</p>
+            <p>Princeton, NJ 08544</p>
+          </>
+        }
+        children={<circle cx="524" cy="58" r="16" fill="#317A7C" />}
+      ></HoverCardItem>
     </svg>
   )
 }

diff --git a/src/pages/index.astro b/src/pages/index.astro
@@ -62,7 +62,7 @@ import FootPrint from "../components/svg/FootPrint"
         States, please contact us at the following addresses or email us:
       </p>
       <div class="flex justify-end">
-        <MiniMapSvg />
+        <MiniMapSvg client:only="react" />
       </div>
     </section>
   </div>

diff --git a/src/styles/global.css b/src/styles/global.css
@@ -124,4 +124,31 @@
         @apply gap-1;
         @apply pt-6;
     }
+
+    .HoverCardContent {
+        @apply bg-white;
+        @apply rounded;
+        @apply p-5;
+        @apply w-72;
+        @apply duration-300;
+        @apply ease-in-out;
+        box-shadow: hsl(206 22% 7% / 35%) 0px 10px 38px -10px, hsl(206 22% 7% / 20%) 0px 10px 20px -15px;
+        will-change: transform, opacity;
+    }
+
+    .HoverCardContent[data-side='top'] {
+        animation-name: slideDownAndFade;
+    }
+
+    .HoverCardContent[data-side='right'] {
+        animation-name: slideLeftAndFade;
+    }
+
+    .HoverCardContent[data-side='bottom'] {
+        animation-name: slideUpAndFade;
+    }
+
+    .HoverCardContent[data-side='left'] {
+        animation-name: slideRightAndFade;
+    }
 }