Skip to content

Instantly share code, notes, and snippets.

@hellokaton

hellokaton/button.tsx

Last active February 18, 2025 02:17
Show Gist options
  • Save hellokaton/62e21a86c9ee4c36ce97f7e0ebfe58ac to your computer and use it in GitHub Desktop.
Save hellokaton/62e21a86c9ee4c36ce97f7e0ebfe58ac to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. hellokaton revised this gist Feb 18, 2025. 1 changed file with 1 addition and 1 deletion.
    2 changes: 1 addition & 1 deletion button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -6,7 +6,7 @@ import { forwardRef } from "react";
    export type ShareButtonProps = ButtonProps;

    // 创建新的Button组件，继承原有功能
    export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    export const Button = forwardRef<HTMLButtonElement, ShareButtonProps>(
    ({ className, ...props }, ref) => (
    <BaseButton
    ref={ref}
  2. hellokaton revised this gist Feb 18, 2025. 1 changed file with 16 additions and 23 deletions.
    39 changes: 16 additions & 23 deletions button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -1,29 +1,22 @@
    import {
    Button as BaseButton,
    type ButtonProps,
    } from "@/components/ui/button";
    import { Button as BaseButton, type ButtonProps } from "@/components/ui/button";
    import { cn } from "@/lib/utils";
    import * as React from "react";
    import { forwardRef } from "react";

    // 扩展原有的ButtonProps类型
    export type ShareButtonProps = ButtonProps
    export type ShareButtonProps = ButtonProps;

    // 创建新的Button组件，继承原有功能
    const Button = React.forwardRef<HTMLButtonElement, ShareButtonProps>(
    ({ className, ...props }, ref) => {
    return (
    <BaseButton
    ref={ref}
    className={cn(
    // 添加默认阴影效果
    "shadow-lg shadow-black/10 hover:shadow-xl hover:shadow-black/20 transition-shadow duration-200",
    className
    )}
    {...props}
    />
    );
    }
    export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
    ({ className, ...props }, ref) => (
    <BaseButton
    ref={ref}
    className={cn(
    // 添加默认阴影效果
    "shadow-lg shadow-black/10 hover:shadow-xl hover:shadow-black/20 transition-shadow duration-200",
    className
    )}
    {...props}
    />
    )
    );
    Button.displayName = "ShareButton";

    export { Button };
    Button.displayName = "ShareButton";
  3. hellokaton created this gist Feb 18, 2025.
    29 changes: 29 additions & 0 deletions button.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,29 @@
    import {
    Button as BaseButton,
    type ButtonProps,
    } from "@/components/ui/button";
    import { cn } from "@/lib/utils";
    import * as React from "react";

    // 扩展原有的ButtonProps类型
    export type ShareButtonProps = ButtonProps

    // 创建新的Button组件，继承原有功能
    const Button = React.forwardRef<HTMLButtonElement, ShareButtonProps>(
    ({ className, ...props }, ref) => {
    return (
    <BaseButton
    ref={ref}
    className={cn(
    // 添加默认阴影效果
    "shadow-lg shadow-black/10 hover:shadow-xl hover:shadow-black/20 transition-shadow duration-200",
    className
    )}
    {...props}
    />
    );
    }
    );
    Button.displayName = "ShareButton";

    export { Button };
    10 changes: 10 additions & 0 deletions usage.tsx
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,10 @@
    import React from 'react'
    import {Button} from "@/components/share/button";

    export const Usage = () => {
    return (
    <div>
    <Button>Hello World</Button>
    </div>
    )
    }