add ui sounds to button
This commit is contained in:
+1
-1
@@ -1,7 +1,7 @@
|
|||||||
{
|
{
|
||||||
"name": "@avocadi/ui",
|
"name": "@avocadi/ui",
|
||||||
"type": "module",
|
"type": "module",
|
||||||
"version": "0.2.6",
|
"version": "0.2.7",
|
||||||
"private": false,
|
"private": false,
|
||||||
"files": [
|
"files": [
|
||||||
"dist"
|
"dist"
|
||||||
|
|||||||
@@ -4,6 +4,7 @@ import { type MotionProps, motion } from "motion/react";
|
|||||||
import type * as React from "react";
|
import type * as React from "react";
|
||||||
import type { ComponentProps, FC } from "react";
|
import type { ComponentProps, FC } from "react";
|
||||||
import { cn } from "@/lib/utils";
|
import { cn } from "@/lib/utils";
|
||||||
|
import useInterfaceSound from "./hooks/useInterfaceSound";
|
||||||
|
|
||||||
const buttonVariants = cva(
|
const buttonVariants = cva(
|
||||||
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-color \
|
"inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-full text-sm font-medium transition-color \
|
||||||
@@ -44,6 +45,9 @@ function Button({
|
|||||||
variant,
|
variant,
|
||||||
size,
|
size,
|
||||||
asChild = false,
|
asChild = false,
|
||||||
|
onClick,
|
||||||
|
onMouseEnter,
|
||||||
|
onMouseLeave,
|
||||||
...props
|
...props
|
||||||
}: React.ComponentProps<"button"> &
|
}: React.ComponentProps<"button"> &
|
||||||
VariantProps<typeof buttonVariants> & {
|
VariantProps<typeof buttonVariants> & {
|
||||||
@@ -51,10 +55,20 @@ function Button({
|
|||||||
}) {
|
}) {
|
||||||
const Comp = asChild ? Slot : "button";
|
const Comp = asChild ? Slot : "button";
|
||||||
|
|
||||||
|
const { play } = useInterfaceSound();
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Comp
|
<Comp
|
||||||
data-slot="button"
|
data-slot="button"
|
||||||
className={cn(buttonVariants({ variant, size, className }))}
|
className={cn(buttonVariants({ variant, size, className }))}
|
||||||
|
onClick={(e) => {
|
||||||
|
onClick?.(e);
|
||||||
|
play({ id: "click1" });
|
||||||
|
}}
|
||||||
|
onMouseEnter={(e) => {
|
||||||
|
play({ id: "click2" });
|
||||||
|
onMouseEnter?.(e);
|
||||||
|
}}
|
||||||
{...props}
|
{...props}
|
||||||
/>
|
/>
|
||||||
);
|
);
|
||||||
|
|||||||
Reference in New Issue
Block a user