2024-04-15 19:31:55 -07:00
|
|
|
import { Button } from "@/components/ui/button";
|
|
|
|
import { cn } from "@/lib/utils";
|
|
|
|
|
2024-04-16 13:40:25 -07:00
|
|
|
/**
|
|
|
|
* Props for this button.
|
|
|
|
*/
|
|
|
|
type MinecraftButtonProps = {
|
|
|
|
/**
|
|
|
|
* The class name to apply to this button.
|
|
|
|
*/
|
|
|
|
className?: string;
|
|
|
|
|
|
|
|
/**
|
|
|
|
* The children of this button.
|
|
|
|
*/
|
|
|
|
children: React.ReactNode;
|
|
|
|
};
|
|
|
|
|
2024-04-15 19:31:55 -07:00
|
|
|
/**
|
|
|
|
* A Minecraft styled button.
|
|
|
|
*
|
|
|
|
* @returns the button jsx
|
|
|
|
*/
|
|
|
|
const MinecraftButton = ({
|
|
|
|
className,
|
|
|
|
children,
|
|
|
|
...props
|
2024-04-16 13:40:25 -07:00
|
|
|
}: React.ButtonHTMLAttributes<HTMLButtonElement> &
|
|
|
|
MinecraftButtonProps): JSX.Element => (
|
2024-04-15 19:31:55 -07:00
|
|
|
<Button
|
|
|
|
className={cn(
|
|
|
|
"before:absolute before:-inset-x-5 before:rotate-90 before:w-9 before:h-1 before:bg-minecraft-green-1", // Left Green Bar
|
2024-04-16 05:42:14 -07:00
|
|
|
"after:absolute after:right-[-1.24rem] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar
|
2024-04-15 19:31:55 -07:00
|
|
|
"relative h-11 px-5 bg-minecraft-green-2 hover:opacity-85 hover:bg-minecraft-green-2 rounded-none tracking-wide font-semibold uppercase transition-all transform-gpu", // Styling
|
|
|
|
className
|
|
|
|
)}
|
|
|
|
variant="ghost"
|
|
|
|
style={{
|
|
|
|
// Above and below the button shadow
|
|
|
|
boxShadow:
|
2024-04-16 04:48:53 -07:00
|
|
|
"inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3))",
|
2024-04-15 19:31:55 -07:00
|
|
|
}}
|
|
|
|
{...props}
|
|
|
|
>
|
|
|
|
{children}
|
|
|
|
</Button>
|
|
|
|
);
|
|
|
|
export default MinecraftButton;
|