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

design 1 added

Browse Source
master
mahdi 3 years ago
parent 23bbfdad51
commit 8babf18f5b
7 changed files with 96 additions and 448 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. 12
      src/App.js
  2. 15
      src/assets/icons/black-comment-icon.svg
  3. BIN
      src/assets/images/blog-author.png
  4. BIN
      src/assets/images/blog-featured-image.jpg
  5. 72
      src/components/Blogs/design1/BlogDesign1.js
  6. 442
      src/components/productDesign/ProductDesign.js
  7. 3
      tailwind.config.js

12
src/App.js
Unescape View File

@ -4,15 +4,17 @@ import ProductDesign from "./components/productDesign/ProductDesign";
import ProductTags from "./components/productTags/ProductTags"; import ProductTags from "./components/productTags/ProductTags";
import CounterDesign from "./components/counterDesign/CounterDesign"; import CounterDesign from "./components/counterDesign/CounterDesign";
import { BookDesign } from "./components/bookDesign/BookDesign"; import { BookDesign } from "./components/bookDesign/BookDesign";
import BlogDesign1 from "./components/Blogs/design1/BlogDesign1";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<ProductDesign /> {/* <ProductDesign /> */}
<BookDesign /> {/* <BookDesign /> */}
<ButtonDesign /> {/* <ButtonDesign /> */}
<ProductTags /> {/* <ProductTags /> */}
<CounterDesign /> {/* <CounterDesign /> */}
<BlogDesign1 />
</div> </div>
); );
} }

15
src/assets/icons/black-comment-icon.svg
Unescape View File

@ -0,0 +1,15 @@
<svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 36 36">
<g id="Group_183" data-name="Group 183" transform="translate(-6702 -2215)">
<g id="vuesax_linear_message" data-name="vuesax/linear/message" transform="translate(6018 2031.759)">
<g id="message" transform="translate(684 186)">
<path id="Vector" d="M9,23.546H8.31C2.77,23.546,0,22.16,0,15.235V8.31Q0,0,8.31,0H19.39Q27.7,0,27.7,8.31v6.925q0,8.31-8.31,8.31H18.7a1.4,1.4,0,0,0-1.108.554l-2.078,2.77a1.968,1.968,0,0,1-3.324,0L10.111,24.1A1.565,1.565,0,0,0,9,23.546Z" transform="translate(2.77 2.77)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5"/>
<path id="Vector-2" data-name="Vector" d="M.495.5H.507" transform="translate(21.661 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-3" data-name="Vector" d="M.495.5H.507" transform="translate(16.12 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-4" data-name="Vector" d="M.495.5H.507" transform="translate(10.578 14.735)" fill="none" stroke="#818181" stroke-linecap="round" stroke-linejoin="round" stroke-width="2"/>
<path id="Vector-5" data-name="Vector" d="M0,0H33.241V33.241H0Z" fill="none" opacity="0"/>
</g>
</g>
<circle id="Ellipse_94" data-name="Ellipse 94" cx="6.5" cy="6.5" r="6.5" transform="translate(6725 2215)" fill="#818181"/>
<text id="_17" data-name="17" transform="translate(6735 2223)" fill="#fff" font-size="6" font-family="SegoeUI, Segoe UI"><tspan x="-6.469" y="0">17</tspan></text>
</g>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

BIN
src/assets/images/blog-author.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 3.0 KiB

BIN
src/assets/images/blog-featured-image.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 43 KiB

72
src/components/Blogs/design1/BlogDesign1.js
Unescape View File

@ -0,0 +1,72 @@
import React from "react";
import blogImage from "../../../assets/images/blog-featured-image.jpg";
import blogAuthorImg from "../../../assets/images/blog-author.png";
import commentIcon from "../../../assets/icons/black-comment-icon.svg";
const BlogDesign1 = ({ blogExcerpt, blogAuthor, blogComments }) => {
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */}
<div className="flex items-center justify-between mb-6">
<h2 className="text-lg text-$productTitle">آیتم محصولات</h2>
<button className="bg-indigo-500 text-white rounded shadow-lg p-2">
طراحی بلاگ 1
</button>
</div>
<div className="mb-6">
<p className="leading-10">
آدرس:
<span className="bg-blue-400 text-white rounded shadow-sm px-2 py-1 mx-2">
blogs/design1{" "}
</span>
</p>
</div>
{/* blog UI Design1 */}
<div className="w-full md:w-2/5 flex items-center justify-around py-2 px-4">
<div className="w-4/12">
<img src={blogImage} alt="" className="w-full" />
</div>
<div className="w-8/12 mr-4">
<h2 className="text-base md:text-xl text-justify text-grayTextColor">
آیا مواد غذای پر فیبر و مفید هستند؟
</h2>
{blogExcerpt && (
<p className="text-justify text-sm md:text-base leading-6 my-3 text-grayTextColor">
در این قسمت یک توضیح بسیار کوتاه یا عادی در مورد ارور نوشته خواهد
شد. طراح سعی می کند تا این متن را بیشتر از خد انتظار بلند کند تا
دیگران متوجه شوند.
</p>
)}
<div className=" flex item-center justify-between mt-5">
{blogAuthor && (
<div className=" flex items-center">
<img src={blogAuthorImg} alt="" />
<p className="text-xs text-lightGrayTextColor mr-2">
حامد دژبانی نسب
</p>
</div>
)}
{blogComments && (
<div className=" flex items-center">
<p className="text-xs text-lightGrayTextColor ml-2">
زمان مطالعه 30 دقیقه
</p>
<img src={commentIcon} alt="" />
</div>
)}
</div>
</div>
</div>
</section>
);
};
export default BlogDesign1;
BlogDesign1.defaultProps = {
blogExcerpt: true,
blogAuthor: true,
blogComments: true,
};

