docs(feat): add analytics & feedback forms to docs (pmndrs#2040)

Author: joshuaellis

docs/app/components/Buttons/GradientButton.tsx

@@ -7,6 +7,7 @@ interface GradientButtonProps {
   tag?: keyof JSX.IntrinsicElements
   className?: string
   variant?: 'regular' | 'small'
+  type?: 'button' | 'submit'
 }
 
 export const GradientButton = ({
@@ -15,16 +16,25 @@ export const GradientButton = ({
   children,
   tag,
   variant = 'regular',
+  type = 'button',
+  ...props
 }: GradientButtonProps) => {
   return (
-    <Button size={variant} className={className} as={tag} href={href}>
+    <Button
+      size={variant}
+      className={className}
+      as={tag}
+      href={href}
+      type={tag === 'button' ? type : undefined}
+      {...props}>
       <span>{children}</span>
     </Button>
   )
 }
 
 const Button = styled('a', {
   color: '$steel100',
+  border: 'none',
   borderRadius: '$r8',
   p: 2,
   backgroundClip: 'content-box',

docs/app/components/Buttons/NavButton.tsx

@@ -2,18 +2,9 @@ import {
   ForwardRefExoticComponent,
   MouseEventHandler,
   RefAttributes,
-  useRef,
-  useState,
 } from 'react'
-import { Link, useLocation } from '@remix-run/react'
-import {
-  animated,
-  SpringValue,
-  useSpring,
-  useTransition,
-} from '@react-spring/web'
+import { useLocation } from '@remix-run/react'
 import * as Toolbar from '@radix-ui/react-toolbar'
-import * as Tooltip from '@radix-ui/react-tooltip'
 import { IconProps } from 'phosphor-react'
 
 import { dark, styled } from '~/styles/stitches.config'

docs/app/components/Cards/CardExample.tsx

@@ -7,9 +7,22 @@ import { GradientButton } from '../Buttons/GradientButton'
 
 import type { Sandbox } from '../../routes/examples'
 
+import { EventNames, firePlausibleEvent } from '~/helpers/analytics'
+
 export const CardExample = ({ title, description, tags, id }: Sandbox) => {
+  const handleClick = () => {
+    firePlausibleEvent({
+      name: EventNames.LinkedToSandbox,
+      additionalProps: {
+        title,
+      },
+    })
+  }
+
   return (
-    <ExampleAnchor href={`https://codesandbox.io/s/${id}`}>
+    <ExampleAnchor
+      href={`https://codesandbox.io/s/${id}`}
+      onClick={handleClick}>
       <ExampleCard>
         <ExternalLinkIcon />
         <ExampleImage height={9} width={16}>