I am trying to allow the navbar to take you to each part of the website but it isnt working for some reason. It is only a one page website and I have another up & running website with the same Example it takes me right to the section, but on this website it just doesnt seem to work does anyone have a clue? Heres my code from navbar.jsx and a link to the github
https://github.com/Justin7933/chidgo
import React from 'react';
import styled from 'styled-components';
const Container = styled.div`
height: 50px;
`;
const Wrapper = styled.div`
padding: 10px 20px;
display: flex;
align-items: center;
justify-content: space-between;
`;
const Left = styled.div`
width: 60%;
display: flex;
align-content: center;
justify-content: space-between;
`;
const Logo = styled.h1`
font-weight: bold;
text-decoration: underline crimson;
`;
const Menu = styled.nav`
display: flex;
list-style: none;
cursor: pointer;
#media only screen and (max-width: 480px) {
display: none;
}
`;
const MenuItem = styled.a`
margin-right: 30px;
font-size: 20px;
font-weight: bold;
color: gray;
text-decoration: none;
`;
const Button = styled.button`
border:2px solid white;
padding: 10px 15px;
background-color: crimson;
color: white;
font-weight: bold;
border-radius: 10px;
cursor: pointer;
`;
const Navbar = () => {
return (
<Container>
<Wrapper>
<Left>
<Logo>chidgo</Logo>
<Menu>
<MenuItem href="#intro">Home</MenuItem>
<MenuItem href="feature">Features</MenuItem>
<MenuItem href="#service">Services</MenuItem>
<MenuItem href="#price">Pricing</MenuItem>
<MenuItem href="#contact">Contact</MenuItem>
</Menu>
</Left>
<Button>JOIN TODAY</Button>
</Wrapper>
</Container>
)
}
export default Navbar
To be honest, I dont master the way that you coded yet, so I might embarrass mysef for lack of knowledge, but, have being said that:
Are you not forgeting to wrapp the proprer places with a < section id="">? Like is show here in the code of your contact componet:
<Container>
==>>>> <section id="contact">
<Wrapper>
<FormContainer>
<Title>
Questions? <br /> Let's Get In Touch
</Title>
<Form onSubmit={onSubmit}>
<LeftForm>
<Input name="from_name" value={toSend.from_name}
onChange={handleChange} placeholder="Your Name" />
<Input name="reply_to" value={toSend.reply_to}
onChange={handleChange} placeholder="Your Email" />
<Input placeholder="Subject" />
</LeftForm>
<RightForm>
<textarea name="message" className="TextArea" maxLength="100" value={toSend.message}
onChange={handleChange} placeholder="Your Message"/>
<Button type="submit">Send</Button>
</RightForm>
</Form>
</FormContainer>
<AddressContainer>
<AddressItem>
<Icon src={Map} />
<Text>Plymouth County, Hanson, Massachusetts</Text>
</AddressItem>
<AddressItem>
<Icon src={Phone} />
<Text>+7812175728</Text>
</AddressItem>
<AddressItem>
<Icon src={Send} />
<Text>damon.justin#outlook.com</Text>
</AddressItem>
</AddressContainer>
</Wrapper>
===>>> </section>
</Container>
At least, I had looked for thoose "targets" from your navebar and I have not found them in any file.
Related
I have following component. I am making this based on react-hook-form documentation. Additionally I add styled components. But I find out problem with button. Submit button does not works. Nothing happen when I click on it
import styled from 'styled-components';
import { useForm } from "react-hook-form";
export const OrderDetailsForm = () => {
const { register, handleSubmit } = useForm();
const onSubmit = (data: any) => console.log(data);
return (
<OrderDetailsFormContainer>
<OrderForm onSubmit={handleSubmit(onSubmit)}>
<OrderDetailsFormContent>
<label>First Name</label>
<OrderDetailsFormInput {...register("firstName")} />
<label>Last Name</label>
<OrderDetailsFormInput {...register("lastName")} />
<label>Phone number</label>
<OrderDetailsFormInput {...register("phoneNumber")} />
<label>Email</label>
<OrderDetailsFormInput {...register("emailAddress")} />
<OrderDetailsFormHeader>Contact details</OrderDetailsFormHeader>
</OrderDetailsFormContent>
<OrderDetailsFormContent>
<label>Street</label>
<OrderDetailsFormInput {...register("street")} />
<label>House number</label>
<OrderDetailsFormInput {...register("houseNumber")} />
<label>City</label>
<OrderDetailsFormInput {...register("city")} />
<label>ZIP code</label>
<OrderDetailsFormInput {...register("zipCode")} />
<OrderDetailsFormHeader>Address</OrderDetailsFormHeader>
</OrderDetailsFormContent>
<input type='submit' />
</OrderForm>
</OrderDetailsFormContainer>
)
}
const OrderDetailsFormContainer = styled.main`
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 100vh;
`
const OrderForm = styled.article`
display: flex;
justify-content: center;
align-items: center;
width: 1200px;
`
const OrderDetailsFormContent = styled.section`
display: flex;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
border: 1px solid #000;
box-sizing: border-box;
margin: 0 25px;
width: 50%;
padding: 30px 0 20px 20px;
position: relative;
`
const OrderDetailsFormInput = styled.input`
padding: 10px 40px;
margin: 15px 0;
`
const OrderDetailsFormHeader = styled.h1`
position: absolute;
top: -4%;
left: 4%;
margin: 0;
background-color: #fff;
padding: 0 20px;
font-size: 20px;
`
const Button = styled.button`
background-color: black;
color: white;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
`
Sorry for adding this, but it throws an error It looks like your post is mostly code; please add some more details. But I don't know what I can add more to this post.
Your issue is that you don't have a <form/> element.
Your <OrderForm/> component is rendering an <article/> element - this doesn't have an onSubmit prop, which is why the submission isn't working.
Change styled.article to styled.form here:
const OrderForm = styled.form`
const OrderForm = styled.article`
this line will generate an article element
and you know, article tag does not have onsubmit event.
change this line to:
const OrderForm = styled.form
good luck.
Been searching on how to make a excel like filter using react-data-table-component, and found something interesting, like Data Table filtering using react-data-table-component.
Unfortunately, the FilterComponent Component seems to be deprecated, since I can't find anything regarding it but broken links, which is weird for such a interesting feature.
My code is the following:
const columns = Properties.columns;
const getSubHeaderComponent = () => {
return (
<FilterComponent
onFilter={(e) => {
let newFilterText = e.target.value;
filteredItems = statements.filter(
(item) =>
item.name &&
item.name.toLowerCase().includes(newFilterText.toLowerCase())
);
this.setState({ filterText: newFilterText });
}}
onClear={handleClear}
filterText={filterText}
/>
);
};
return (
<div>
<div className="row justify-content-md-center statements-table">
<div className="col-md-10">
<DataTable
columns={columns}
data={statements}
customStyles={Properties.customStyles}
fixedHeader
fixedHeaderScrollHeight="47em"
pagination
subheader
subHeaderComponent={getSubHeaderComponent()}
paginationPerPage={100}
paginationRowsPerPageOptions={[100, 500, 1000]}
subHeader
noHeader
/>
</div>
</div>
Any suggestions?
FilterComponent could be something as simple as
const FilterComponent = ({ filterText, onFilter, onClear }) => (
<div>
<input
type="text"
value={filterText}
onChange={onFilter}
/>
<button type="button" onClick={onClear}>
X
</button>
</div>
);
However, I found following official implementation of FilterComponent on Examples/Filtering | React Data Table Components (also referred Button.js) if you need it like that.
const TextField = styled.input`
height: 32px;
width: 200px;
border-radius: 3px;
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
border-top-right-radius: 0;
border-bottom-right-radius: 0;
border: 1px solid #e5e5e5;
padding: 0 32px 0 16px;
&:hover {
cursor: pointer;
}
`;
const ButtonStyle = styled.button`
background-color: #2979ff;
border: none;
color: white;
padding: 8px 32px 8px 32px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
border-radius: 3px;
&:hover {
cursor: pointer;
}
`;
const Button = ({ children, ...rest }) => <ButtonStyle {...rest}>{children}</ButtonStyle>;
const ClearButton = styled(Button)`
border-top-left-radius: 0;
border-bottom-left-radius: 0;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
height: 34px;
width: 32px;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
`;
const FilterComponent = ({ filterText, onFilter, onClear }) => (
<>
<TextField
id="search"
type="text"
placeholder="Filter By Name"
aria-label="Search Input"
value={filterText}
onChange={onFilter}
/>
<ClearButton type="button" onClick={onClear}>
X
</ClearButton>
</>
);
I wanted to create Radio Input Buttons styled Cards.
I am using react js and ant design.
Tried to create my own native component using good old input type="radio".
Connecting them to antd forms wasen't smooth sailing, then I had another idea.
Using antd react Radio component and just passing a card component. That's the working result!
Usage.tsx
// Other Code
<Radio.Group onChange={onChange} value={value} className="cards-container">
<Radio value={FOCUS_LEVEL.Regular} className="radio-input-card-container">
<InputCard
title="First Card"
checked={value === CONSTANT1}
imgPath="../../assets/icon1.svg"
points={["This is a point explain why this card is the best!", "Wow this is also a great point"]} />
</Radio>
<Radio value={FOCUS_LEVEL.DeepFocus} className="radio-input-card-container">
<InputCard
title="Second Card"
checked={value === CONSTANT2}
imgPath="../../assets/icon2.svg"
points={["This point explains why this card is way better", "The other card as shitty points!"]} />
</Radio>
</Radio.Group>
// Other Code
Usage.scss
.cards-container {
display: flex;
justify-content: space-between;
margin-left: 20px;
}
InputCard.tsx
import React from "react"
import Title from "antd/lib/typography/Title";
import "./InputCard.scss"
export function InputCard({ title, checked, imgPath, points }): JSX.Element {
return (
<div className={checked ? "card checked" : "card"}>
<div className="header-container">
<Title className="card-title">{title}</Title>
<img src={imgPath} alt="regular focus"></img>
</div>
<ul>
{points.map((point) =>
<li key={point.toString()}>{point}</li>
)}
</ul>
</div >
);
}
InputCard.scss
.card {
height: 420px !important;
width: 360px !important;
position: relative !important;
left: -45px; // A work around. Placing the card under the native radio button
-webkit-appearance: none;
appearance: none;
border: 2px solid rgba(2,28,53,0.08);
border-radius: 14px;
box-shadow: 7px 7px 15px rgba(2,28,53,0.08);
cursor: pointer;
outline: none;
.header-container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
ul {
padding: 0em 1em 0em 2.5em !important;
}
img {
margin: 0.5em 0em 1em 0em;
}
}
.card-title {
font-size: 20px !important;
margin-top: 16px !important;
}
.checked {
transition: border 0.5s ease;
border: 2px solid rgba(255,0,0,0.6);
}
The antd component creates a radio input circle right before the card childe. Moving the card to the left (left: -45px) so the card will include the radio circle is a workaround. I don't want to change too much in the parent component for me to use this InputCard component, and this is my try to do it within the component.
how can I give styles for input type='password' in styled-components?
// export const Input = styled.input`
// width: 100%;
// height: 50px;
// border-radius: 4px;
// background-color: rgba(104, 105, 102, 0.1);
// border: 1px solid #354545;
// margin-top: 20px;
// outline: none;
// padding-left: 40px;
// color: white;
// font-size: 22px;
// `;
This should work. Unlike normal css, styled-components takes the attribute as props. You'll need to use props to style the elements conditionally.
export const Input = styled.input`
${props => props.type === 'password' && `
width: 100%;
height: 50px;
border-radius: 4px;
background-color: rgba(104, 105, 102, 0.1);
border: 1px solid #354545;
margin-top: 20px;
outline: none;
padding-left: 40px;
color: white;
font-size: 22px;
`}
`;
From styled-components documentation FAQ:
export const PasswordInput = styled.input.attrs(props => ({
// Every <PasswordInput /> should be type="password"
type: "password"
}))`
width: 100%;
height: 50px;
border-radius: 4px;
background-color: rgba(104, 105, 102, 0.1);
border: 1px solid #354545;
margin-top: 20px;
outline: none;
padding-left: 40px;
color: white;
font-size: 22px;`;
Both examples are a bit overkill for just styling purposes and can be easily avoided by using &[type="password"]
import styled from "styled-components";
export const Input = styled.input`
&[type="password"] {
border: 1px solid black;
background: red;
}
`;
export default function App() {
return (
<div>
<div>
<label htmlFor="username">Username</label>
<Input id="username" type="text" />
</div>
<div>
<label htmlFor="password">Password</label>
<Input type="password" />
</div>
</div>
);
}
Or, if you want to extend of of a base input component
import styled from "styled-components";
export const Input = styled.input`
border: 1px solid black;
`;
export const PasswordInput = styled(Input)`
&[type="password"] {
background: red;
}
`;
export default function App() {
return (
<div>
<div>
<label htmlFor="username">Username</label>
<Input id="username" type="text" />
</div>
<div>
<label htmlFor="password">Password</label>
<PasswordInput type="password" />
</div>
</div>
);
}
I am new to styled-components, and want to know how you would write it given the following html snippet:
<div class="segmentedControlContainer">
<input type="radio" name="segmentedControlExample" value="1" id="1" />
<label for="1"> One </label>
<input type="radio" name="segmentedControlExample" value="2" id="2" />
<label for="2"> Two </label>
<input type="radio" name="segmentedControlExample" value="3" id="3" />
<label for="3"> Three </label>
<div>
so far, I have defined
export const SegmentedControlWrapper = styled.div`
display: flex;
width: 100%;
position: relative;
z-index: 1;
user-select: none;
margin: 0 auto;
font-size: 16px;
border-radius: 3px;
border: solid 1px #bcbcbc
`
export const Input = styled.input`
display: none;
&:checked + label {
color: #fff;
background: #blah;
}
`
export const Label = styled.label`
flex: 1;
color: #blah;
padding: 15px;
text-align: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
&:checked {
}
&:not(:last-child){
....
}
`
and use it in react as:
<SegmentedControlWrapper>
<Input />
<Label />
</SegmentedControlWrapper>
Most of this is correct, and I think the checked state isn't styled propelry. Any pointer would be appreciated. As I am confused with using &, >, etc.
Pass checked or not checked as props to style class. It will help to style in good way.
export const Input = styled.input
display: none;
&:checked + label {
color: #fff;
background: {$props => {this.props.checked ? "some" : "some"}}
}
<Input checked={this.state.checked}/>