Блог

 import React from "react";
import {
    Avatar,
    Box,
    Collapse,
    DrawerContent,
    DrawerOverlay,
    Flex,
    Icon,
    IconButton,
    Input,
    InputGroup,
    InputLeftElement,
    Text,
    useColorModeValue,
    useDisclosure,
    useColorMode,
    Button,
    Drawer,
} from "@chakra-ui/react";
import {AddIcon} from '@chakra-ui/icons';
import { FaBell, FaClipboardCheck, FaRss } from "react-icons/fa";
import { FaMoon, FaSun } from "react-icons/fa";
import { AiFillGift } from "react-icons/ai";
import { BsGearFill } from "react-icons/bs";
import { FiMenu, FiSearch } from "react-icons/fi";
import { HiCode, HiCollection } from "react-icons/hi";
import { MdHome, MdKeyboardArrowRight } from "react-icons/md";
import { BrowserRouter, Switch, Route,useRouteMatch } from 'react-router-dom';



import DonationBasedForm from '../../components/CreateDonationBased/CreateDonationBased'
import Campaigns from "../Campaigns/Campaigns";
import CreateCampaign from "../../components/CreateCampaign/CreateCampaign";
    
export default function Swibc() {
      const sidebar = useDisclosure();
      const integrations = useDisclosure();

      // Create campaign drawer hooks
      const { isOpen, onOpen, onClose } = useDisclosure();
      const btnRef = React.useRef();

      let { path, url } = useRouteMatch();
      const { toggleColorMode: toggleMode } = useColorMode();
      const SwitchIcon = useColorModeValue(FaMoon, FaSun);
      const NavItem = (props) => {
        const { icon, children, ...rest } = props;
        return (
          <Flex
            align="center"
            px="4"
            pl="4"
            py="3"
            cursor="pointer"
            color={useColorModeValue("inherit", "gray.400")}
            _hover={{
              bg: useColorModeValue("gray.100", "gray.900"),
              color: useColorModeValue("gray.900", "gray.200"),
            }}
            role="group"
            fontWeight="semibold"
            transition=".15s ease"
            {...rest}
          >
            {icon amp;amp; (
              <Icon
                mr="2"
                boxSize="4"
                as={icon}
              />
            )}
            {children}
          </Flex>
        );
      };
    
      const SidebarContent = (props) => (
        <Box
          as="nav"
          pos="fixed"
          top="0"
          left="0"
          zIndex="sticky"
          h="full"
          pb="10"
          overflowX="hidden"
          overflowY="auto"
          bg={useColorModeValue("white", "gray.800")}
          borderColor={useColorModeValue("inherit", "gray.700")}
          borderRightWidth="1px"
          w="60"
          {...props}
        >
          <Flex px="4" py="5" align="center">
            <Text
              fontSize="2xl"
              ml="2"
              color={useColorModeValue("brand.500", "white")}
              fontWeight="semibold"
            >
              cffp
            </Text>
          </Flex>
          <Flex
            direction="column"
            as="nav"
            fontSize="sm"
            color="gray.600"
            aria-label="Main Navigation"
          >
            <NavItem icon={MdHome}>Home</NavItem>
            <NavItem icon={FaRss}>Articles</NavItem>
            <NavItem icon={HiCollection}>Collections</NavItem>
            <NavItem icon={FaClipboardCheck}>Checklists</NavItem>
            <NavItem icon={HiCode} onClick={integrations.onToggle}>
              Integrations
              <Icon
                as={MdKeyboardArrowRight}
                ml="auto"
                transform={integrations.isOpen amp;amp; "rotate(90deg)"}
              />
            </NavItem>
            <Collapse in={integrations.isOpen}>
              <NavItem pl="12" py="2">
                Shopify
              </NavItem>
              <NavItem pl="12" py="2">
                Slack
              </NavItem>
              <NavItem pl="12" py="2">
                Zapier
              </NavItem>
            </Collapse>
            <NavItem icon={AiFillGift}>Changelog</NavItem>
            <NavItem icon={BsGearFill}>Settings</NavItem>
          </Flex>
        </Box>
      );
      return (
        <>
        <Box
          as="section"
          bg={useColorModeValue("gray.50", "gray.700")}
          minH="100vh"
        >
          <SidebarContent display={{ base: "none", md: "unset" }} />
          <Drawer
            isOpen={sidebar.isOpen}
            onClose={sidebar.onClose}
            placement="left"
          >
            <DrawerOverlay />
            <DrawerContent>
              <SidebarContent w="full" borderRight="none" />
            </DrawerContent>
          </Drawer>
          <Box ml={{ base: 0, md: 60 }} transition=".3s ease">
            <Flex
              as="header"
              align="center"
              justify="space-between"
              w="full"
              px="4"
              bg={useColorModeValue("white", "gray.800")}
              borderBottomWidth="1px"
              borderColor={useColorModeValue("inherit", "gray.700")}
              h="14"
            >
              <IconButton
                aria-label="Menu"
                display={{ base: "inline-flex", md: "none" }}
                onClick={sidebar.onOpen}
                icon={<FiMenu />}
                size="sm"
              />
              <InputGroup w="96" display={{ base: "none", md: "flex" }}>
                <InputLeftElement color="gray.500" children={<FiSearch />} />
                <Input placeholder="Search for articles..." />
              </InputGroup>
    
              <Flex align="center">
                <Button 
                  colorScheme="brand" 
                  size="sm" 
                  mr={[1,1,3]}
                  onClick={onOpen}
                  ref={btnRef}
                > 
                  Create <AddIcon ml={[1,1,2]} /> 
                </Button>
                <Avatar
                  mr="4"
                  size="sm"
                  name="anubra266"
                  src="https://avatars.githubusercontent.com/u/30869823?v=4"
                  cursor="pointer"
                />
                <Icon mr={4} ml={4} color="gray.500" as={SwitchIcon} cursor="pointer" onClick={toggleMode}/>
              </Flex>
            </Flex>
    
            <Box as="main" p="4">
              <Switch>
                    <Route path={path} exact>
                    <Campaigns />
                    </Route>
                    <Route path={`${path}/new`}>
                        <DonationBasedForm />
                    </Route>
              </Switch>
            </Box>
          </Box>
        </Box>
        <CreateCampaign onClose={onClose} isOpen={isOpen} btnRef={btnRef}/>
        </>
      );
    } 

 import React from 'react';
