Skip to content

Commit dc9e5e0

Browse files
Aime-PatrickAime-Patrick
committed
Merge branch 'develop' of github.com:atlp-rwanda/e-commerce-ninjas-fe into ft-user-signup-187584865
2 parents 7168550 + 04b498f commit dc9e5e0

38 files changed

+2416
-321
lines changed

‎package-lock.json

-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/person.jpg

148 KB
Loading

‎src/App.scss

+11-7
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,14 @@
1-
@import url('https://fonts.googleapis.com/css2?family=Averia+Serif+Libre:ital,wght@0,300;0,400;0,700;1,300;1,400;1,700&display=swap');
2-
@import './styles/color.scss';
1+
@import './styles/Colors.scss';
2+
@import './styles/style.scss';
33
@import './styles/signup.scss';
44
@import './styles/LandingPage.scss';
55
@import './styles/email.scss';
6-
7-
* {
8-
margin: 0;
9-
padding: 0;
10-
}
6+
@import './styles/AdminHeader.scss';
7+
@import './styles/Button.scss';
8+
@import './styles/Categories.scss';
9+
@import './styles/Footer.scss';
10+
@import './styles/Input.scss';
11+
@import './styles/SearchInput.scss';
12+
@import './styles/SellerHeader.scss';
13+
@import './styles/SideBar.scss';
14+
@import './styles/Header.scss';

‎src/components/categories/Categories.tsx

+83
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,83 @@
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
import "../../styles/Categories.scss";
5+
6+
function Categories() {
7+
return (
8+
<div className="categories__container">
9+
<div className="categories">
10+
<div className="categories__box categories__box__1">
11+
<img
12+
src="left-top.png"
13+
alt="Product image"
14+
className="categories__img"
15+
/>
16+
<div className="categories__content">
17+
<p className="categories__text">Men's shoes</p>
18+
<button className="categories__btn">View &gt;</button>
19+
</div>
20+
</div>
21+
<div className="categories__box categories__box__2">
22+
<img
23+
src="left-bottom.png"
24+
alt="Product image"
25+
className="categories__img"
26+
/>
27+
<div className="categories__content">
28+
<p className="categories__text">Phones</p>
29+
<button className="categories__btn">View &gt;</button>
30+
</div>
31+
</div>
32+
<div className="categories__box categories__box__3">
33+
<img
34+
src="middle.png"
35+
alt="Product image"
36+
className="categories__img"
37+
/>
38+
<div className="categories__controlls">
39+
<button className="categories__controll categories__controll__left">
40+
&lt;
41+
</button>
42+
<button className="categories__controll categories__controll__right">
43+
&gt;
44+
</button>
45+
</div>
46+
<div className="dots">
47+
<div className="dot dot__active"></div>
48+
<div className="dot"></div>
49+
<div className="dot"></div>
50+
</div>
51+
</div>
52+
<div className="categories__box categories__box__4">
53+
<img
54+
src="right-top.png"
55+
alt="Product image"
56+
className="categories__img"
57+
/>
58+
<div className="categories__content categories__content__right">
59+
<p className="categories__text">Women's shoes</p>
60+
<button className="categories__btn categories__btn__orange">
61+
View &gt;
62+
</button>
63+
</div>
64+
</div>
65+
<div className="categories__box categories__box__5">
66+
<img
67+
src="right-bottom.png"
68+
alt="Product image"
69+
className="categories__img"
70+
/>
71+
<div className="categories__content categories__content__right">
72+
<p className="categories__text ">Accessories</p>
73+
<button className="categories__btn categories__btn__gray">
74+
View &gt;
75+
</button>
76+
</div>
77+
</div>
78+
</div>
79+
</div>
80+
);
81+
}
82+
83+
export default Categories;

‎src/components/inputs/Input.tsx

+58
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
/* eslint-disable */
2+
3+
import React, { ReactNode } from "react";
4+
import "../../styles/Input.scss";
5+
6+
interface InputLabelProps extends React.InputHTMLAttributes<HTMLInputElement> {
7+
label: string;
8+
type?: "text" | "date" | "password" | "select" | "textarea" | "search";
9+
children?: ReactNode;
10+
}
11+
12+
function InputLabel({
13+
label,
14+
type = "text",
15+
children,
16+
...props
17+
}: InputLabelProps) {
18+
return (
19+
<div className="floating-label">
20+
{type === "select" ? (
21+
<select
22+
className="floating-select"
23+
{...(props as React.SelectHTMLAttributes<HTMLSelectElement>)}
24+
>
25+
<option value=""></option>
26+
{children}
27+
</select>
28+
) : type === "textarea" ? (
29+
<textarea
30+
className="floating-input floating-textarea"
31+
{...(props as React.TextareaHTMLAttributes<HTMLTextAreaElement>)}
32+
></textarea>
33+
) : (
34+
<input className="floating-input" type={type} {...props} />
35+
)}
36+
<span className="input-highlight"></span>
37+
<label>{label}</label>
38+
</div>
39+
);
40+
}
41+
42+
function InputDefault(
43+
props: React.JSX.IntrinsicAttributes &
44+
React.ClassAttributes<HTMLInputElement> &
45+
React.InputHTMLAttributes<HTMLInputElement>
46+
) {
47+
return <input className="input-default" {...props} />;
48+
}
49+
50+
function InputRounded(
51+
props: React.JSX.IntrinsicAttributes &
52+
React.ClassAttributes<HTMLInputElement> &
53+
React.InputHTMLAttributes<HTMLInputElement>
54+
) {
55+
return <input className="input-rounded" {...props} />;
56+
}
57+
58+
export { InputLabel, InputDefault, InputRounded };

‎src/components/inputs/SearchInput.tsx

+24
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
/* eslint-disable */
2+
3+
import React from "react";
4+
import { FiSearch } from "react-icons/fi";
5+
import "../../styles/SearchInput.scss";
6+
7+
interface SearchInputProps {
8+
className?: string;
9+
placeholder?: string;
10+
}
11+
12+
function SearchInput({ className, placeholder }: SearchInputProps) {
13+
return (
14+
<form className={`search-container ${className}`}>
15+
<div className="search-icon">
16+
<FiSearch />
17+
</div>
18+
<input type="text" placeholder={placeholder} />
19+
<button className="search-button">Search</button>
20+
</form>
21+
);
22+
}
23+
24+
export default SearchInput;

‎src/components/layout/AdminHeader.tsx

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
/* eslint-disable */
2+
import React from "react";
3+
import { IoIosNotifications } from "react-icons/io";
4+
import { FaEnvelope } from "react-icons/fa";
5+
6+
function AdminHeader() {
7+
return (
8+
<header className="admin-header">
9+
<div className="header__logo">
10+
<img
11+
src="logo.png"
12+
alt="Ecommerce logo"
13+
className="header__logo__img"
14+
/>
15+
<p className="header__logo__text">
16+
e-Commerce <span>Ninjas</span>
17+
</p>
18+
</div>
19+
<div className="header__notification__box">
20+
<IoIosNotifications className="header__notification__icon header__notification__icon__1" />
21+
<span className="header__notification__number">10</span>
22+
</div>
23+
<div className="header__notification__box">
24+
<FaEnvelope className="header__notification__icon" />
25+
<span className="header__notification__number">30</span>
26+
</div>
27+
<div className="header__user__box">
28+
<img src="person.jpg" alt="UI face" className="header__user__img" />
29+
<p className="header__text">
30+
Hi, <span className="header__user__name">Emmanuel</span>
31+
</p>
32+
</div>
33+
</header>
34+
);
35+
}
36+
37+
export default AdminHeader;

0 commit comments

Comments
 (0)