diff --git a/src/app/_components/mixed-orientation-demo.tsx b/src/app/_components/mixed-sorting-demo.tsx similarity index 89% rename from src/app/_components/mixed-orientation-demo.tsx rename to src/app/_components/mixed-sorting-demo.tsx index 4868560..36f60c1 100644 --- a/src/app/_components/mixed-orientation-demo.tsx +++ b/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> diff --git a/src/app/_components/vertical-sorting-demo.tsx b/src/app/_components/vertical-sorting-demo.tsx index 213ab25..8e59b7e 100644 --- a/src/app/_components/vertical-sorting-demo.tsx +++ b/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" diff --git a/src/app/page.tsx b/src/app/page.tsx index d183a80..5608e7f 100644 --- a/src/app/page.tsx +++ b/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> ) } diff --git a/src/components/ui/sortable.tsx b/src/components/ui/sortable.tsx index 68b4d73..d51dbb5 100644 --- a/src/components/ui/sortable.tsx +++ b/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}