442
src/components/productDesign/ProductDesign.js
Unescape View File

@ -65,11 +65,9 @@ const ProductDesign = ({
</div> </div>
{/* product UI Design */} {/* product UI Design */}
<div className="flex flex-wrap sm:flex-nowrap justify-around"> <div className="flex flex-wrap sm:flex-nowrap justify-around">
{/* product items1 */}
<div className="product-items-holder"> <div className="product-items-holder">
{/* item1 */} {/* item1 */}
<div className="product-item"> <div className="product-item">
{/*star img holder*/}
<div className="w-full relative"> <div className="w-full relative">
{discountPricePercent && ( {discountPricePercent && (
<div className="discountPriceBtn"> <div className="discountPriceBtn">
@ -102,7 +100,6 @@ const ProductDesign = ({
</div> </div>
)} )}
</div> </div>
{/* content holder */}
<div className="mt-4"> <div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}> <h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم نسخه چاپی علموم تجربه هفتم
@ -114,7 +111,6 @@ const ProductDesign = ({
</p> </p>
)} )}
</div> </div>
{/* star holder */}
{star && ( {star && (
<div className="flex items-center mt-2"> <div className="flex items-center mt-2">
<StarRating /> <StarRating />
@ -123,7 +119,6 @@ const ProductDesign = ({
</span> </span>
</div> </div>
)} )}
{/* price holder */}
<div <div
className={`flex items-center justify-between ${priceDirection}`} className={`flex items-center justify-between ${priceDirection}`}
> >
@ -154,443 +149,6 @@ const ProductDesign = ({
اضافه کردن به سبد خرید اضافه کردن به سبد خرید
</button> </button>
</div> </div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items2 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items3 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items4 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && (
<div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button>
<button className="product-tag">برچسب های دیگر</button>
<button className="product-tag">دسته بندی به صورت کادو</button>
</div>
)}
</div>
</div>
{/* product items5 */}
<div className="product-items-holder">
{/* item1 */}
<div className="product-item">
{/*star img holder*/}
<div className="w-full relative">
{discountPricePercent && (
<div className="discountPriceBtn">
<p className="dicountPriceNum">
23<span>%</span>
</p>
</div>
)}
{likeBtn && (
<div className="likeBtnBg">
<img src={heart} alt="" className="w-full" />
</div>
)}
{discount && (
<div className="discountBtn">
<img src={discountImg} alt="" className="w-full" />
</div>
)}
{/* img Holder */}
<div className="flex-shrink-0">
<img src={book} alt="" className="w-full rounded-lg" />
</div>
{/* select Color */}
{colors && (
<div className="absolute right-2 bottom-2">
<ul className="flex ">
<li className="ml-1 text-selectColor1">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor2">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor3">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
<li className="ml-1 text-selectColor4">
{/* <FontAwesomeIcon icon="check-square" /> */}
</li>
</ul>
</div>
)}
</div>
{/* content holder */}
<div className="mt-4">
<h2 className={`productTitle ${productTitleAlignment}`}>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<p className="productContent">
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های خوب
دیگری نیز دارد.
</p>
)}
</div>
{/* star holder */}
{star && (
<div className="flex items-center mt-2">
<StarRating />
<span className="text-xs text-productContent font-bold mr-2">
39
</span>
</div>
)}
{/* price holder */}
<div
className={`flex items-center justify-between ${priceDirection}`}
>
{/* price */}
<div className="mt-2">
<div
className={`${
priceDirection.indexOf("col") !== -1 ? "inline" : "flex"
}`}
>
<span className="text-xs text-borderColor ml-2">قیمت</span>
{discountPrice && (
<p className="line-through text-xs text-borderColor mr-2">
145<span>تومان</span>
</p>
)}
</div>
<p className="product-price-num inline">
145.000<span>تومان</span>
</p>
</div>
{/* add to cart */}
<button
className={`addToCart ${
priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`}
>
اضافه کردن به سبد خرید
</button>
</div>
{/* tag holder */}
{productTags && ( {productTags && (
<div className="mt-2 flex flex-wrap"> <div className="mt-2 flex flex-wrap">
<button className="product-tag">ارسال رایگان</button> <button className="product-tag">ارسال رایگان</button>

3
tailwind.config.js
Unescape View File

@ -17,12 +17,13 @@ module.exports = {
selectColor2: "#89ECFF", selectColor2: "#89ECFF",
selectColor3: "#FC5353", selectColor3: "#FC5353",
selectColor4: "#FCF653", selectColor4: "#FCF653",
lightBlueTextColor: "#06BACE",
grayTextColor: "#646464", grayTextColor: "#646464",
lightGrayTextColor: "#818181",
lightOrangeTextColor: "#F7B605", lightOrangeTextColor: "#F7B605",
lightYellowTextColor: "#C8EE49", lightYellowTextColor: "#C8EE49",
lightGreenTextColor: "#5DCE06", lightGreenTextColor: "#5DCE06",
lightPurpleTextColor: "#A680FF", lightPurpleTextColor: "#A680FF",
lightBlueTextColor: "#06BACE",
darkBlueTextColor: "#0615CE", darkBlueTextColor: "#0615CE",
darkRedTextColor: "#CE3B06", darkRedTextColor: "#CE3B06",
}), }),

Write Preview
Loading…
Cancel
Save