Skip to content

Commit

Permalink
Merge pull request #2 from php1301/Thienworks
Browse files Browse the repository at this point in the history 
Thien done UI user
  • Loading branch information
@php1301
php1301 committed May 7, 2022
2 parents 36f4cf2 + e71cfaa commit 98fe5cc
Show file tree
Hide file tree
Showing 9 changed files with 442 additions and 21 deletions.
3 changes: 2 additions & 1 deletion .gitignore
View file
Expand Up @@ -5,4 +5,5 @@ node_modules
# environment variables
.env
.env.*
!.env.example
!.env.example

234 changes: 234 additions & 0 deletions pages/editprofile.tsx
View file
@@ -0,0 +1,234 @@
import { useForm } from "react-hook-form";
import { useRouter } from "next/router";
import React, { useState } from "react";
import { useAsync } from "react-use";
import { getETHPrice, getETHPriceInUSD } from "@libs/get-eth-price";
import Head from "next/head";
import {
Alert,
AlertDescription,
AlertIcon,
Box,
FormControl,
FormHelperText,
FormLabel,
Heading,
Input,
InputGroup,
InputRightAddon,
Stack,
Text,
Textarea,
useColorModeValue,
Button,
} from "@chakra-ui/react";
import { ArrowBackIcon, DeleteIcon } from "@chakra-ui/icons";
import NextLinh from "next/link";
import { useWallet } from "use-wallet";
//import factory from "../../smart-contract/factory";
//import web3 from "../../smart-contract/web3";

//sua wallet, form submit, setTargetInUSD(Math.abs(e.target.value));setMinContriInUSD(Math.abs(e.target.value))

export default function NewCampaign() {
const {
handleSubmit,
register,
formState: { isSubmitting, errors },
} = useForm({
mode: "onChange",
});

const router = useRouter();
const [error, setError] = useState("");
const wallet = useWallet();
const [minContriInUSD, setMinContriInUSD] = useState<number>();
const [targetInUSD, setTargetInUSD] = useState<number>();
const [ETHPrice, setETHPrice] = useState(0);
const [roadmaps, setRoadmaps] = useState([
{ name: '', phone: '', description: '', avatar: '', youtube: '', facebook: '' },
])

useAsync(async () => {
try {
const result: any = await getETHPrice();
setETHPrice(result);
} catch (error) {
console.log(error);
}
}, []);

async function onSubmit(data: any) {
console.log(
data.name,
data.phone,
data.description,
data.avatarUrl,
data.youtubeURL,
data.facebookURL,
data.twitterURL,
);
// try {
// const accounts = await web3.eth.getAccounts();
// await factory.methods
// .createCampaign(
// web3.utils.toWei(data.minimumContribution, "ether"),
// data.campaignName,
// data.description,
// data.imageUrl,
// web3.utils.toWei(data.target, "ether"),
// )
// .send({
// from: accounts[0],
// });

// router.push("/");
// } catch (err) {
// setError(err.message);
// console.log(err);
// }
}
return (
<div>
<Head>
<title>New Campaign</title>
<meta name="description" content="Create New Campaign" />
<link rel="icon" href="/logo.svg" />
</Head>
<main>
<Stack spacing={8} mx={"auto"} maxW={"2xl"} py={12} px={6}>
<Text fontSize={"lg"} color={"green.400"}>
<ArrowBackIcon mr={2} />
<NextLinh href="/">Back to Home</NextLinh>
</Text>
<Stack>
<Heading fontSize={"4xl"}>
Edit profile 📋
</Heading>
</Stack>
<Box
rounded={"lg"}
bg={useColorModeValue("white", "gray.700")}
boxShadow={"lg"}
p={8}
>
<form onSubmit={handleSubmit(onSubmit)}>
<Stack spacing={4}>
<FormControl id="name">
<FormLabel>
Your name
</FormLabel>
<Input
{...register("name", {
required: true,
})}
isDisabled={isSubmitting}
/>
</FormControl>
<FormControl id="phone">
<FormLabel>
Your phone number
</FormLabel>
<Input
type="number"
step="any"
{...register("phone", {
required: true,
})}
isDisabled={isSubmitting}
/>
</FormControl>
<FormControl id="description">
<FormLabel>Description</FormLabel>
<Textarea
{...register("description", {
required: true,
})}
isDisabled={isSubmitting}
/>
</FormControl>
<FormControl id="avatarUrl">
<FormLabel>Your avatar URL</FormLabel>
<Input
{...register("avatarUrl", {
required: true,
})}
isDisabled={isSubmitting}
type="url"
/>
</FormControl>
<FormControl id="youtubeUrl">
<FormLabel>Your Youtube URL</FormLabel>
<Input
{...register("youtubeUrl", {
required: true,
})}
isDisabled={isSubmitting}
type="url"
/>
</FormControl>
<FormControl id="facebookUrl">
<FormLabel>Your Facebook URL</FormLabel>
<Input
{...register("facebookUrl", {
required: true,
})}
isDisabled={isSubmitting}
type="url"
/>
</FormControl>
<FormControl id="facebookUrl">
<FormLabel>Your Twitter URL</FormLabel>
<Input
{...register("twitterUrl", {
required: true,
})}
isDisabled={isSubmitting}
type="url"
/>
</FormControl>
<Stack spacing={10}>
<Button
bg={"green.400"}
color={"white"}
_hover={{
bg: "green.500",
}}
isLoading={isSubmitting}
type="submit"
>
Done
</Button>
{error ? (
<Alert status="error">
<AlertIcon />
<AlertDescription mr={2}>
{error}
</AlertDescription>
</Alert>
) : null}
{errors.name ||
errors.phone ||
errors.description ||
errors.avatarUrl ||
errors.youtubeUrl ||
errors.twitterUrl ||
errors.facbookUrl ? (
<Alert status="error">
<AlertIcon />
<AlertDescription mr={2}>
{" "}
All Fields are Required
</AlertDescription>
</Alert>
) : null}
</Stack>
</Stack>
</form>
</Box>
</Stack>
</main>
</div>
)
}

