36 lines
1.0 KiB
TypeScript
36 lines
1.0 KiB
TypeScript
|
import { Button } from "@/components/ui/button";
|
||
|
import { cn } from "@/lib/utils";
|
||
|
|
||
|
/**
|
||
|
* A Minecraft styled button.
|
||
|
*
|
||
|
* @returns the button jsx
|
||
|
*/
|
||
|
const MinecraftButton = ({
|
||
|
className,
|
||
|
children,
|
||
|
...props
|
||
|
}: Readonly<{
|
||
|
className?: string;
|
||
|
children: React.ReactNode;
|
||
|
}>): JSX.Element => (
|
||
|
<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
|
||
|
"after:absolute after:inset-x-[91.5%] after:rotate-90 after:w-9 after:h-1 after:bg-minecraft-green-1", // Right Green Bar
|
||
|
"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:
|
||
|
"inset 0 -4px 0 hsl(var(--minecraft-green-1)), inset 0 4px 0 hsl(var(--minecraft-green-3));",
|
||
|
}}
|
||
|
{...props}
|
||
|
>
|
||
|
{children}
|
||
|
</Button>
|
||
|
);
|
||
|
export default MinecraftButton;
|