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

update

Browse Source
master
mahdi 3 years ago
parent f897e728a5
commit a3ae1a515c
5 changed files with 76 additions and 38 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. 28
      src/App.js
  2. 44
      src/components/Design2D/Design2D.js
  3. 26
      src/components/productDesign/ProductDesign.js
  4. 2
      src/components/testtttt/Testttt.js
  5. 14
      src/components/vodProductDesign/VodProductDesign.js

28
src/App.js
Unescape View File

@ -15,26 +15,28 @@ import VodProductDesign from "./components/vodProductDesign/VodProductDesign";
import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection"; import ContactInfoSection from "./components/contactInfoSection/ContactInfoSection";
import FooterDesign1 from "./components/footer/design1/FooterDesign1"; import FooterDesign1 from "./components/footer/design1/FooterDesign1";
import Testttt from "./components/testtttt/Testttt"; import Testttt from "./components/testtttt/Testttt";
import Design2D from "./components/Design2D/Design2D";
function App() { function App() {
return ( return (
<div className="App"> <div className="App">
<ProductDesign /> <ProductDesign />
<VodProductDesign /> <VodProductDesign />
<BookDesign /> {/* <BookDesign /> */}
<ButtonDesign /> {/* <ButtonDesign /> */}
<ProductTags /> {/* <ProductTags /> */}
<CounterDesign /> {/* <CounterDesign /> */}
<BlogDesign1 /> {/* <BlogDesign1 /> */}
<BlogDesign2 /> {/* <BlogDesign2 /> */}
<BlogDesign3 /> {/* <BlogDesign3 /> */}
<BlogDesign4 /> {/* <BlogDesign4 /> */}
<BlogDesign5 /> {/* <BlogDesign5 /> */}
<BlogDesign6 /> {/* <BlogDesign6 /> */}
<HeaderDesign1 /> {/* <HeaderDesign1 /> */}
<ContactInfoSection /> {/* <ContactInfoSection /> */}
<FooterDesign1 /> {/* <FooterDesign1 /> */}
{/* <Testttt /> */} {/* <Testttt /> */}
{/* <Design2D /> */}
</div> </div>
); );
} }

44
src/components/Design2D/Design2D.js
Unescape View File

@ -0,0 +1,44 @@
import React from "react";
const Design2D = ({ array }) => {
return (
<section className="flex items-center justify-around bg-white h-60">
{array.map((item, index) => (
<div
className={`flex flex-col h-full`}
style={{ flex: item.flex }}
key={index}
>
{item.items.map((item1, index) => (
<div
className={`flex ${item1.bg}`}
style={{ flex: item1.flex }}
></div>
))}
</div>
))}
</section>
);
};
export default Design2D;
Design2D.defaultProps = {
array: [
{
flex: 6,
items: [{ bg: "bg-red-500", flex: 1 }],
},
{
flex: 4,
items: [{ bg: "bg-green-500", flex: 1 }],
},
{
flex: 2,
items: [
{ bg: "bg-blue-500", flex: 1 },
{ bg: "bg-yellow-500", flex: 1 },
],
},
],
};

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

