Swap
Switches between two views in place.
Preview
Loading...
import { Swap } from "@/components/ui/Swap";
export function SwapDemo() {
return (
<Swap>
<div className="flex h-8 items-center rounded-sm bg-accent-3 px-1">Color scale</div>
<div className="flex h-8 items-center rounded-sm bg-gray-3 px-1">Type scale</div>
</Swap>
)
}Installation
Make sure that namespace is set in your component.json file. Namespace docs: Learn more about namespaces
pnpm dlx shadcn@latest add @aura/swapManual
Copy and paste the button component into your components/ui/Button.tsx file.
/**
* @description Displays a button or a component that looks like a button.
*/
import * as React from "react";
import { Slot } from "@radix-ui/react-slot";
import { cva, type VariantProps } from "class-variance-authority";
import { cn } from "@/utils/class-names";
import { Spinner } from "@/components/ui/Spinner";
const buttonVariants = cva("button", {
variants: {
variant: {
default: "button-fill",
fill: "button-fill",
pill: "button-pill border border-gray-6 text-gray-11 bg-gray-2 hover:bg-gray-3",
link: "button-link",
menu: "button-menu",
},
size: {
default: "h-4",
xs: "h-2.5",
sm: "h-3",
md: "h-4",
lg: "h-5",
xl: "h-6",
icon: "w-3 h-3 p-0",
"icon-md": "w-4 h-4 p-0",
},
},
defaultVariants: {
variant: "default",
size: "default",
},
});
interface ButtonProps
extends React.ComponentProps<"button">,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
isDisabled?: boolean;
isLoading?: boolean;
isLoadingText?: string | React.ReactNode;
mode?: VariantProps<typeof buttonVariants>["variant"];
label?: string | React.ReactNode;
}
const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
(props: ButtonProps, ref) => {
const {
className,
variant,
mode,
size,
asChild = false,
isDisabled,
isLoading,
isLoadingText,
children,
label,
...rest
} = props;
const Comp = asChild ? Slot : "button";
const disabled = isDisabled || isLoading || props.disabled;
const effectiveVariant = variant ?? mode;
return (
<Comp
data-slot="button"
className={cn(
buttonVariants({ variant: effectiveVariant, size, className }),
disabled && "opacity-50 cursor-not-allowed"
)}
ref={ref}
disabled={disabled}
{...rest}
>
{asChild ? (
children
) : (
<>
{isLoading && isLoadingText ? (
isLoadingText
) : (
<>
{isLoading ? <Spinner /> : null}
{label}
{children}
</>
)}
</>
)}
</Comp>
);
}
);
Button.displayName = "Button";
export { Button, buttonVariants };
export type { ButtonProps };
export default Button;
Copy and paste the class names utility into your utils/class-names.ts file.
import { clsx, type ClassValue } from "clsx"
import { twMerge } from "tailwind-merge"
export function cn(...inputs: ClassValue[]) {
return twMerge(clsx(inputs))
}
Copy and paste the Swap component into your components/ui/Swap.tsx file.
"use client";
import * as React from "react";
import { cn } from "@/utils/class-names";
import { Button } from "@/components/ui/Button";
function Swap({
className,
children,
label = "Swap",
}: {
className?: string;
children: React.ReactNode;
label?: string;
}) {
const items = React.Children.toArray(children);
const [index, setIndex] = React.useState(0);
const current = items.length ? index % items.length : 0;
return (
<div data-slot="swap" className={cn("flex flex-col items-start gap-0.5", className)}>
<div className="relative min-h-8 w-full">
{items.map((item, itemIndex) => (
<div
key={itemIndex}
className={cn(
"transition duration-300 motion-reduce:transition-none",
itemIndex === current ? "opacity-100" : "pointer-events-none absolute inset-0 opacity-0",
)}
aria-hidden={itemIndex === current ? undefined : true}
>
{item}
</div>
))}
</div>
<Button
type="button"
variant="pill"
size="sm"
aria-label={label}
onClick={() => setIndex((value) => (items.length ? (value + 1) % items.length : 0))}
>
{label}
</Button>
</div>
);
}
export { Swap };