CreateFormCTA.tsx
1 month ago
CreateWithAI.tsx
1 month ago
Main.tsx
1 month ago
PluginStatus.tsx
1 month ago
Sidebar.tsx
1 month ago
TemplateList.tsx
1 month ago
TemplatesSkeleton.tsx
4 months ago
Sidebar.tsx
126 lines
| 1 | import React from "react"; |
| 2 | import { Box, VStack, HStack, Text, Icon } from "@chakra-ui/react"; |
| 3 | import { LuSparkles } from 'react-icons/lu'; |
| 4 | import { __ } from '@wordpress/i18n'; |
| 5 | |
| 6 | interface SidebarProps { |
| 7 | categories: { name: string; count: number }[]; |
| 8 | selectedCategory: string; |
| 9 | onCategorySelect: (category: string) => void; |
| 10 | onRequestTemplate?: () => void; |
| 11 | } |
| 12 | |
| 13 | const Sidebar: React.FC<SidebarProps> = React.memo(({ categories, selectedCategory, onCategorySelect, onRequestTemplate }) => { |
| 14 | const favorites = categories.find(cat => cat.name === 'Favorites'); |
| 15 | |
| 16 | const orderedCategories = favorites && favorites.count > 0 |
| 17 | ? [favorites, ...categories.filter(cat => cat.name !== 'Favorites')] |
| 18 | : categories; |
| 19 | |
| 20 | return ( |
| 21 | <Box display="flex" flexDirection="column"> |
| 22 | {/* Categories label */} |
| 23 | <Text |
| 24 | fontSize="11px" |
| 25 | fontWeight="600" |
| 26 | color="#9a9a9a" |
| 27 | textTransform="uppercase" |
| 28 | letterSpacing="0.12em" |
| 29 | mb="2" |
| 30 | px="2" |
| 31 | pb="3" |
| 32 | margin="0 0 8px 0" |
| 33 | > |
| 34 | {__("Categories", "everest-forms")} |
| 35 | </Text> |
| 36 | |
| 37 | {/* Category list */} |
| 38 | <VStack align="stretch" spacing="0.5"> |
| 39 | {orderedCategories.map((category) => { |
| 40 | const isActive = selectedCategory === category.name; |
| 41 | return ( |
| 42 | <HStack |
| 43 | key={category.name} |
| 44 | py="12px" |
| 45 | px="3" |
| 46 | bg={isActive ? "rgba(117,69,187,0.1)" : "transparent"} |
| 47 | _hover={{ bg: isActive ? "rgba(117,69,187,0.1)" : "#f8fafc" }} |
| 48 | borderRadius="8px" |
| 49 | cursor="pointer" |
| 50 | justify="space-between" |
| 51 | onClick={() => onCategorySelect(category.name)} |
| 52 | transition="background 0.15s" |
| 53 | > |
| 54 | <Text |
| 55 | color={isActive ? "#7545BB" : "#383838"} |
| 56 | fontSize="14px" |
| 57 | fontWeight={isActive ? "500" : "400"} |
| 58 | margin="0" |
| 59 | > |
| 60 | {category.name} |
| 61 | </Text> |
| 62 | <Text |
| 63 | fontSize="12px" |
| 64 | color={isActive ? "rgba(117,69,187,0.7)" : "#999999"} |
| 65 | margin="0" |
| 66 | > |
| 67 | {category.count} |
| 68 | </Text> |
| 69 | </HStack> |
| 70 | ); |
| 71 | })} |
| 72 | </VStack> |
| 73 | |
| 74 | {/* Can't find a template? CTA */} |
| 75 | <Box |
| 76 | mt="20px" |
| 77 | borderRadius="12px" |
| 78 | border="1px solid #e2e8f0" |
| 79 | bgGradient="linear(to-br, rgba(117,69,187,0.06), rgba(117,69,187,0.02))" |
| 80 | p="16px" |
| 81 | > |
| 82 | <Text |
| 83 | fontSize="14px" |
| 84 | fontWeight="600" |
| 85 | color="#0e0e0e" |
| 86 | margin="0 0 4px 0" |
| 87 | > |
| 88 | {__("Can't find a template?", "everest-forms")} |
| 89 | </Text> |
| 90 | <Text |
| 91 | fontSize="12px" |
| 92 | color="#6b6b6b" |
| 93 | lineHeight="1.5" |
| 94 | margin="0 0 12px 0" |
| 95 | > |
| 96 | {__("Request a custom template built for your needs.", "everest-forms")} |
| 97 | </Text> |
| 98 | <Box |
| 99 | as="button" |
| 100 | width="100%" |
| 101 | display="inline-flex" |
| 102 | alignItems="center" |
| 103 | justifyContent="center" |
| 104 | gap="6px" |
| 105 | height="36px" |
| 106 | borderRadius="8px" |
| 107 | bg="#7545BB" |
| 108 | color="white" |
| 109 | fontSize="13px" |
| 110 | fontWeight="500" |
| 111 | border="none" |
| 112 | cursor="pointer" |
| 113 | onClick={() => onRequestTemplate && onRequestTemplate()} |
| 114 | _hover={{ bg: "rgba(117,69,187,0.88)" }} |
| 115 | transition="background 0.2s" |
| 116 | > |
| 117 | <Icon as={LuSparkles} boxSize="3.5" /> |
| 118 | {__("Request Template", "everest-forms")} |
| 119 | </Box> |
| 120 | </Box> |
| 121 | </Box> |
| 122 | ); |
| 123 | }); |
| 124 | |
| 125 | export default Sidebar; |
| 126 |