Use class-variance-authority in Next.js example

examples/next/package.json

@@ -12,11 +12,11 @@
     "vercel": "pnpm build"
   },
   "dependencies": {
-    "@joebell/cx": "0.1.0",
     "@plaiceholder/next": "workspace:*",
     "@plaiceholder/tailwindcss": "workspace:*",
     "@tailwindcss/aspect-ratio": "0.2.0",
     "blurhash": "1.1.4",
+    "class-variance-authority": "0.2.2",
     "glob": "8.0.3",
     "next": "12.1.6",
     "plaiceholder": "workspace:*",

examples/next/src/components/icons.tsx

@@ -1,11 +1,11 @@
-import { cx } from "@/styles";
+import { cva } from "class-variance-authority";
 
-const iconClassName = (className) => cx("w-6", "h-6", className);
+const icon = cva(["w-6", "h-6"]);
 
 export interface IconProps extends React.FC<JSX.IntrinsicElements["svg"]> {}
 
 export const IconTwitter: IconProps = ({ className, ...props }) => (
-  <svg viewBox="0 0 24 24" className={iconClassName(className)} {...props}>
+  <svg viewBox="0 0 24 24" className={icon({ class: className })} {...props}>
     <g>
       <path
         fill="currentColor"
@@ -17,7 +17,7 @@ export const IconTwitter: IconProps = ({ className, ...props }) => (
 
 export const IconGitHub: IconProps = ({ className, ...props }) => (
   <svg
-    className={iconClassName(className)}
+    className={icon({ class: className })}
     xmlns="http://www.w3.org/2000/svg"
     viewBox="0 0 17 16"
     fill="none"

examples/next/src/components/image-grid.tsx

@@ -1,35 +1,38 @@
-import { cx } from "@/styles";
+import type * as CVA from "class-variance-authority";
+import { cva } from "class-variance-authority";
+import React from "react";
 
-export interface IImageGridProps {
-  columns?: 2 | 3;
-}
+const imageGrid = cva(
+  ["grid", "grid-cols-1", "sm:grid-cols-2", "gap-4", "mt-8"],
+  {
+    variants: { columns: { 2: null, 3: "md:grid-cols-3" } },
+    defaultVariants: { columns: 3 },
+  }
+);
+
+export interface ImageGridProps
+  extends React.HTMLAttributes<HTMLUListElement>,
+    CVA.VariantProps<typeof imageGrid> {}
 
-export const ImageGrid: React.FC<IImageGridProps> = ({
+export const ImageGrid: React.FC<ImageGridProps> = ({
+  className,
   columns = 3,
   ...props
-}) => (
-  <ul
-    className={cx(
-      "grid",
-      "grid-cols-1",
-      [2, 3].includes(columns) && "sm:grid-cols-2",
-      [3].includes(columns) && "md:grid-cols-3",
-      "gap-4",
-      "mt-8"
-    )}
-    {...props}
-  />
-);
+}) => <ul className={imageGrid({ class: className, columns })} {...props} />;
 
-export const ImageGridItem = (props) => (
-  <li
-    className={cx(
-      "relative",
-      "block",
-      "overflow-hidden",
-      // See src/styles/index.css
-      "next-image"
-    )}
-    {...props}
-  />
-);
+const imageGridItem = cva([
+  "relative",
+  "block",
+  "overflow-hidden",
+  // See src/styles/index.css
+  "next-image",
+]);
+
+export interface ImageGridItemProps
+  extends React.HTMLAttributes<HTMLLIElement>,
+    CVA.VariantProps<typeof imageGridItem> {}
+
+export const ImageGridItem: React.FC<ImageGridItemProps> = ({
+  className,
+  ...props
+}) => <li className={imageGridItem({ class: className })} {...props} />;

examples/next/src/components/layout.tsx

@@ -1,7 +1,7 @@
 import * as React from "react";
 import NextLink from "next/link";
 import { IconGitHub, IconTwitter } from "@/components/icons";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { config } from "@/config";
 import { Head } from "./head";
 

examples/next/src/pages/blurhash/multiple.tsx

@@ -5,7 +5,7 @@ import { getPlaiceholder } from "plaiceholder";
 import { BlurhashCanvas } from "react-blurhash";
 import { Layout } from "@/components/layout";
 import { config } from "@/config";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { getAllUnsplashImagePaths } from "@/lib/images";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 

examples/next/src/pages/blurhash/single.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { getPlaiceholder } from "plaiceholder";
 import { BlurhashCanvas } from "react-blurhash";
 import { config } from "@/config";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
 

examples/next/src/pages/css/multiple.tsx

@@ -4,7 +4,7 @@ import Image from "next/image";
 import { getPlaiceholder } from "plaiceholder";
 import { config } from "@/config";
 import { getAllUnsplashImagePaths } from "@/lib/images";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { Layout } from "@/components/layout";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 

examples/next/src/pages/css/single.tsx

@@ -3,7 +3,7 @@ import { InferGetStaticPropsType } from "next";
 import Image from "next/image";
 import { getPlaiceholder } from "plaiceholder";
 import { config } from "@/config";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
 

examples/next/src/pages/index.tsx

@@ -2,7 +2,7 @@ import * as React from "react";
 import { InferGetStaticPropsType } from "next";
 import Link from "next/link";
 import { getPlaiceholder } from "plaiceholder";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 import { Layout } from "@/components/layout";
 import { config } from "@/config";
 import { getAllUnsplashImagePaths } from "@/lib/images";

examples/next/src/pages/tailwind/multiple.tsx

@@ -6,7 +6,7 @@ import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";
 import { config } from "@/config";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 
 const getImagesFromPlaiceholders = (...classNames) =>
   Promise.all(

examples/next/src/pages/tailwind/single.tsx

@@ -6,7 +6,7 @@ import { extractImgSrc } from "@plaiceholder/tailwindcss/utils";
 import { config } from "@/config";
 import { ImageGrid, ImageGridItem } from "@/components/image-grid";
 import { Layout } from "@/components/layout";
-import { cx } from "@/styles";
+import { cx } from "class-variance-authority";
 
 export const getStaticProps = async () => {
   const plaiceholder = "plaiceholder-[/assets/keila-joa@578.jpg]";