Skip to content

Commit

Permalink
add roadmap to campaign
Browse files Browse the repository at this point in the history
  • Loading branch information
@nhatminhne
nhatminhne committed Apr 29, 2022
1 parent 3c8fdba commit 36f4cf2
Show file tree
Hide file tree
Showing 2 changed files with 200 additions and 3 deletions.
132 changes: 130 additions & 2 deletions pages/campaign/[id].tsx
View file
Expand Up @@ -29,7 +29,14 @@ import {
Input,
InputRightAddon,
FormHelperText,
Button } from "@chakra-ui/react";
Button,
HStack,
SkeletonCircle,
Divider,
Skeleton,
Img,
Flex,
} from "@chakra-ui/react";
import { ExternalLinkIcon, InfoIcon } from "@chakra-ui/icons";
import { StatCard } from "@components/statCard";
import { getWEIPriceInUSD, getETHPriceInUSD } from "pages/api/getETHPrice";
Expand Down Expand Up @@ -75,6 +82,83 @@ interface propsCampaiggnSingle {
ETHPrice: any
}

const CampaignCard: React.FC<{
name: string;
date: string;
description: string;
}> = (props) => {
return (
<Tooltip
label={props.name +": "+ props.description}
bg={useColorModeValue("white", "gray.700")}
placement={"top"}
color={useColorModeValue("gray.800", "white")}
fontSize={"1em"}
>
<Box
bg={useColorModeValue("white", "gray.800")}
maxW={{ md: "sm" }}
borderWidth="1px"
rounded="lg"
shadow="lg"
position="relative"
alignItems="center"
justifyContent="center"
transition={"transform 0.3s ease"}
_hover={{
transform: "translateY(-8px)",
}}
>
<Box p="6">
<Flex
mt="1"
justifyContent="space-between"
alignContent="center"
>
<Box
fontSize="2xl"
fontWeight="semibold"
as="h4"
lineHeight="tight"
isTruncated
>
{props.name}
</Box>

</Flex>
<Flex alignContent="center" >
<Heading size="base" isTruncated>
on: {props.date}
</Heading>
</Flex>
<Flex direction="row" py={2}>
<Box w="full">
<Box
fontSize={"2xl"}
isTruncated
maxW={{ base: " 15rem", sm: "sm" }}
>
<Text
as="span"
fontSize="lg"
display="inline"
fontWeight={"normal"}
color={useColorModeValue(
"gray.500",
"gray.200",
)}
>
{props.description}
</Text>
</Box>
</Box>{" "}
</Flex>
</Box>
</Box>
</Tooltip>
);
};

export default function CampaignSingle(props: propsCampaiggnSingle) {
const { handleSubmit, register, formState, reset, getValues } = useForm({
mode: "onChange",
Expand All @@ -85,6 +169,11 @@ export default function CampaignSingle(props: propsCampaiggnSingle) {
const wallet = useState(false); //useWallet();
const router = useRouter();
const { width, height } = useWindowSize();
const [roadmaps, setRoadmaps] = useState([
{name: 'Buy food', date: '1/1/2022', description: 'so we need to buy some food for the children who does not have any food'},
{name: 'Buy food', date: '1/1/2022', description: 'so we need to buy some food for the children who does not have any food'},
{name: 'Buy food', date: '1/1/2022', description: 'so we need to buy some food for the children who does not have any food'},
])

async function onSubmit(data: any) {
console.log(data);
Expand Down Expand Up @@ -146,7 +235,7 @@ export default function CampaignSingle(props: propsCampaiggnSingle) {
maxW={"7xl"}
columns={{ base: 1, md: 2 }}
spacing={{ base: 10, lg: 32 }}
py={{ base: 6 }}
//py={{ base: 6 }}
>
<Stack spacing={{ base: 6 }}>
<Heading
Expand Down Expand Up @@ -205,6 +294,45 @@ export default function CampaignSingle(props: propsCampaiggnSingle) {
}
/>
</SimpleGrid>
<Container py={{ base: "4", md: "12" }} maxW={"7xl"}>
<HStack spacing={2}>
<SkeletonCircle size="4" />
<Heading as="h2" size="lg">
Roadmap
</Heading>
</HStack>

<Divider marginTop="4" />

{roadmaps.length > 0 ? (
<SimpleGrid
columns={{ base: 1, md: 2 }}
spacing={10}
py={8}
>
{roadmaps.map((el, i) => {
return (
<div key={i}>
<CampaignCard
name={el.name}
date={el.date}
description={el.description}
/>
</div>
);
})}
</SimpleGrid>
) : (
<SimpleGrid
columns={{ base: 1, md: 2 }}
spacing={10}
py={8}
>
<Skeleton height="25rem" />
<Skeleton height="25rem" />
</SimpleGrid>
)}
</Container>
</Box>
</Stack>
<Stack spacing={{ base: 4 }}>
Expand Down
71 changes: 70 additions & 1 deletion pages/campaign/new.tsx
View file
Expand Up @@ -22,7 +22,7 @@ import {
useColorModeValue,
Button,
} from "@chakra-ui/react";
import { ArrowBackIcon } from "@chakra-ui/icons";
import { ArrowBackIcon, DeleteIcon } from "@chakra-ui/icons";
import NextLinh from "next/link";
import { useWallet } from "use-wallet";
//import factory from "../../smart-contract/factory";
Expand All @@ -45,6 +45,9 @@ export default function NewCampaign() {
const [minContriInUSD, setMinContriInUSD] = useState<number>();
const [targetInUSD, setTargetInUSD] = useState<number>();
const [ETHPrice, setETHPrice] = useState(0);
const [roadmaps, setRoadmaps] = useState([
{name: '', date: '', description: ''},
])

useAsync(async () => {
try {
Expand Down Expand Up @@ -206,6 +209,72 @@ export default function NewCampaign() {
</FormHelperText>
) : null}
</FormControl>
<Text>Roadmap:</Text>

{roadmaps.map((roadmap, index) => {
return (
<div>
<Box
rounded={"lg"}
bg={useColorModeValue("white", "gray.700")}
boxShadow={"lg"}
p={8}
>
<FormControl id="roadmap" px={4}>
<Text p={0}>Roadmap {index + 1}:</Text>
<FormLabel>Name</FormLabel>
<Input
value={roadmap.name}
onChange={(event:any) => {
const value = [...roadmaps];
value[index].name = event.target.value;
setRoadmaps(value)
}}
/>
<FormLabel>Date</FormLabel>
<Input
value={roadmap.date}
onChange={(event:any) => {
const value = [...roadmaps];
value[index].date = event.target.value;
setRoadmaps(value)
}}
/>
<FormLabel>Description</FormLabel>
<Input
value={roadmap.description}
onChange={(event:any) => {
const value = [...roadmaps];
value[index].description = event.target.value;
setRoadmaps(value)
}}
/>
<DeleteIcon
color={"teal.400"}
_hover={{
cursor:"pointer"
}}
onClick={() => {
const value = [...roadmaps]
value.splice(index, 1);
setRoadmaps(value)
}}
/>
</FormControl>
</Box>
</div>
)
})}
<Button
color={"white"}
bg={"teal.400"}
_hover={{
bg: "teal.300",
}}
onClick={() => setRoadmaps([...roadmaps, {name: '', date: '', description: ''}])}
>
Add new roadmap
</Button>

{error ? (
<Alert status="error">
Expand Down

0 comments on commit 36f4cf2

Please sign in to comment.