tw-in-js / twind-react Goto Github PK

import { style } from "twind/style";

const blockMixin = style({
  base: "block w-full",
  variants: {
    inline: "inline-block w-auto"
  }
});

const Button = const Button = styled("button", blockMixin, {
  base: `
    appearance-none border-none bg-transparent
    rounded-full px-2.5
  `,

  variants: {
    size: {
      sm: `text-sm h-6`,
      md: `text-base h-9`,
    },

    variant: {
      gray: `
        bg-gray-500
        hover:bg-gray-600
      `,
      primary: `
        text-white bg-purple-500
        hover:bg-purple-600
      `,
    },
    outlined: {
      true: `bg-transparent ring-1`,
    },
  },

  defaults: {
    variant: "gray",
    size: "sm",
  },

  matches: [
    {
      variant: "gray",
      outlined: true,
      use: `ring-gray-500`,
    },
    {
      variant: "primary",
      outlined: true,
      use: `text-purple-500 ring-gray-500 hover:text-white`,
    },
  ],
})

import { styled, tw } from "@twind/react";
import * as React from "react";

const BaseButton = styled("button", {
  base: tw`
  inline-flex items-center
  px-4 py-2
  border border-transparent
  text-sm font-medium
  rounded-md shadow-sm
  text-white bg-indigo-600
  hover:bg-indigo-700
  focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500
  `,
});

type BaseButtonProps = React.ComponentProps<typeof BaseButton>;

export type ButtonProps = BaseButtonProps & { icon?: React.ReactNode };

export const Button = (props: ButtonProps) => {
  const { icon, ...baseButtonProps } = props;

  return <BaseButton {...baseButtonProps}></BaseButton>;
};