mahdi
/
danovinTasks
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

update src/components/FooterDesign/Footer/index.js and data.js

Browse Source
master
mahdi andalib 3 years ago
parent 9ae78b40d9
commit 3a3625b657
6 changed files with 452 additions and 11 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Unified View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 22
      src/components/FooterDesign/Footer/index.js
  2. BIN
      src/components/Input/danger.png
  3. 171
      src/components/Input/index.js
  4. 60
      src/components/Input/index.scss
  5. BIN
      src/components/Input/tick.png
  6. 210
      src/redux/data.js

22
src/components/FooterDesign/Footer/index.js
Unescape View File

@ -1,14 +1,9 @@
import React from "react"; import React from "react";
import _ from "lodash"; import _ from "lodash";
import enamad from "./images/enamad-pic.svg";
import samandehi from "images/samandehi-pic.svg";
import lightBlueLine from "images/light-blue-line.svg";
const FooterDesign1 = ({ links }) => { const FooterDesign1 = ({ links }) => {
return ( return (
<footer className="flex flex-col md:flex-row justify-around items-start md:items-start relative shadow-md bg-white"> <footer className="relative w-full flex flex-col md:flex-row justify-around items-start md:items-start p-4 shadow-md bg-white">
<div className="flex items-start"> <div className="flex items-start">
<> <>
{links.map((section, index) => ( {links.map((section, index) => (
@ -26,14 +21,19 @@ const FooterDesign1 = ({ links }) => {
</> </>
</div> </div>
<div className="flex items-center mt-10 md:mt-0"> <div className="flex items-center mt-10 md:mt-0">
<img src={enamad} alt="enamad" className="w-28 ml-10" /> <img src="images/enamad-pic.svg" alt="enamad" className="w-28 ml-10" />
<img src={samandehi} alt="samandehi" className="w-28" /> <img src="images/samandehi-pic.svg" alt="samandehi" className="w-28" />
</div> </div>
{/* line */} {/* line */}
<img <img
src={lightBlueLine} src="images/light-blue-line.svg"
alt="" alt="line"
className="hidden sm:block absolute bottom-5 left-20" className="hidden sm:block absolute bottom-5 left-10"
/>
<img
src="images/light-blue-line.svg"
alt="line"
className="hidden sm:block absolute top-5 right-1"
/> />
</footer> </footer>
); );

BIN
src/components/Input/danger.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 860 B

171
src/components/Input/index.js
Unescape View File

@ -0,0 +1,171 @@
import React, { useState } from "react";
import _ from "lodash";
import "./index.scss";
import tick from "./tick.png";
import danger from "./danger.png";
const langDetector = (lang, option1, option2) => {
return lang === "fa" ? option1 : option2;
};
const inputStatusHandler = (value, focus, status, primary, success, danger) => {
if (!focus) {
return "";
} else {
if (!value) {
return primary;
} else {
if (status) {
return success;
} else {
return danger;
}
}
}
};
export default function Input(props) {
const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false);
const { lang, theme, inputMode, label, status, maxLength, message } = props;
const onChange = (val) => {
setValue(val);
};
return (
<div
className={_.join(
["input flex flex-col relative my-2", langDetector(lang, "fa", "en")],
" "
)}
>
<label
className={_.join(
[
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white rounded px-2 text-lg transition-all duration-300",
langDetector(lang, "right-2", "left-2"),
inputStatusHandler(
value,
focusToggle,
status,
"input__labelFocus",
"input__labelSuccess",
"input__labelDanger"
),
],
" "
)}
onClick={() => setFocusToggle(true)}
>
{label}
</label>
<input
type="text"
inputMode={inputMode}
className={_.join(
[
"flex-1 border rounded-md outline-none p-2",
inputStatusHandler(
value,
focusToggle,
status,
"input__inputActive",
"input__inputSuccess",
"input__inputDanger"
),
"transition",
],
" "
)}
onChange={(e) => onChange(e.target.value)}
value={value}
onFocus={() => setFocusToggle(true)}
onBlur={() => (!value ? setFocusToggle(false) : setFocusToggle(true))}
maxLength={maxLength}
/>
{!status && value && (
<img
src={danger}
alt={langDetector(lang, "اشتباه", "wrong")}
className={_.join(
[
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
langDetector(lang, "left-2", "right-2"),
],
" "
)}
/>
)}
{status && value && (
<img
src={tick}
alt={langDetector(lang, "درست", "right")}
className={_.join(
[
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
langDetector(lang, "left-2", "right-2"),
],
" "
)}
/>
)}
{value && !status && (
<span
className={_.join(
[
"input__message text-xs absolute -bottom-5",
langDetector(lang, "right-2", "left-2"),
inputStatusHandler(
value,
focusToggle,
status,
"",
"input__messageSuccess",
"input__messageDanger"
),
"transition",
],
" "
)}
>
{message}
</span>
)}
{value && (
<span
className={_.join(
[
"input__length absolute -bottom-5 text-xs",
langDetector(lang, "left-2", "right-2"),
inputStatusHandler(
value,
focusToggle,
status,
"",
"input__lengthSuccess",
"input__lengthDanger"
),
"transition",
],
" "
)}
>
{value.length + "/" + maxLength}
</span>
)}
</div>
);
}
Input.defaultProps = {
lang: "fa",
inputMode: "string",
label: "label",
status: "",
maxLength: "",
message: "",
};

60
src/components/Input/index.scss
Unescape View File

@ -0,0 +1,60 @@
$primary: #06BACE;
$gray: #dbdbdb;
$danger: #E00A0A;
$success: #23C933;
.input {
&__labelFocus{
top: 0px !important;
font-size: 9px !important;
color: $primary !important;
}
&__labelDanger{
top: 0px !important;
font-size: 9px !important;
color: $danger !important;
}
&__labelSuccess{
top: 0px !important;
font-size: 9px !important;
color: $success !important;
}
&__inputActive{
border-color: $primary !important;
}
&__inputSuccess{
border-color: $success !important;
}
&__inputDanger{
border-color: $danger !important;
}
&__message{
&Success{
color: $success;
}
&Danger{
color: $danger;
}
}
&__length{
&Success{
color: $success;
}
&Danger{
color: $danger;
}
}
}
.en {
direction: ltr;
text-align: left;
}
.fa {
direction: rtl;
text-align: right;
}

BIN
src/components/Input/tick.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 411 B

210
src/redux/data.js
Unescape View File

@ -17,6 +17,7 @@ import ProductFilter from "../components/ProductFilter";
import Features from "../components/Features"; import Features from "../components/Features";
import Feedback from "../components/Feedback"; import Feedback from "../components/Feedback";
import FooterDesign from "../components/FooterDesign"; import FooterDesign from "../components/FooterDesign";
import Input from "../components/Input";
// mini components // mini components
import MiniComponents from "../components/MiniComponents"; import MiniComponents from "../components/MiniComponents";
@ -301,6 +302,215 @@ const components = [
code: null, code: null,
}, },
}, },
{
name: "Input",
author: "Ashrafi",
props: [
{
name: "maxLength",
type: "string",
required: "false",
description: "بیشترین تعداد کاراکتری که میتوان استفاده کرد.",
defaultValue: "",
},
{
name: "lang",
type: "string",
required: "false",
description: "زبان سایت",
defaultValue: "fa",
},
{
name: "inputMode",
type: "string",
required: "false",
description: "با تعیین این مقدار نوع کیبرد مشخص میشود.",
defaultValue: "text",
},
{
name: "label",
type: "string",
required: "false",
description: "",
defaultValue: "label",
},
],
content: {
name: "Input",
component: <Input />,
code: `import React, { useState } from "react";
import _ from "lodash";
import "./index.scss";
import tick from "./tick.png";
import danger from "./danger.png";
const langDetector = (lang, option1, option2) => {
return lang === "fa" ? option1 : option2;
};
const inputStatusHandler = (value, focus, status, primary, success, danger) => {
if (!focus) {
return "";
} else {
if (!value) {
return primary;
} else {
if (status) {
return success;
} else {
return danger;
}
}
}
};
export default function Input(props) {
const [value, setValue] = useState("");
const [focusToggle, setFocusToggle] = useState(false);
const { lang, theme, inputMode, label, status, maxLength, message } = props;
const onChange = (val) => {
setValue(val);
};
return (
<div
className={_.join(
["input flex flex-col relative my-2", langDetector(lang, "fa", "en")],
" "
)}
>
<label
className={_.join(
[
"absolute top-1/2 transform -translate-y-1/2 text-gray-500 bg-white px-2 text-xs transition-all duration-300",
langDetector(lang, "right-2", "left-2"),
inputStatusHandler(
value,
focusToggle,
status,
"input__labelFocus",
"input__labelSuccess",
"input__labelDanger"
),
],
" "
)}
onClick={() => setFocusToggle(true)}
>
{label}
</label>
<input
type="text"
inputMode={inputMode}
className={_.join(
[
"flex-1 border rounded-md outline-none p-2",
inputStatusHandler(
value,
focusToggle,
status,
"input__inputActive",
"input__inputSuccess",
"input__inputDanger"
),
"transition",
],
" "
)}
onChange={(e) => onChange(e.target.value)}
value={value}
onFocus={() => setFocusToggle(true)}
onBlur={() => !value ? setFocusToggle(false) : setFocusToggle(true)}
maxLength={maxLength}
/>
{!status && value && (
<img
src={danger}
alt={langDetector(lang, "اشتباه", "wrong")}
className={_.join(
[
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
langDetector(lang, "left-2", "right-2"),
],
" "
)}
/>
)}
{status && value && (
<img
src={tick}
alt={langDetector(lang, "درست", "right")}
className={_.join(
[
"w-4 h-4 absolute top-1/2 transform -translate-y-1/2",
langDetector(lang, "left-2", "right-2"),
],
" "
)}
/>
)}
{value && !status && (
<span
className={_.join(
[
"input__message text-xs absolute -bottom-5",
langDetector(lang, "right-2", "left-2"),
inputStatusHandler(
value,
focusToggle,
status,
"",
"input__messageSuccess",
"input__messageDanger"
),
"transition",
],
" "
)}
>
{message}
</span>
)}
{value && (
<span
className={_.join(
[
"input__length absolute -bottom-5 text-xs",
langDetector(lang, "left-2", "right-2"),
inputStatusHandler(
value,
focusToggle,
status,
"",
"input__lengthSuccess",
"input__lengthDanger"
),
"transition",
],
" "
)}
>
{value.length + "/" + maxLength}
</span>
)}
</div>
);
}
Input.defaultProps = {
lang : 'fa',
inputMode : 'string',
label : '',
status : '',
maxLength : '',
message : '',
}`,
},
},
// mini components // mini components
{ {
name: "Mini Components", name: "Mini Components",

Write Preview
Loading…
Cancel
Save