@ -1,5 +1,3 @@
import React, { useState } from "react";
import "./ProductDesign.scss"; import "./ProductDesign.scss";
import StarRating from "../starRating/StarRating"; import StarRating from "../starRating/StarRating";
@ -41,8 +39,6 @@ const ProductDesign = ({
rangeWidth, rangeWidth,
addToCartHolder, addToCartHolder,
}) => { }) => {
const [isHovering, setIsHovering] = useState(false);
return ( return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8"> <section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* title holder */} {/* title holder */}
@ -90,7 +86,7 @@ const ProductDesign = ({
className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`} className={`w-full sm:w-60 md:w-72 mx-1 rounded-lg shadow-sm p-2 my-3 ${productHolderBorder} ${productHolderBorderColor}`}
> >
{/* product image */} {/* product image */}
<div className="w-full relative"> <div className="w-full relative group">
{/* icons on image */} {/* icons on image */}
<div className="absolute left-2 top-2"> <div className="absolute left-2 top-2">
{discountPricePercent && ( {discountPricePercent && (
@ -112,14 +108,12 @@ const ProductDesign = ({
)} )}
</div> </div>
{/* img */} {/* img */}
<div className="flex-shrink-0"> <div className="">
{verticalImg && ( {verticalImg && (
<img <img
src={book} src={book}
alt="" alt=""
className="w-full rounded-lg cursor-pointer" className="w-full rounded-lg cursor-pointer"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/> />
)} )}
{horizontalImg && ( {horizontalImg && (
@ -159,25 +153,21 @@ const ProductDesign = ({
<ReactTooltip place="top" type="dark" effect="float" /> <ReactTooltip place="top" type="dark" effect="float" />
</div> </div>
)} )}
<div <button className="group-hover:opacity-100 bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 opacity-0 transition duration-300">
className={`bg-blueBgColor text-white rounded p-2 text-xs absolute left-1/2 bottom-7 transform -translate-x-1/2 -translate-y-1/2 ${ افزودن به سبد خرید
isHovering ? "" : "hidden" </button>
}`}
>
<button>افزودن به سبد خرید</button>
</div>
</div> </div>
{/* product content */} {/* product content */}
<div className="px-2"> <div className="px-2">
<div className="mt-4"> <div className="mt-4">
<h2 <h2
className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`} className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
> >
نسخه چاپی علموم تجربه هفتم نسخه چاپی علموم تجربه هفتم
</h2> </h2>
{productContent && ( {productContent && (
<p <p
className={`text-justify mt-2 text-xs leading-6 ${productExcerptTextColor}`} className={`text-justify mt-2 text-sm leading-6 ${productExcerptTextColor}`}
> >
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد. خوب دیگری نیز دارد.
@ -226,7 +216,7 @@ const ProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${ className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >

2
src/components/testtttt/Testttt.js
Unescape View File

@ -7,7 +7,7 @@ const Testttt = () => {
return ( return (
<div className="p-20 relative"> <div className="p-20 relative">
<button <button
className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer ${ className={`bg-red-400 p-4 rounded absolute top-0 right-10 cursor-pointer transition delay-500 ${
isHovering ? "" : "hidden" isHovering ? "" : "hidden"
}`} }`}
> >

14
src/components/vodProductDesign/VodProductDesign.js
Unescape View File

@ -69,7 +69,7 @@ const VodProductDesign = ({
> >
{/* product image */} {/* product image */}
<div <div
className="parent-img w-full relative flex items-center justify-center cursor-pointer" className="group w-full relative flex items-center justify-center cursor-pointer"
style={{ style={{
backgroundImage: `url(${watermelon})`, backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%", backgroundSize: "100% 100%",
@ -98,7 +98,9 @@ const VodProductDesign = ({
)} )}
</div> </div>
{/* play button */} {/* play button */}
<div className={`playBtnImg rounded-full p-4 ${playBtnBgColor}`}> <div
className={`playBtnImg rounded-full p-4 group-hover:p-5 ${playBtnBgColor}`}
>
<img src={whitePlayIcon} alt="" className="w-5 h-5" /> <img src={whitePlayIcon} alt="" className="w-5 h-5" />
</div> </div>
{/* select Color */} {/* select Color */}
@ -143,7 +145,7 @@ const VodProductDesign = ({
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `} className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
> >
<h2 <h2
className={`leading-4 text-sm mb-2 ${productTitleColor} ${productTitleAlignment}`} className={`leading-4 text-base mb-2 ${productTitleColor} ${productTitleAlignment}`}
> >
نسخه چاپی علموم تجربه هفتم نسخه چاپی علموم تجربه هفتم
</h2> </h2>
@ -157,7 +159,7 @@ const VodProductDesign = ({
</div> </div>
{productContent && ( {productContent && (
<p <p
className={`text-justify text-xs leading-6 ${productExcerptTextColor}`} className={`text-justify text-sm leading-6 ${productExcerptTextColor}`}
> >
این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های این کتاب شامل گلدان و گیاه و خاک می باشد و همچنین آپشن های
خوب دیگری نیز دارد. خوب دیگری نیز دارد.
@ -201,7 +203,7 @@ const VodProductDesign = ({
{/* add to cart */} {/* add to cart */}
{addToCartHolder && ( {addToCartHolder && (
<button <button
className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 hover:-translate-y-2 ${ className={`rounded-2xl px-2 py-3 border text-xs text-productPrice mt-2 hover:bg-darkCrimsonBgColor hover:text-white active:bg-rangeFillBgColor transition duration-500 ${
priceDirection.indexOf("col") !== -1 ? "w-full" : "" priceDirection.indexOf("col") !== -1 ? "w-full" : ""
}`} }`}
> >
@ -246,7 +248,7 @@ const VodProductDesign = ({
</section> </section>
); );
}; };
// hover:-translate-y-2
export default VodProductDesign; export default VodProductDesign;
// text colors i used for product title: // text colors i used for product title:

Write Preview
Loading…
Cancel
Save