AeThex-Corporation/aethex-forge
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Update buttons and remove unused code from realm selector

Browse source 
Refactors the IsometricRealmSelector component by removing unused gradient code and updating CTA buttons to use the Button component. Also, enhances the Button component's ripple effect to correctly handle the `asChild` prop and ensure consistent behavior across all click events.

Replit-Commit-Author: Agent
Replit-Commit-Session-Id: 9203795e-937a-4306-b81d-b4d5c78c240e
Replit-Commit-Checkpoint-Type: intermediate_checkpoint
Replit-Commit-Event-Id: cc85e0aa-eae4-424c-8e21-ce55c6963530
Replit-Commit-Screenshot-Url: https://storage.googleapis.com/screenshot-production-us-central1/7c94b7a0-29c7-4f2e-94ef-44b2153872b7/9203795e-937a-4306-b81d-b4d5c78c240e/OuNSijY
Replit-Helium-Checkpoint-Created: true
This commit is contained in:
sirpiglr 2025-12-13 00:18:33 +00:00
parent e7f95b53dc
commit eea2856485
2 changed files with 33 additions and 40 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

27
client/components/IsometricRealmSelector.tsx
View file

@ -2,6 +2,7 @@ import { useState, useCallback, useEffect, useMemo } from "react";
import { motion, AnimatePresence } from "framer-motion";
import { useNavigate, Link } from "react-router-dom";
import IsometricRealmCard, { RealmData } from "./IsometricRealmCard";
import { Button } from "./ui/button";
function TypeWriter({ text, delay = 0 }: { text: string; delay?: number }) {
const [displayText, setDisplayText] = useState("");
@ -200,20 +201,6 @@ export default function IsometricRealmSelector() {
[navigate]
);
const backgroundGradient = `
radial-gradient(
ellipse 80% 50% at ${mousePosition.x * 100}% ${mousePosition.y * 100}%,
rgba(59, 130, 246, 0.08) 0%,
transparent 50%
),
radial-gradient(
ellipse 60% 40% at ${100 - mousePosition.x * 100}% ${100 - mousePosition.y * 100}%,
rgba(168, 85, 247, 0.06) 0%,
transparent 50%
),
linear-gradient(180deg, #030712 0%, #0f172a 50%, #030712 100%)
`;
return (
<div className="realm-selector">
{/* Scanline overlay */}
@ -266,8 +253,12 @@ export default function IsometricRealmSelector() {
learn, and bring ideas to life. Join thousands of developers, designers, and innovators.
</p>
<div className="hero-cta">
<Link to="/get-started" className="cta-primary">Get Started Free</Link>
<Link to="/downloads" className="cta-secondary">Download Desktop App</Link>
<Button size="lg" className="cta-primary" asChild>
<Link to="/get-started">Get Started Free</Link>
</Button>
<Button variant="outline" size="lg" className="cta-secondary" asChild>
<Link to="/downloads">Download Desktop App</Link>
</Button>
</div>
</motion.div>
@ -356,13 +347,13 @@ export default function IsometricRealmSelector() {
<span key={i} className="featured-feature">{feature}</span>
))}
</div>
<button
<Button
className="featured-cta"
onClick={() => handleRealmClick(realms[featuredIndex])}
>
Enter {realms[featuredIndex].label}
<span className="cta-arrow">→</span>
</button>
</Button>
</div>
</div>
<div className="featured-corner tl" />

46
client/components/ui/button.tsx
View file

@ -44,32 +44,34 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
const Comp = asChild ? Slot : "button";
const handleClick = (e: React.MouseEvent<HTMLButtonElement>) => {
// Create ripple effect
const button = e.currentTarget;
const rect = button.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const handleClick = (e: React.MouseEvent<HTMLElement>) => {
const target = e.currentTarget;
if (target instanceof HTMLElement) {
const rect = target.getBoundingClientRect();
const x = e.clientX - rect.left;
const y = e.clientY - rect.top;
const ripple = document.createElement("span");
ripple.style.position = "absolute";
ripple.style.borderRadius = "50%";
ripple.style.transform = "scale(0)";
ripple.style.animation = "ripple 0.6s linear";
ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
const ripple = document.createElement("span");
ripple.style.position = "absolute";
ripple.style.borderRadius = "50%";
ripple.style.transform = "scale(0)";
ripple.style.animation = "ripple 0.6s linear";
ripple.style.backgroundColor = "rgba(255, 255, 255, 0.3)";
ripple.style.pointerEvents = "none";
const size = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = size + "px";
ripple.style.left = x - size / 2 + "px";
ripple.style.top = y - size / 2 + "px";
const rippleSize = Math.max(rect.width, rect.height);
ripple.style.width = ripple.style.height = rippleSize + "px";
ripple.style.left = x - rippleSize / 2 + "px";
ripple.style.top = y - rippleSize / 2 + "px";
button.appendChild(ripple);
target.appendChild(ripple);
setTimeout(() => {
ripple.remove();
}, 600);
setTimeout(() => {
ripple.remove();
}, 600);
}
if (onClick) onClick(e);
if (onClick) onClick(e as React.MouseEvent<HTMLButtonElement>);
};
return (
@ -85,7 +87,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
onClick={asChild ? onClick : handleClick}
onClick={handleClick}
{...props}
/>
</>