updated

src/Components/EmptySearchList.jsx

@@ -13,7 +13,7 @@ const EmptySearchList = ({message}) => {
     >
         <Image w={200} mb={8} h={200} src={EmptySearchListImage} alt='Dan Abramov' />
         <Text className=" fw-bold fs-5" >{message}</Text>
-        <Text as={'p'} className="web-text-medium">Posts of rubix will appear here.</Text>
+        <Text as={'p'} className="web-text-medium">Posts of tanami will appear here.</Text>
         
     </Box>
   )

src/Components/FormField.jsx

@@ -1,5 +1,5 @@
-import { FormControl, FormLabel, Input, Textarea } from '@chakra-ui/react';
-import React from 'react'
+import { FormControl, FormLabel, Input, Textarea, Select, Checkbox, RadioGroup, Radio, Stack } from '@chakra-ui/react';
+import React from 'react';
 import { Controller } from 'react-hook-form';
 import { TiWarning } from 'react-icons/ti';
 
@@ -8,40 +8,82 @@ const FormField = ({
     control,
     name,
     type = "text",
+    options = [],
     errors,
     isRequired,
     arabic,
     ...props
   }) => (
-    // <FormControl isInvalid={errors[name]}>
-    // <FormControl isRequired={isRequired}>
-    <FormControl >
+    <FormControl isInvalid={errors[name]}>
       <FormLabel textAlign={arabic ? "right" : "left"} fontSize={"sm"}>{label}</FormLabel>
       <Controller
         control={control}
         name={name}
         defaultValue=""
         render={({ field }) => {
-          return type === "textarea" ? (
-            <Textarea
-              focusBorderColor="forestGreen.400"
-              size={"sm"}
-              {...field}
-              {...props}
-              placeholder={label}
-              textAlign={arabic ? "right" : "left"}
-            />
-          ) : (
-            <Input
-              focusBorderColor="forestGreen.300"
-              size={"sm"}
-              type={type}
-              {...field}
-              {...props}
-              placeholder={label}
-              textAlign={arabic ? "right" : "left"}
-            />
-          );
+          switch (type) {
+            case 'textarea':
+              return (
+                <Textarea
+                  focusBorderColor="forestGreen.400"
+                  size={"sm"}
+                  {...field}
+                  {...props}
+                  placeholder={label}
+                  textAlign={arabic ? "right" : "left"}
+                />
+              );
+            case 'select':
+              return (
+                <Select
+                  focusBorderColor="forestGreen.300"
+                  size={"sm"}
+                  {...field}
+                  {...props}
+                  placeholder={label}
+                  textAlign={arabic ? "right" : "left"}
+                >
+                  {options.map((option, index) => (
+                    <option key={index} value={option.value}>{option.label}</option>
+                  ))}
+                </Select>
+              );
+            case 'checkbox':
+              return (
+                <Checkbox
+                  size={"sm"}
+                  {...field}
+                  {...props}
+                  textAlign={arabic ? "right" : "left"}
+                >
+                  {label}
+                </Checkbox>
+              );
+            case 'radio':
+              return (
+                <RadioGroup {...field} {...props}>
+                  <Stack direction="row">
+                    {options.map((option, index) => (
+                      <Radio key={index} value={option.value}>
+                        {option.label}
+                      </Radio>
+                    ))}
+                  </Stack>
+                </RadioGroup>
+              );
+            default:
+              return (
+                <Input
+                  focusBorderColor="forestGreen.300"
+                  size={"sm"}
+                  type={type}
+                  {...field}
+                  {...props}
+                  placeholder={label}
+                  textAlign={arabic ? "right" : "left"}
+                />
+              );
+          }
         }}
       />
       {errors[name] && (
@@ -52,4 +94,4 @@ const FormField = ({
     </FormControl>
   );
 
-export default FormField
+export default FormField;

src/Components/InvestmentCard/InvestmentCard.jsx

@@ -1,4 +1,5 @@
 import {
+  Badge,
   Box,
   Button,
   Card,
@@ -10,101 +11,135 @@ import {
   Text,
   Tooltip,
 } from "@chakra-ui/react";
+import { OPACITY_ON_LOAD } from "../../Layout/animations";
 
-
-const InvestmentCard = ({investment}) => {
+const InvestmentCard = ({ investment }) => {
   return (
-   <Card
-            direction={{ base: "column", sm: "row" }}
-            overflow="scroll"
-            variant="outline"
-            display={"flex"}
-            alignItems={"center"}
-            mb={'20px'}
-            boxShadow={'md'}
-            border={'none'}
-          >
-            <Image
-              p={"15px"}
-              rounded={"24px"}
-              objectFit="cover"
-              w={"200px"}
-              h={"160px"}
-              src={investment?.imgSrc}
-              alt={investment?.title}
-            />
+    <Card
+    {...OPACITY_ON_LOAD}
+      direction={{ base: "column", sm: "row" }}
+      variant="outline"
+      display={"flex"}
+      alignItems={"center"}
+      mb={"20px"}
+      boxShadow={"md"}
+      border={"none"}
+  mt={2}
+    >
+      <Image
+        p={"14px"}
+        rounded={"24px"}
+        objectFit="cover"
+        w={"200px"}
+        h={"140px"}
+        src={investment?.imgSrc}
+        alt={investment?.title}
+      />
 
-            <Stack>
-              <CardBody>
-                <Heading size="sm" fontWeight={"500"}>
-                  {investment?.title}
-                </Heading>
-                <Text fontSize="sm" mb={"4px"}>
-                  Sponsor:{" "}
-                  <Text as={"span"} fontWeight={"600"}>
-                    {investment?.sponsor}
-                  </Text>{" "}
-                </Text>
-                <Text fontSize="sm" mb={"4px"}>
-                  Ann return:{" "}
-                  <Text as={"span"} fontWeight={"600"}>
-                    {investment?.annReturn}
-                  </Text>{" "}
-                </Text>
-                <Text fontSize="sm" mb={"4px"}>
-                  Ann Yield:{" "}
-                  <Text as={"span"} fontWeight={"600"}>
-                    {investment?.annYield}
-                  </Text>{" "}
-                </Text>
-              </CardBody>
-            </Stack>
-            <Stack borderLeft={"1px solid #ccc"}>
-              <CardBody>
-                <Text fontSize="sm" mb={"4px"}>
-                  Min.Invests:{" "}
-                  <Text as={"span"} fontWeight={"600"}>
-                    {investment?.minInvests}
-                  </Text>{" "}
-                </Text>
-                <Text fontSize="sm" mb={"4px"}>
-                  Targ Close:{" "}
-                  <Text as={"span"} fontWeight={"600"}>
-                    {investment?.targClose}
-                  </Text>{" "}
-                </Text>
-                <Text fontSize="sm" mb={"4px"}>
-                  Holding per:{" "}
-                  <Text as={"span"} fontWeight={"600"}>
-                    {investment?.holdingPer}
-                  </Text>{" "}
-                </Text>
-              </CardBody>
-            </Stack>
-            <Stack>
-              <CardBody>
-              <Tooltip hasArrow placement='top-start' label={investment?.progressValue} bg='white' color='#000'>
-                <Progress
-                  width={"200px"}
-                  value={investment?.progressValue}
-                  rounded={"10px"}
-                  colorScheme={"green"}
-                  size={'sm'}
-                />
-                </Tooltip>
-                <Button
-                // variant='ghost'
-                  w={"100%"}
-                  colorScheme={"gray"}
-                  rounded={"sm"}
-                  size={"sm"}
-                  mt={"20px"}
-                >
-                  View
-                </Button>
-              </CardBody>
-            </Stack>
-          </Card>
+      <Stack w={"38%"}>
+        <CardBody>
+          <Heading size="sm" fontWeight={"500"}>
+            {investment?.title}
+            <Badge
+              colorScheme={
+                investment?.status === "Available"
+                  ? "teal"
+                  : investment?.status === "Upcomming"
+                  ? "green"
+                  : "red"
+              }
+              ps={2} pe={2} pt={0.5} pb={0.5}
+              fontSize={"xs"}
+              ms={3}
+            >
+              {investment?.status === "Available"
+                ? "Available"
+                : investment?.status === "Upcomming"
+                ? "Upcomming"
+                : "Closed"}
+            </Badge>
+          </Heading>
+          <Text fontSize="sm" mb={"4px"}>
+            Sponsor:{" "}
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.sponsor}
+            </Text>{" "}
+          </Text>
+          <Text fontSize="sm" mb={"4px"}>
+            Ann return:{" "}
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.annReturn}
+            </Text>{" "}
+          </Text>
+          <Text fontSize="sm" mb={"4px"}>
+            Ann Yield:{" "}
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.annYield}
+            </Text>{" "}
+          </Text>
+        </CardBody>
+      </Stack>
+      <Stack borderLeft={"1px solid #ccc"}>
+        <CardBody>
+          <Text fontSize="sm" mb={"4px"}>
+            Min.Invests:{" "}
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.minInvests}
+            </Text>{" "}
+          </Text>
+          <Text fontSize="sm" mb={"4px"}>
+            Targ Close:{" "}
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.targClose}
+            </Text>{" "}
+          </Text>
+          <Text fontSize="sm" mb={"4px"}>
+            Holding per:{" "}
+            <Text as={"span"} fontWeight={"600"}>
+              {investment?.holdingPer}
+            </Text>{" "}
+          </Text>
+        </CardBody>
+      </Stack>
+      <Stack>
+        <CardBody>
+
+          <Box as="span" display={'flex'} justifyContent={'space-between'} mb={1}>
+                <Text fontSize={'xs'} fontWeight={500} as={'span'}>$ 500,000.450</Text>
+                <Text fontSize={'xs'} fontWeight={500}  as={'span'}>{investment?.progressValue} % Funded</Text>
+          </Box>
+          {/* <Tooltip
+            hasArrow
+            placement="top-start"
+            label={`${investment?.progressValue}%`}
+            bg="white"
+            color="#000"
+            fontSize={'xs'}
+          > */}
+            <Progress
+              width={"200px"}
+              value={investment?.progressValue}
+              rounded={"10px"}
+              colorScheme={"green"}
+              size={"sm"}
+            />
+          {/* </Tooltip> */}
+
+
+
+          <Button
+            // variant='ghost'
+            w={"100%"}
+            colorScheme={"gray"}
+            rounded={"sm"}
+            size={"sm"}
+            mt={"20px"}
+          >
+            View
+          </Button>
+        </CardBody>
+      </Stack>
+    </Card>
   );
 };