move card order into inputProps

packages/docs/src/components/Demo/Demo.tsx

@@ -25,6 +25,7 @@ export const Demo: React.FC = () => {
 	const strokeColor = colorMode === 'dark' ? 'gray' : 'black';
 
 	const [isFullscreen, setIsFullscreen] = useState(false);
+	const [cardOrder, setCardOrder] = useState([0, 1, 2, 3]);
 
 	const playerWrapper: CSSProperties = {
 		border: '2px solid ' + strokeColor,
@@ -50,6 +51,10 @@ export const Demo: React.FC = () => {
 		};
 	}, [data]);
 
+	const updateCardOrder = (newCardOrder: number[]) => {
+		setCardOrder(newCardOrder);
+	};
+
 	return (
 		<div>
 			<br />
@@ -77,6 +82,8 @@ export const Demo: React.FC = () => {
 							onToggle: () => {
 								ref.current?.toggle();
 							},
+							cardOrder,
+							updateCardOrder,
 							...data,
 						}}
 						loop

packages/docs/src/remotion/HomepageVideo/Comp.tsx

@@ -61,6 +61,8 @@ type Props = {
 	readonly location: Location;
 	readonly trending: null | Trending;
 	readonly onToggle: () => void;
+	readonly cardOrder: number[];
+	readonly updateCardOrder: (newCardOrder: number[]) => void;
 };
 
 export const schema = z.object({
@@ -72,18 +74,18 @@ export const HomepageVideoComp: React.FC<z.infer<typeof schema> & Props> = ({
 	location,
 	trending,
 	onToggle,
+	cardOrder,
+	updateCardOrder,
 }) => {
-	const [state, setRerenders] = useState({
-		rerenders: 0,
-		indices: [0, 1, 2, 3],
-	});
+	const [rerenders, setRerenders] = useState(0);
 
-	const onUpdate = useCallback((newIndices: number[]) => {
-		setRerenders((i) => ({
-			indices: newIndices,
-			rerenders: i.rerenders + 1,
-		}));
-	}, []);
+	const onUpdate = useCallback(
+		(newIndices: number[]) => {
+			setRerenders(rerenders + 1);
+			updateCardOrder(newIndices);
+		},
+		[rerenders, updateCardOrder],
+	);
 
 	if (!location) {
 		return null;
@@ -100,9 +102,9 @@ export const HomepageVideoComp: React.FC<z.infer<typeof schema> & Props> = ({
 			}}
 		>
 			<Cards
-				key={state.rerenders}
+				key={rerenders}
 				onUpdate={onUpdate}
-				indices={state.indices}
+				indices={cardOrder}
 				theme={theme}
 				location={location}
 				trending={trending}