refactor: comp

src/app/_components/mixed-orientation-demo.tsx → src/app/_components/mixed-sorting-demo.tsx

@@ -13,7 +13,7 @@ import {
 } from "@/components/ui/card"
 import { Sortable, SortableItem } from "@/components/ui/sortable"
 
-export function MixedOrientaionDemo() {
+export function MixedSortingDemo() {
   const [specialTricks, setSpecialTricks] = React.useState(
     dataConfig.speicalTricks
   )
@@ -37,7 +37,7 @@ export function MixedOrientaionDemo() {
           <div className="grid grid-cols-1 gap-4 sm:grid-cols-2 md:grid-cols-4">
             {specialTricks.map((item) => (
               <SortableItem key={item.id} value={item.id} asTrigger asChild>
-                <Card className="flex aspect-video items-center justify-center rounded-md bg-secondary hover:bg-accent">
+                <Card className="flex aspect-video cursor-auto items-center justify-center rounded-md bg-accent hover:bg-accent/80">
                   <CardHeader className="items-center">
                     <CardTitle>{item.name}</CardTitle>
                     <CardDescription>{item.points} points</CardDescription>

src/app/_components/vertical-sorting-demo.tsx

@@ -128,7 +128,7 @@ export function VerticalSortingDemo() {
                       <SortableDragHandle
                         variant="outline"
                         size="icon"
-                        className="size-8 shrink-0 cursor-grab"
+                        className="size-8 shrink-0"
                       >
                         <DragHandleDots2Icon
                           className="size-4"

src/app/page.tsx

@@ -1,13 +1,13 @@
 import { Shell } from "@/components/shell"
 
-import { MixedOrientaionDemo } from "./_components/mixed-orientation-demo"
+import { MixedSortingDemo } from "./_components/mixed-sorting-demo"
 import { VerticalSortingDemo } from "./_components/vertical-sorting-demo"
 
 export default function IndexPage() {
   return (
     <Shell>
       <VerticalSortingDemo />
-      <MixedOrientaionDemo />
+      <MixedSortingDemo />
     </Shell>
   )
 }

src/components/ui/sortable.tsx

@@ -311,7 +311,10 @@ const SortableDragHandle = React.forwardRef<
     <Button
       ref={composeRefs(ref)}
       data-state={isDragging ? "dragging" : undefined}
-      className={cn(className)}
+      className={cn(
+        "cursor-grab data-[state=dragging]:cursor-grabbing",
+        className
+      )}
       {...attributes}
       {...listeners}
       {...props}