import {
    Drawer,
    DrawerContent,
    DrawerCloseButton,
    DrawerFooter,
    DrawerBody,
    DrawerHeader,
    Stack,
    Box,
    FormLabel,
    InputGroup,
    Input,
    InputLeftAddon,
    InputRightAddon,
    Textarea,
    Button,
    Select
} from '@chakra-ui/react';

const CreateCampaign = (props) => {
    return (
        <Drawer
            isOpen={props.isOpen}
            placement="right"
            onClose={props.onClose}
            size="xl"
        >
            <DrawerContent>
            <DrawerCloseButton />
            <DrawerHeader borderBottomWidth="1px">
                Create a new account
            </DrawerHeader>

            <DrawerBody>
                <Stack spacing="24px">
                <Box>
                    <FormLabel htmlFor="username">Name</FormLabel>
                    <Input
                    id="username"
                    placeholder="Please enter user name"
                    />
                </Box>

                <Box>
                    <FormLabel htmlFor="url">Url</FormLabel>
                    <InputGroup>
                    <InputLeftAddon>http://</InputLeftAddon>
                    <Input
                        type="url"
                        id="url"
                        placeholder="Please enter domain"
                    />
                    <InputRightAddon>.com</InputRightAddon>
                    </InputGroup>
                </Box>

                <Box>
                    <FormLabel htmlFor="owner">Select Owner</FormLabel>
                    <Select id="owner" defaultValue="segun">
                    <option value="segun">Segun Adebayo</option>
                    <option value="kola">Kola Tioluwani</option>
                    </Select>
                </Box>

                <Box>
                    <FormLabel htmlFor="desc">Description</FormLabel>
                    <Textarea id="desc" />
                </Box>
                </Stack>
            </DrawerBody>

            <DrawerFooter borderTopWidth="1px">
                <Button variant="outline" mr={3} onClick={props.onClose}>
                Cancel
                </Button>
                <Button colorScheme="blue">Submit</Button>
            </DrawerFooter>
            </DrawerContent>
        </Drawer>
    )
}

export default CreateCampaign;