-

README.md

@@ -12,3 +12,6 @@ https://javisperez.github.io/tailwindcolorshades/
 
 https://colornamer.robertcooper.me/
 
+## Fontawesome
+
+https://fontawesome.com/search?q=

app/elements/alerts/page.tsx

@@ -1,9 +1,19 @@
+import { IconProp } from "@fortawesome/fontawesome-svg-core"
+import {
+  faBell,
+  faCheck,
+  faCircleCheck,
+  faCircleExclamation,
+  faCircleInfo,
+  faTriangleExclamation,
+} from "@fortawesome/pro-solid-svg-icons"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
 import { Metadata } from "next"
-import {Alert} from "../../../components/Alert";
-import {Card} from "../../../components/Card";
-import {Headline} from "../../../elements/Headline";
-import {VARIANTS} from "../../../enums";
-import Link from "next/link";
+import Link from "next/link"
+import { Alert } from "../../../components/Alert"
+import { Card } from "../../../components/Card"
+import { Headline } from "../../../elements/Headline"
+import { VARIANTS } from "../../../enums"
 
 export const metadata: Metadata = {
   title: "",
@@ -22,32 +32,71 @@ export const metadata: Metadata = {
   },
 }
 
-export default function Page() {
-  return <section className="flex w-full gap-6 flex-col">
-    <Headline title="Alerts">
-      Provide contextual feedback messages for typical user actions with the handful of available and flexible alert messages.
-    </Headline>
+const Icons: Record<VARIANTS, IconProp> = {
+  [VARIANTS.PRIMARY]: faCheck,
+  [VARIANTS.SECONDARY]: faCheck,
+  [VARIANTS.SUCCESS]: faCircleCheck,
+  [VARIANTS.DANGER]: faCircleExclamation,
+  [VARIANTS.WARNING]: faTriangleExclamation,
+  [VARIANTS.INFO]: faCircleInfo,
+  [VARIANTS.DARK]: faBell,
+}
 
-    <Card header="Basic Alerts">
-      <div className="flex flex-col gap-3">
-        {Object.entries(VARIANTS).map(([key, value]) => <Alert className="text-sm text-left" key={key} variant={value}>A simple {value} alert — check it out!</Alert>)}
-      </div>
-    </Card>
+export default function Page() {
+  return (
+    <section className="flex w-full flex-col gap-6">
+      <Headline title="Alerts">
+        Provide contextual feedback messages for typical user actions with the handful of available and flexible alert
+        messages.
+      </Headline>
 
-    <div className="flex gap-6">
-      <Card header="Link Alerts">
+      <Card header="Basic Alerts">
         <div className="flex flex-col gap-3">
-          {Object.entries(VARIANTS).map(([key, value]) => <Alert className="text-sm text-left" key={key} variant={value}>
-            A simple primary alert with <Link className="font-bold hover:underline" href="#">an example link</Link>. Give it a click if you like.
-          </Alert>)}
+          {Object.entries(VARIANTS).map(([key, value]) => (
+            <Alert className="text-left text-sm" key={key} variant={value}>
+              A simple {value} alert — check it out!
+            </Alert>
+          ))}
         </div>
       </Card>
 
-      <Card header="Dismissing">
-        <div className="flex flex-col gap-3">
-          {Object.entries(VARIANTS).map(([key, value]) => <Alert className="text-sm text-left" key={key} variant={value}>You should check in on some of those fields below.</Alert>)}
-        </div>
-      </Card>
-    </div>
-  </section>
+      <div className="flex gap-6">
+        <Card header="Link Alerts">
+          <div className="flex flex-col gap-3">
+            {Object.entries(VARIANTS).map(([key, value]) => (
+              <Alert className="text-left text-sm" key={key} variant={value}>
+                A simple primary alert with{" "}
+                <Link className="font-bold hover:underline" href="#">
+                  an example link
+                </Link>
+                . Give it a click if you like.
+              </Alert>
+            ))}
+          </div>
+        </Card>
+
+        <Card header="Dismissing">
+          <div className="flex flex-col gap-3">
+            {Object.entries(VARIANTS).map(([key, value]) => (
+              <Alert className="text-left text-sm" key={key} variant={value}>
+                You should check in on some of those fields below.
+              </Alert>
+            ))}
+          </div>
+        </Card>
+      </div>
+
+      <div className="flex gap-6">
+        <Card header="Acon Alerts">
+          <div className="flex flex-col gap-3">
+            {Object.entries(VARIANTS).map(([key, value]) => (
+              <Alert className="flex items-center gap-1.5 text-left text-sm" key={key} variant={value}>
+                <FontAwesomeIcon icon={Icons[value]} className="size-6" /> An example {value} with an icon
+              </Alert>
+            ))}
+          </div>
+        </Card>
+      </div>
+    </section>
+  )
 }

app/elements/badges/page.tsx

@@ -0,0 +1,30 @@
+import { Metadata } from "next"
+import { Card } from "../../../components/Card"
+import { Headline } from "../../../elements/Headline"
+
+export const metadata: Metadata = {
+  title: "",
+  twitter: {
+    card: "summary_large_image",
+  },
+  openGraph: {
+    url: "",
+    images: [
+      {
+        width: 1200,
+        height: 630,
+        url: "",
+      },
+    ],
+  },
+}
+
+export default function Page() {
+  return (
+    <section className="flex w-full flex-col gap-6">
+      <Headline title="Badges">Documentation and examples for badges, our small count and labeling component.</Headline>
+
+      <Card>Badges</Card>
+    </section>
+  )
+}

app/elements/breadcrumbs/page.tsx

@@ -0,0 +1,32 @@
+import { Metadata } from "next"
+import { Card } from "../../../components/Card"
+import { Headline } from "../../../elements/Headline"
+
+export const metadata: Metadata = {
+  title: "",
+  twitter: {
+    card: "summary_large_image",
+  },
+  openGraph: {
+    url: "",
+    images: [
+      {
+        width: 1200,
+        height: 630,
+        url: "",
+      },
+    ],
+  },
+}
+
+export default function Page() {
+  return (
+    <section className="flex w-full flex-col gap-6">
+      <Headline title="Breadcrumbs">
+        Indicate the current page’s location within a navigational hierarchy that automatically adds separators via CSS.
+      </Headline>
+
+      <Card>Breadcrumbs</Card>
+    </section>
+  )
+}

app/elements/buttons/page.tsx

@@ -1,5 +1,6 @@
 import { Metadata } from "next"
-import {Headline} from "../../../elements/Headline";
+import { Card } from "../../../components/Card"
+import { Headline } from "../../../elements/Headline"
 
 export const metadata: Metadata = {
   title: "",
@@ -19,9 +20,13 @@ export const metadata: Metadata = {
 }
 
 export default function Page() {
-  return <section className="">
-    <Headline title="Buttons">
-      Use button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
-    </Headline>
-  </section>
+  return (
+    <section className="flex w-full flex-col gap-6">
+      <Headline title="Buttons">
+        Use button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
+      </Headline>
+
+      <Card>Buttons</Card>
+    </section>
+  )
 }

app/elements/colors/page.tsx

@@ -1,5 +1,10 @@
+import { pick } from "lodash"
 import { Metadata } from "next"
-import { Colors } from "../../../elements/Colors"
+import colors from "tailwindcss/colors"
+import { Card } from "../../../components/Card"
+import { Color } from "../../../components/Color"
+import { Headline } from "../../../elements/Headline"
+import tailwind from "../../../tailwind.config"
 
 export const metadata: Metadata = {
   title: "",
@@ -18,10 +23,76 @@ export const metadata: Metadata = {
   },
 }
 
+const themeColors = tailwind?.theme?.extend?.colors || {}
+
+const tailwindColors = pick(colors, [
+  "slate",
+  "gray",
+  "zinc",
+  "neutral",
+  "stone",
+  "red",
+  "orange",
+  "amber",
+  "yellow",
+  "lime",
+  "green",
+  "emerald",
+  "teal",
+  "cyan",
+  "sky",
+  "blue",
+  "indigo",
+  "violet",
+  "purple",
+  "fuchsia",
+  "pink",
+  "rose",
+])
+
 export default function Page() {
   return (
-    <section className="">
-      <Colors />
+    <section className="flex w-full flex-col gap-6">
+      <Headline title="Colors">
+        Extensive color system that themes our styles and components. This enables more comprehensive customization and
+        extension for any project.
+      </Headline>
+
+      <Card header="Theme Colors">
+        <div className="flex w-full flex-col gap-3">
+          {Object.entries(themeColors).map(([name, colors]) => (
+            <div key={name} className="flex w-full gap-3">
+              <div className="flex h-10 w-20 items-center text-xs font-semibold capitalize text-slate-900 dark:text-slate-200">
+                {name}
+              </div>
+
+              <div className="flex w-full flex-wrap gap-3">
+                {Object.entries(colors).map(([value, color]) => (
+                  <Color key={value} color={color as string} name={name} value={value} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
+
+      <Card header="Tailwind Colors">
+        <div className="flex w-full flex-col gap-3">
+          {Object.entries(tailwindColors).map(([name, colors]) => (
+            <div key={name} className="flex w-full gap-3">
+              <div className="flex h-10 w-20 items-center text-xs font-semibold capitalize text-slate-900 dark:text-slate-200">
+                {name}
+              </div>
+
+              <div className="flex w-full flex-wrap gap-3">
+                {Object.entries(colors).map(([value, color]) => (
+                  <Color key={value} color={color} name={name} value={value} />
+                ))}
+              </div>
+            </div>
+          ))}
+        </div>
+      </Card>
     </section>
   )
 }

components/Alert.tsx

@@ -21,31 +21,27 @@ const alert = tv({
   },
 })
 
-export interface AlertVariants extends VariantProps<typeof alert> {
+interface AlertVariants extends VariantProps<typeof alert> {
   hover?: boolean
   href?: string
   target?: HTMLAttributeAnchorTarget
-  // withIcon?: boolean
-  // withClose?: boolean
-}
-
-export interface AlertProps
-  extends Omit<HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, "variant">,
-      AlertVariants {
+  rounded?: boolean
   disabled?: boolean
   type?: "submit" | "reset" | "button" | undefined
 }
 
+export interface AlertProps extends HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>, AlertVariants {}
+
 export const Alert = forwardRef<HTMLAnchorElement | HTMLButtonElement, AlertProps>(function Alert(
-  { hover, href, target, variant = "primary", className, children, disabled, type, ...rest }: AlertProps,
+  { hover, href, target, rounded, variant = "primary", className, children, disabled, type, ...rest }: AlertProps,
   ref
 ) {
   return href ? (
     <Link
       ref={ref as ForwardedRef<HTMLAnchorElement>}
       href={href}
       target={target}
-      className={cn("", alert({ variant }), className)}
+      className={cn("relative", alert({ variant }), rounded && "rounded-full", className)}
       {...rest}
     >
       {children}
@@ -55,7 +51,7 @@ export const Alert = forwardRef<HTMLAnchorElement | HTMLButtonElement, AlertProp
       type={type}
       ref={ref as ForwardedRef<HTMLButtonElement>}
       disabled={disabled}
-      className={cn("", alert({ variant }), className)}
+      className={cn("relative", alert({ variant }), rounded && "rounded-full", className)}
       {...rest}
     >
       {children}

components/Anchor.tsx

@@ -22,11 +22,7 @@ export const Anchor = ({ active, className, href, children, ...rest }: Props) =>
   }, [href, hash, pathname])
 
   return (
-    <Link
-      href={href}
-      className={cn("transition-all duration-300", className, value && active)}
-      {...rest}
-    >
+    <Link href={href} className={cn("transition-all duration-300", className, value && active)} {...rest}>
       {children}
     </Link>
   )

components/AnimatedNumber.tsx

@@ -34,7 +34,9 @@ export const AnimatedNumber: FC<Props> = ({
 
   const animationString = comma ? Math.abs(value).toLocaleString(locale || "en-US") : String(Math.abs(value))
 
-  const valuesArr = Array.from(animationString, Number).map((x, idx) => (isNaN(x) ? animationString[idx] : x))
+  const valuesArr: (number | string)[] = Array.from(animationString, Number).map((x, idx) =>
+    isNaN(x) ? animationString[idx] : x
+  ) as (number | string)[]
 
   const [numberHeight, setNumberHeight] = useState(0)
 
@@ -88,7 +90,7 @@ export const AnimatedNumber: FC<Props> = ({
                   transform: "translateY(0px)",
                 }}
                 to={{
-                  transform: `translateY(${-1 * (numberHeight * +valuesArr[index]) - numberHeight * 20})`,
+                  transform: `translateY(${-1 * (numberHeight * +(valuesArr[index] || 0)) - numberHeight * 20})`,
                 }}
                 config={setConfig(configs, n, index)}
               >