Spaces:
Sleeping
Sleeping
File size: 3,628 Bytes
4c67d79 af71f44 4c67d79 fce499e 4a3842e fce499e 4c67d79 7d70895 4c67d79 6371c28 4c67d79 fce499e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 fce499e 4c67d79 8d694b6 4c67d79 fce499e 4c67d79 8d694b6 4c67d79 fce499e 4c67d79 4a3842e 4c67d79 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 |
'use client';
import { Button } from '@heroui/button';
import { Modal, ModalBody, ModalContent, ModalFooter, ModalHeader } from '@heroui/modal';
import { useDisclosure } from '@heroui/use-disclosure';
import { forwardRef, useImperativeHandle, useState } from 'react';
import { Index2Color } from './consts';
import { rotationController } from './rotation-controller';
export type StateModalRef = {
open: (state: Array<Array<number>>) => void;
};
export const StateModal = forwardRef<StateModalRef, unknown>((_, ref) => {
const [state, setState] = useState<Array<Array<number>>>([]);
const { isOpen, onOpen, onOpenChange } = useDisclosure();
useImperativeHandle(ref, () => ({
open: (state: Array<Array<number>>) => {
setState(state);
onOpen();
},
}));
const copy = () => {
navigator.clipboard.writeText(JSON.stringify(state));
};
return (
<Modal isOpen={isOpen} onOpenChange={onOpenChange} placement="center">
<ModalContent>
{(onClose) => (
<>
<ModalHeader>State</ModalHeader>
<ModalBody>
<div className="flex flex-col gap-2">
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Front</div>
<div className="font-mono">{JSON.stringify(state[0])}</div>
<div className="font-mono">[{state[0].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Back</div>
<div className="font-mono">{JSON.stringify(state[1])}</div>
<div className="font-mono">[{state[1].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Right</div>
<div className="font-mono">{JSON.stringify(state[2])}</div>
<div className="font-mono">[{state[2].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Left</div>
<div className="font-mono">{JSON.stringify(state[3])}</div>
<div className="font-mono">[{state[3].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Up</div>
<div className="font-mono">{JSON.stringify(state[4])}</div>
<div className="font-mono">[{state[4].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
<div className="flex gap-2 items-center">
<div className="text-sm w-24 font-mont">Down</div>
<div className="font-mono">{JSON.stringify(state[5])}</div>
<div className="font-mono">[{state[5].map((index) => Index2Color[index]).join(', ')}]</div>
</div>
</div>
</ModalBody>
<ModalFooter>
<Button color="danger" variant="light" size="sm" onPress={onClose}>
Close
</Button>
<Button color="primary" variant="light" size="sm" onPress={copy}>
Copy
</Button>
</ModalFooter>
</>
)}
</ModalContent>
</Modal>
);
});
StateModal.displayName = 'StateModal';
|