| Server IP : 104.21.32.1 / Your IP : 216.73.216.145 Web Server : LiteSpeed System : Linux premium151.web-hosting.com 4.18.0-553.44.1.lve.el8.x86_64 #1 SMP Thu Mar 13 14:29:12 UTC 2025 x86_64 User : tempvsty ( 647) PHP Version : 8.0.30 Disable Function : NONE MySQL : OFF | cURL : ON | WGET : ON | Perl : ON | Python : ON | Sudo : OFF | Pkexec : OFF Directory : /home/tempvsty/./eaabusiness.com/wp-content/plugins/everest-forms/src/templates/ |
Upload File : |
import { __ } from '@wordpress/i18n';
import React, { useState, useMemo } from "react";
import {
ChakraProvider,
Box,
HStack,
Text,
Tabs,
TabList,
Tab,
Button,
Icon,
Divider,
VStack,
Heading,
} from "@chakra-ui/react";
import Main from "./components/Main";
const EVFIcon = (props) => (
<Icon viewBox="0 0 24 24" {...props}>
<path
fill="#7e3bd0"
d="M21.23,10H17.79L16.62,8h3.46ZM17.77,4l1.15,2H15.48L14.31,4Zm-15,16L12,4l5.77,10H10.85L12,12h2.31L12,8,6.23,18H20.08l1.16,2Z"
/>
</Icon>
);
const TabFilters = ({ onTabChange }) => {
const filters = useMemo(() => [__("All", "everest-forms"), __("Free", "everest-forms"), __("Premium", "everest-forms")], []);
return (
<Tabs variant="unstyled" ml="auto" onChange={onTabChange}>
<TabList>
{filters.map((label) => (
<Tab
key={label}
_selected={{
color: "purple.500",
fontWeight: "bold",
borderBottom: "2px solid",
borderColor: "purple.500",
}}
fontSize={{ base: "sm", md: "md", lg: "lg" }}
px={{ base: 1, md: 2 }} // Add horizontal padding to tabs
>
{label}
</Tab>
))}
</TabList>
</Tabs>
);
};
const App = () => {
const [selectedTab, setSelectedTab] = useState<string>(__("All", "everest-forms"));
// Handle tab changes
const handleTabChange = (index: number) => {
const filters = [__("All", "everest-forms"), __("Free", "everest-forms"), __("Premium", "everest-forms")];
setSelectedTab(filters[index]);
};
// Handle refresh button click
const handleRefreshTemplates = () => {
const url = new URL(window.location.href);
url.searchParams.set('refresh', Date.now().toString());
window.location.href = url.toString();
};
return (
<ChakraProvider>
<Box bg="white" margin="20px" padding="0px 24px 50px" boxShadow="0px 4px 50px rgba(0, 0, 0, 0.06)">
<HStack
spacing={{ base: 4, md: 6 }}
align="center"
mb={0}
borderBottom="1px solid #CDD0D8"
padding="20px 10px"
direction={{ base: "column", md: "row" }}
>
<EVFIcon boxSize="12" />
<Divider orientation="vertical" height="40px" borderColor="#CDD0D8" />
<Text fontSize="18px" fontWeight="semibold" lineHeight="26px" color="#383838" textAlign={{ base: "center", md: "left" }} margin="0px">
{__("Add New Form", "everest-forms")}
</Text>
<Button
colorScheme="purple"
variant="outline"
onClick={handleRefreshTemplates}
width={{ base: "full", md: "auto" }}
display={{ base: "none", md: "inline-flex" }}
fontSize= "15px"
lineHeight="20px"
padding="8px 16px"
height="auto"
borderRadius="4px"
>
{__("Refresh Templates", "everest-forms")}
</Button>
<TabFilters onTabChange={handleTabChange} />
</HStack>
{/* Main Content Area */}
<Box bg="white" >
<VStack align="start" padding="20px 0px 32px" gap="12px">
<Heading as="h1" fontSize="24px"lineHeight="34px" letterSpacing="0.4px" fontWeight="semibold" m={0}>
{__("Select a Template", "everest-forms")}
</Heading>
<Text fontSize="14px" lineHeight="24px" color="#4D4D4D" fontWeight="400" margin="0px" >
{__(
"To get started quickly, you can pick from our ready-made templates, begin with a blank form, or design your own.",
"everest-forms"
)}
</Text>
</VStack>
<Main filter={selectedTab} />
</Box>
</Box>
</ChakraProvider>
);
};
export default App;