delete 3 files and update 2 files

master
mahdi 2 years ago
parent 750418089f
commit 069093b774
  1. 0
      public/images/ProductImageproduct-chair.svg
  2. 0
      public/images/ProductImageproductImg.svg
  3. 58
      src/components/ProductGallery/ProductImage/index.js
  4. 25
      src/components/ProductGallery/index.js
  5. 63
      src/components/ProductImage/index.js
  6. 6
      src/components/Tabels/ReactTable4/index.js
  7. 11
      src/redux/data.js

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

Before

Width:  |  Height:  |  Size: 39 KiB

After

Width:  |  Height:  |  Size: 39 KiB

@ -0,0 +1,58 @@
// it has style inside index.scss ---> // Start ProductImage && end ProductImage
import React from "react";
const ProductImage = ({ images }) => {
console.log(images.length);
return (
<div className="w-4/12 rounded-lg flex flex-row h-72">
<div className="flex flex-col items-center justify-between ml-4 w-16">
{images.slice(0, 4).map((image, index) => (
<div className="relative">
<img
key={index}
src="images/ProductImageproductImg.svg"
alt=""
className={`rounded-sm h-full`}
// style={{ height: "calc(100% - 8px)" }}
// style={{ height: "calc(100% - 8px)" }}
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
<strong>+ {images.length - 3}</strong>
</div>
)}
</div>
))}
</div>
<img src="images/ProductImageproductImg.svg" alt="" className="h-full" />
</div>
);
};
// {[0, 1, 2, 3, 4].map((item, index) => (
// ))}
export default ProductImage;
ProductImage.defaultProps = {
images: [
{
image: "images/ProductImageproductImg.svg",
},
{
image: "images/ProductImageproductImg.svg",
},
{
image: "images/ProductImageproductImg.svg",
},
{
image: "images/ProductImageproductImg.svg",
},
{
image: "images/ProductImageproductImg.svg",
},
],
};

@ -0,0 +1,25 @@
import React, { useState } from "react";
import ProductImage from "./ProductImage";
function ProductGallery() {
const list = {
1: <ProductImage />,
};
const [type, setType] = useState(1);
return (
<div className="w-full flex flex-col items-center">
<select
className="mb-10 w-20 bg-gray-200"
onChange={(e) => setType(e.target.value)}
>
{Object.keys(list).map((option, index) => (
<option key={index}>{option}</option>
))}
</select>
{list[type]}
</div>
);
}
export default ProductGallery;

@ -1,63 +0,0 @@
// it has style inside index.scss ---> // Start ProductImage && end ProductImage
import React from "react";
import productImg from "./productImg.svg";
const ProductImage = ({ images }) => {
console.log(images.length);
return (
<section className="bg-white m-10 border-2 border-gray-300 p-4 rounded-lg">
<div className="w-4/12 flex flex-row h-72">
<div className="flex flex-col items-center justify-between ml-4 w-16">
{images.slice(0, 4).map((image, index) => (
<div className="relative">
<img
key={index}
src={productImg}
alt=""
className={`rounded-sm h-full`}
// style={{ height: "calc(100% - 8px)" }}
// style={{ height: "calc(100% - 8px)" }}
/>
{/* این خط پایین که نوشتم برای این است که ایندکس که جنسش استرینگ است رو به نامبر تبدیل کند */}
{Number(index) === 3 && (
<div className="absolute w-full h-full bg-black bg-opacity-30 left-0 top-0 flex justify-center items-center text-white">
<strong>+ {images.length - 3}</strong>
</div>
)}
</div>
))}
</div>
<img src={productImg} alt="" className="h-full" />
</div>
</section>
);
};
// {[0, 1, 2, 3, 4].map((item, index) => (
// ))}
export default ProductImage;
ProductImage.defaultProps = {
images: [
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
{
image: productImg,
},
],
};

@ -32,12 +32,6 @@ const ReactTable4 = ({ breadCrumbs }) => {
return (
<div className="my-5 w-fit mx-auto">
{/* breadCrumb */}
<div className="flex flex-row items-center">
<BreadCrumb />
{console.log("mahdi")}
{console.log(BreadCrumb)}
</div>
<div className="my-7">
<TitleSubtitle titleBorderClassName={"ml-1 w-1 h-6 bg-red-400"} />
</div>

@ -46,6 +46,7 @@ import FileManager from "../components/FileManager";
import FormFields from "../components/FormFields";
import Tabels from "../components/Tabels";
import LeafletMap from "../components/LeafletMap";
import ProductGallery from "../components/ProductGallery";
// mini components
import MiniComponents from "../components/MiniComponents";
@ -819,6 +820,16 @@ const components = [
code: null,
},
},
{
name: "Product Gallery",
author: "Andalib",
props: [],
content: {
name: "Product Gallery",
component: <ProductGallery />,
code: null,
},
},
// mini components
{
name: "Mini Components",

Loading…
Cancel
Save