52 changes: 52 additions & 0 deletions pages/header.tsx
View file
@@ -0,0 +1,52 @@
import { Button } from '@chakra-ui/button';
import { useColorMode } from '@chakra-ui/color-mode'
import { Image } from '@chakra-ui/image';
import { Stack, Circle, Flex, Box, Text } from '@chakra-ui/layout';
import { useMediaQuery } from '@chakra-ui/media-query';
import React from 'react'
import NextLink from "next/link";
import { FcDisplay } from 'react-icons/fc';

function Header() {

const { colorMode } = useColorMode();
const isDark = colorMode === "dark";

const [isNotSmallerScreen] = useMediaQuery("(max-width:786px)");
//console.log("hihi")

console.log(isNotSmallerScreen)
return (
<Stack
py={{ base: "4", md: "12" }}
maxW={"7xl"}
width="100%"
align={"left"}
padding="20px"
>
<Circle position="absolute" bg="blue.100" opacity="0.1"
w="300px" h="300px" alignSelf="flex-end" />
<Flex direction={!isNotSmallerScreen ? "row" : "column"}
spacing="200px" p={isNotSmallerScreen ? "32" : "0"}
alignSelf="flex-start">
<Box mt={isNotSmallerScreen ? "0" : 16} align='flex-start'>
<Text fontSize={{ base: "2xl", sm: "3xl", md: "5xl" }} fontWeight="semibold">Hi, I am</Text>
<Text fontSize={{ base: "3xl", sm: "4xl", md: "7xl" }} fontWeight="bold" bgGradient="linear(to-r, green.400, green.500, green.600)" bgClip='text' >Nguyen Ngoc Thien</Text>
<Text color={isDark ? "gray.200" : "gray.500"}>Main responsibilities: Writing SRS for website, designing UI/UX for website, front-end coding</Text>
<Button mt={8} colorScheme="green">
<NextLink href="/editprofile">
Edit profile
</NextLink></Button>

</Box>
<Image zIndex={5} alignSelf="center" mt={isNotSmallerScreen ? "12" : "12"}
mb={isNotSmallerScreen ? "0" : "12"} ml={isNotSmallerScreen ? "0" : "12"} borderRadius='full'
backgroundColor="transparent" boxShadow="lg"
boxSize={isNotSmallerScreen ? "100" : "300"} src='https://scontent.fsgn2-4.fna.fbcdn.net/v/t39.30808-6/272997112_3093238007631067_3491816514559914718_n.jpg?_nc_cat=109&ccb=1-6&_nc_sid=09cbfe&_nc_ohc=eDFg5xVHmOoAX8kGEPa&tn=QMG6IFJy_zklb8as&_nc_ht=scontent.fsgn2-4.fna&oh=00_AT8XzRQ7ZWMIu5f3pChr2CcmspW_XDgx8apo1-Bw6RF_jA&oe=6279B1F6' />
</Flex>

</Stack>
)
}

export default Header
14 changes: 2 additions & 12 deletions pages/index.tsx
View file
Expand Up @@ -253,7 +253,7 @@ export default function Home(
return (
<div>
<Head>
<title>FundingHealthcare</title>
<title>FundingFun</title>

<meta
name="description"
Expand Down Expand Up @@ -358,7 +358,7 @@ export default function Home(
<HStack spacing={2}>
<SkeletonCircle size="4" />
<Heading as="h2" size="lg">
How Funding Healthcare Works
How Funding Fun Works
</Heading>
</HStack>
<Divider marginTop="4" />
Expand Down Expand Up @@ -389,16 +389,6 @@ export default function Home(
}
/>
</SimpleGrid>
{/* <Heading as="h2" size="lg" mt="8">
For any queries raise an issue on{" "}
<Link
color="teal.500"
href="https://github.com/harsh242/betterfund-crowdfunding-in-blockchain/issues"
isExternal
>
the Github Repo <ExternalLinkIcon mx="2px" />
</Link>{" "}
</Heading> */}
<Divider marginTop="4" />
</Container>
</main>
Expand Down

0 comments on commit 98fe5cc

Please sign in to comment.