Merge pull request #45 from brown-ccv/home-page

Home page

package.json

@@ -18,6 +18,7 @@
     "@astrojs/tailwind": "^5.1.0",
     "@radix-ui/react-checkbox": "^1.0.4",
     "@radix-ui/react-dialog": "^1.0.5",
+    "@radix-ui/react-hover-card": "^1.0.7",
     "@radix-ui/react-icons": "^1.3.0",
     "@staticcms/core": "^4.1.2",
     "@staticcms/proxy-server": "^4.0.4",

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
+  trigger: React.ReactNode
+}
+
+const HoverCardItem: React.FC<HoverCardItemProps> = ({
+  trigger,
+  alt,
+  title,
+  content,
+  footer,
+  image,
+}) => {
+  return (
+    <HoverCard.Root openDelay={2}>
+      <HoverCard.Trigger asChild>
+        <a className="cursor-pointer" rel="noreferrer noopener">
+          {trigger}
+        </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

src/components/svg/Circle.tsx

@@ -0,0 +1,23 @@
+import React from "react"
+
+interface CircleProps {
+  styling: string
+}
+
+const CircleIcon: React.FC<CircleProps> = ({ styling }) => {
+  return (
+    <>
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="48"
+        height="48"
+        viewBox="0 0 24 24"
+        className={styling}
+      >
+        <path d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z"></path>
+      </svg>
+    </>
+  )
+}
+
+export default CircleIcon