style(demo): fix centering

ecklf · Jan 19, 2023 · d0911ae · d0911ae
1 parent 58c6b63
commit d0911ae
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 12 deletions.
diff --git a/demo/components/context-menu.tsx b/demo/components/context-menu.tsx
@@ -15,6 +15,7 @@ import {
 } from "@radix-ui/react-icons";
 import cx from "classnames";
 import React, { ReactNode, useState } from "react";
+import Button from "./shared/button";
 
 interface RadixMenuItem {
   label: string;
@@ -77,10 +78,8 @@ const ContextMenu = (props: Props) => {
   return (
     <div>
       <ContextMenuPrimitive.Root>
-        <ContextMenuPrimitive.Trigger className="inline-flex w-36 items-center justify-center rounded-md border-2 border-dashed border-gray-500 bg-white px-3 py-4 dark:border-gray-300 dark:bg-gray-800">
-          <span className="select-none text-sm font-medium text-gray-700 dark:text-gray-100">
-            Right Click
-          </span>
+        <ContextMenuPrimitive.Trigger asChild>
+          <Button>Right Click</Button>
         </ContextMenuPrimitive.Trigger>
 
         <ContextMenuPrimitive.Portal>

diff --git a/demo/pages/index.tsx b/demo/pages/index.tsx
@@ -30,11 +30,6 @@ import ToggleGroup from "../components/toggle-group";
 import Toolbar from "../components/toolbar";
 import Tooltip from "../components/tooltip";
 import { CommandMenu } from "../components/shared/command-menu";
-import {
-  QuestionMarkCircledIcon,
-  QuestionMarkIcon,
-  SunIcon,
-} from "@radix-ui/react-icons";
 import cx from "classnames";
 import { QuestionMarkCircleIcon } from "@heroicons/react/24/outline";
 
@@ -125,7 +120,6 @@ const RADIX_COMPONENTS: RadixComponent[] = [
   {
     label: "Hover Card",
     link: `${REPO_URL}/components/hover-card.tsx`,
-    center: true,
     component: <HoverCard />,
   },
   {
@@ -199,7 +193,6 @@ const RADIX_COMPONENTS: RadixComponent[] = [
   {
     label: "Toast",
     link: `${REPO_URL}/components/toast.tsx`,
-    center: true,
     component: (
       <div>
         <Toast />
@@ -403,8 +396,9 @@ const Demo = () => {
       />
 
       <div className="mx-auto grid w-full max-w-screen-2xl grid-cols-1 gap-4 px-4 py-8 md:gap-6 md:px-6 lg:grid-cols-2">
-        {RADIX_COMPONENTS.map(({ label, link, component }, i) => (
+        {RADIX_COMPONENTS.map(({ label, link, component, center }, i) => (
           <DemoCard
+            variant={center && DemoCard.variant.JustifyCenter}
             key={`${label}-${i}`}
             data={{
               title: label,