omswebsite-backups/oms-website-nextjs
1
0
Fork 0
mirror of https://github.com/OwethuManagedServices/oms-website-nextjs.git synced 2026-02-04 11:37:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Home page completed

Browse Source
This commit is contained in:
libertyoms
2025-04-20 18:19:43 +02:00
parent 211cb3fc6f
commit 5eb60015cc
24 changed files with 1412 additions and 428 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
components/ui/Button.tsx
View File

@ -4,7 +4,7 @@ import Link from "next/link";
interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElement> {
href?: string;
variant?: "primary" | "secondary" | "outline";
variant?: "primary" | "secondary" | "outline" | "ghost" | "destructive"; // Added more variants
size?: "sm" | "md" | "lg";
children: React.ReactNode;
className?: string;
@ -18,20 +18,25 @@ const Button: React.FC<ButtonProps> = ({
className = "",
...props
}) => {
// Base styles including focus ring using semantic vars
const baseStyle =
"inline-flex items-center justify-center rounded-md font-semibold transition-all duration-300 focus:outline-none focus:ring-2 focus:ring-offset-2";
"inline-flex items-center justify-center rounded-lg font-semibold transition-colors duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background";
// Variant styles using semantic vars (Tailwind classes generated via @theme)
const variantStyles = {
primary: "bg-primary text-dark hover:bg-primary/90 focus:ring-primary/50",
secondary: "bg-dark text-light hover:bg-gray-800 focus:ring-dark/50",
primary: "bg-primary text-primary-foreground hover:bg-primary/90", // bg-primary generated from --primary
secondary: "bg-secondary text-secondary-foreground hover:bg-secondary/80",
outline:
"border border-primary text-primary hover:bg-primary hover:text-dark focus:ring-primary/50",
"border border-border bg-transparent hover:bg-accent hover:text-accent-foreground",
ghost: "hover:bg-accent hover:text-accent-foreground",
destructive:
"bg-destructive text-destructive-foreground hover:bg-destructive/90",
};
const sizeStyles = {
sm: "px-4 py-2 text-sm",
md: "px-6 py-3 text-base",
lg: "px-8 py-4 text-lg",
sm: "px-3 py-1.5 text-sm",
md: "px-4 py-2 text-base",
lg: "px-6 py-3 text-lg",
};
const combinedClassName = `${baseStyle} ${variantStyles[variant]} ${sizeStyles[size]} ${className}`;
@ -45,7 +50,7 @@ const Button: React.FC<ButtonProps> = ({
}
return (
<button className={combinedClassName} {...props}>
<button type="button" className={combinedClassName} {...props}>
{children}
</button>
);