Merge pull request #367 from airjp73/announcement

feat: add v6 announcement to docs

Author: airjp73

apps/docs/app/components/Alert.tsx

@@ -50,7 +50,7 @@ export const Alert: FC<AlertProps> = ({
         className
       )}
     >
-      <div className="flex">
+      <div className="flex items-center">
         <div className="flex-shrink-0">
           <Icon
             className={classNames(

apps/docs/app/components/Button.tsx

@@ -24,12 +24,14 @@ const buttonStyles = (
     className
   );
 
-export type ButtonProps = {
+type BaseButtonProps = {
   label: string;
   variant?: keyof typeof variantStyles;
   icon?: ReactElement;
   rightIcon?: ReactElement;
-} & JSX.IntrinsicElements["button"];
+};
+export type ButtonProps = BaseButtonProps &
+  JSX.IntrinsicElements["button"];
 
 export const Button = forwardRef<
   HTMLButtonElement,
@@ -64,3 +66,37 @@ export const Button = forwardRef<
     </button>
   )
 );
+
+export type ButtonLinkProps = BaseButtonProps &
+  JSX.IntrinsicElements["a"];
+
+export const ButtonLink = forwardRef<
+  HTMLAnchorElement,
+  ButtonLinkProps
+>(
+  (
+    {
+      className,
+      variant = "primary",
+      label,
+      icon,
+      rightIcon,
+      ...rest
+    },
+    ref
+  ) => (
+    <a
+      className={buttonStyles(variant, className)}
+      ref={ref}
+      {...rest}
+    >
+      {icon &&
+        cloneElement(icon, { className: "h-4 w-4 mr-2" })}
+      {label}
+      {rightIcon &&
+        cloneElement(rightIcon, {
+          className: "h-4 w-4 ml-2",
+        })}
+    </a>
+  )
+);

apps/docs/app/components/Layout.tsx

@@ -1,5 +1,9 @@
 import { MenuAlt2Icon } from "@heroicons/react/outline";
-import { useLocation, useMatches } from "@remix-run/react";
+import {
+  Link,
+  useLocation,
+  useMatches,
+} from "@remix-run/react";
 import React, {
   Fragment,
   PropsWithChildren,
@@ -9,6 +13,8 @@ import React, {
 import { Sidebar } from "../components/Sidebar";
 import { Footer } from "./Footer";
 import { GithubIcon } from "./GithubIcon";
+import { Alert } from "./Alert";
+import { Button, ButtonLink } from "./Button";
 
 type Section = {
   header: string;
@@ -225,6 +231,21 @@ export const Layout = ({ children }: LayoutProps) => {
       </div>
 
       <div className="flex flex-col flex-1">
+        <Alert
+          className="not-prose"
+          variant="info"
+          title="v6 is coming!"
+          details="Check out the RFC to get an early look or leave a comment."
+          action={
+            <ButtonLink
+              href="https://github.com/airjp73/remix-validated-form/discussions/364"
+              variant="primary"
+              label="View RFC"
+              aria-label="Dismiss"
+            />
+          }
+        />
+
         <main className="relative focus:outline-none p-8 prose prose-invert flex-1 md:flex-initial">
           {children}
         </main>

apps/docs/styles/index.css

@@ -25,7 +25,7 @@
   .overrides {
     code.hljs {
       margin: -11px -15px;
-      border-radius: .375rem;
+      border-radius: 0.375rem;
     }
   }
 }

package.json

@@ -18,6 +18,7 @@
     "vitest:run": "vitest run",
     "lint": "eslint --cache .",
     "prettier": "prettier --cache --check .",
+    "format": "prettier --write .",
     "build": "turbo run build",
     "prepare": "husky install"
   },