Press and outline styles for Periodic Table

HorusGoul · Dec 24, 2024 · 4ccec02 · 4ccec02
1 parent b0cb24b
commit 4ccec02
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 21 deletions.
diff --git a/apps/pwa/src/components/periodic-table/PeriodicTable.tsx b/apps/pwa/src/components/periodic-table/PeriodicTable.tsx
@@ -191,6 +191,7 @@ function PeriodicTable({ elementRenderer, className }: PeriodicTableProps) {
           allowRightClickPan: false,
           allowMiddleClickPan: false,
           velocityDisabled: true,
+          excluded: ["element"],
         }}
       >
         <TransformComponent

diff --git a/apps/pwa/src/components/pt-element/PtElementInfo.tsx b/apps/pwa/src/components/pt-element/PtElementInfo.tsx
@@ -1,6 +1,7 @@
 import { Element } from "#src/Element";
 import { useElements } from "#src/hooks/useElements";
 import { cn } from "#src/utils/styles";
+import { Button } from "react-aria-components";
 
 export interface PtElementInfoProps {
   element: Element;
@@ -11,37 +12,32 @@ function PtElementInfo({ element, onClick }: PtElementInfoProps) {
   const { getElementLocales } = useElements();
   const elementLocales = getElementLocales(element);
 
-  const onElementButtonClick = () => {
-    if (onClick) {
-      onClick(element);
-    }
-  };
-
   return (
-    <div
-      role="button"
-      onKeyDown={(e) => {
-        if (e.key === "Enter" || e.key === "Space") {
-          onElementButtonClick();
-        }
+    <Button
+      onPress={() => {
+        onClick?.(element);
       }}
-      onClick={onElementButtonClick}
       className={cn(
-        "relative block h-full min-h-[72px] w-full min-w-[72px] select-none p-2 font-semibold transition-none dark:!bg-accent-900/90",
+        "relative block h-full min-h-[72px] w-full min-w-[72px] select-none p-2 font-semibold transition-colors dark:!bg-accent-900/90",
         "element",
         element.group,
+        "group outline-none focus-visible:z-10 focus-visible:outline-current pressed:dark:!bg-accent-900/90",
       )}
     >
-      <div className="absolute text-left text-xs">{element.atomic}</div>
+      <div className="absolute inset-0 h-full w-full transition-transform [.group[data-pressed]_&]:scale-90">
+        <div className="absolute left-1 top-1 text-left text-xs">
+          {element.atomic}
+        </div>
 
-      <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl">
-        {element.symbol}
-      </div>
+        <div className="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 text-2xl">
+          {element.symbol}
+        </div>
 
-      <div className="absolute bottom-2 left-1/2 -translate-x-1/2 text-center text-[9px]">
-        {elementLocales.name}
+        <div className="absolute bottom-1 left-1/2 -translate-x-1/2 text-center text-[9px] tracking-tight">
+          {elementLocales.name}
+        </div>
       </div>
-    </div>
+    </Button>
   );
 }