textarea

styleschool · Feb 6, 2024 · 446afff · 446afff
1 parent 90e409c
commit 446afff
Showing 1 changed file with 36 additions and 17 deletions.
diff --git a/imports/panel.tsx b/imports/panel.tsx
@@ -1,6 +1,6 @@
 import React, { Dispatch, SetStateAction, useState } from 'react';
 import {
-  Box, Button, Center, Flex, HStack, Input, Square, Text,
+  Box, Button, Center, Flex, HStack, Input, Square, Text, Textarea,
 } from '@chakra-ui/react';
 import { MultiSelect } from 'chakra-multiselect';
 
@@ -47,30 +47,48 @@ export function Column({
                     }}
                 />}
             </Box>
-            <Box bg="gray.200" h="300px">
-                <Flex>
-                    {templateTabs.map(t => (
+            {!!index && (<>
+                <Box bg="gray.200" flex="0">
+                    <Flex>
+                        {templateTabs.map(t => (
+                            <Button
+                                variant={t === templateTab ? "solid" : 'outline'}
+                                colorScheme="gray"
+                                flex={1}
+                                onClick={() => setTemplateTab(t)}
+                            >{t}</Button>
+                        ))}
+                    </Flex>
+                </Box>
+                <Box bg="gray.200" h="300px" position="relative">
+                    <Textarea
+                        placeholder={`Template for generation of ${_lists[0][index - 1].list[selected[index - 1]]} with gpt.`}
+                        h="100%"
+                    />
+                    <Flex justify="end" p={3} position="absolute" bottom={0} right={0} zIndex={2}>
                         <Button
-                            variant={t === templateTab ? "solid" : 'outlined'}
-                            colorScheme="gray"
-                            flex={1}
-                            onClick={() => setTemplateTab(t)}
-                        >{t}</Button>
-                    ))}
-                </Flex>
-            </Box>
+                            variant={'outline'}
+                            colorScheme="white"
+                            size="sm"
+                            onClick={() => {
+                                confirm(`You sure you want to lost ${templateTab} of ${_lists[0][index - 1].list[selected[index - 1]]} with new generation?`);
+                            }}
+                        >regenerate</Button>
+                    </Flex>
+                </Box>
+            </>)}
             <Box flex='1' bg='white' overflowY="scroll">
                 {_list.map((l, i) => <Flex>
                     <Button
-                        variant={i === selected[index] ? 'solid' : 'outlined'} flex={1} p={3} w="100%"
-                        onClick={() => setSelected(selected.map((s, ii) => ii === index ? i : s))}
+                        variant={i === selected[index] ? 'solid' : 'outline'} flex={1} p={3} w="100%"
+                        onClick={() => setSelected([...selected.slice(0, index), i, -1])}
                     >{l}</Button>
                     <Button
                         flex={0} variant="outline"
                         onClick={() => {
                             if (confirm(`Sure delete ${l}?`)) {
                                 if (selected[index] === i) {
-                                    setSelected(selected.map((s, ii) => ii === index ? i - 1 || 0 : s));
+                                    setSelected([...selected.slice(0, index - 1), i - 1]);
                                 }
                                 _lists[1](_lists[0].map((l, ii) => ii === index ? { ...l, list: l.list.filter((f, iii) => iii !== i) } : l));
                             }
@@ -81,7 +99,7 @@ export function Column({
                     variant="outline" w={'100%'}
                     onClick={() => {
                         _lists[1](_lists[0].map((l, ii) => ii === index ? { ...l, list: [...l.list, 'new'] } : l));
-                        setSelected(selected.map((s, ii) => ii === index ? _lists[0][index].list.length : s));
+                        setSelected([...selected.slice(0, index - 1), _lists[0][index].list.length]);
                     }}
                 >+</Button>
             </Box>
@@ -99,7 +117,8 @@ export function Panel() {
 
     return <Box w="100vw" h="100vh" position="fixed" overflowX="scroll" background="gray.300">
         <HStack spacing={1} h="100%">
-            {_lists[0].map((l, i) => <Column _users={l.users} _list={l.list} _selected={_selected} index={i} _lists={_lists}/>)}
+            {(_selected[0].length ? _selected[0] : [0]).slice(0, _lists[0].length).map((s, ii) => <Column key={ii} _users={_lists[0][ii].users} _list={_lists[0][ii].list} _selected={_selected} index={ii} _lists={_lists}/>)}
+            {/* {_lists[0].map((l, i) => <Column _users={l.users} _list={l.list} _selected={_selected} index={i} _lists={_lists}/>)} */}
         </HStack>
     </Box>
 }