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
Split 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 FooterDesign1 from "./components/footer/design1/FooterDesign1";
import Testttt from "./components/testtttt/Testttt";
import Design2D from "./components/Design2D/Design2D";
function App() {
return (
<div className="App">
<ProductDesign />
<VodProductDesign />
<BookDesign />
<ButtonDesign />
<ProductTags />
<CounterDesign />
<BlogDesign1 />
<BlogDesign2 />
<BlogDesign3 />
<BlogDesign4 />
<BlogDesign5 />
<BlogDesign6 />
<HeaderDesign1 />
<ContactInfoSection />
<FooterDesign1 />
{/* <BookDesign /> */}
{/* <ButtonDesign /> */}
{/* <ProductTags /> */}
{/* <CounterDesign /> */}
{/* <BlogDesign1 /> */}
{/* <BlogDesign2 /> */}
{/* <BlogDesign3 /> */}
{/* <BlogDesign4 /> */}
{/* <BlogDesign5 /> */}
{/* <BlogDesign6 /> */}
{/* <HeaderDesign1 /> */}
{/* <ContactInfoSection /> */}
{/* <FooterDesign1 /> */}
{/* <Testttt /> */}
{/* <Design2D /> */}
</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 StarRating from "../starRating/StarRating";
@ -41,8 +39,6 @@ const ProductDesign = ({
rangeWidth,
addToCartHolder,
}) => {
const [isHovering, setIsHovering] = useState(false);
return (
<section className="w-11/12 mx-auto p-4 bg-white rounded-md shadow-md my-8">
{/* 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}`}
>
{/* product image */}
<div className="w-full relative">
<div className="w-full relative group">
{/* icons on image */}
<div className="absolute left-2 top-2">
{discountPricePercent && (
@ -112,14 +108,12 @@ const ProductDesign = ({
)}
</div>
{/* img */}
<div className="flex-shrink-0">
<div className="">
{verticalImg && (
<img
src={book}
alt=""
className="w-full rounded-lg cursor-pointer"
onMouseEnter={() => setIsHovering(true)}
onMouseLeave={() => setIsHovering(false)}
/>
)}
{horizontalImg && (
@ -159,25 +153,21 @@ const ProductDesign = ({
<ReactTooltip place="top" type="dark" effect="float" />
</div>
)}
<div
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>
</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">
افزودن به سبد خرید
</button>
</div>
{/* product content */}
<div className="px-2">
<div className="mt-4">
<h2
className={`leading-4 text-sm ${productTitleColor} ${productTitleAlignment}`}
className={`leading-4 text-base ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
{productContent && (
<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 */}
{addToCartHolder && (
<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" : ""
}`}
>

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

@ -7,7 +7,7 @@ const Testttt = () => {
return (
<div className="p-20 relative">
<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"
}`}
>

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

@ -69,7 +69,7 @@ const VodProductDesign = ({
>
{/* product image */}
<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={{
backgroundImage: `url(${watermelon})`,
backgroundSize: "100% 100%",
@ -98,7 +98,9 @@ const VodProductDesign = ({
)}
</div>
{/* 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" />
</div>
{/* select Color */}
@ -143,7 +145,7 @@ const VodProductDesign = ({
className={`flex ${productTitleCategoryHolder} ${productTitleCategoryHolderAlignment} justify-between `}
>
<h2
className={`leading-4 text-sm mb-2 ${productTitleColor} ${productTitleAlignment}`}
className={`leading-4 text-base mb-2 ${productTitleColor} ${productTitleAlignment}`}
>
نسخه چاپی علموم تجربه هفتم
</h2>
@ -157,7 +159,7 @@ const VodProductDesign = ({
</div>
{productContent && (
<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 */}
{addToCartHolder && (
<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" : ""
}`}
>
@ -246,7 +248,7 @@ const VodProductDesign = ({
</section>
);
};
// hover:-translate-y-2
export default VodProductDesign;
// text colors i used for product title:

Write Preview
Loading…
Cancel
Save