From 86452216843f18bf15c980ed0a7eb3ac37ef943e Mon Sep 17 00:00:00 2001 From: "DESKTOP-BC3NEC6\\chiefsoft" Date: Sun, 5 Feb 2023 18:58:40 -0500 Subject: [PATCH] Blog card --- src/components/Cards/BlogCardStyle.jsx | 212 +++++++++++++++++++++++++ src/components/Resources/BlogTab.jsx | 5 +- 2 files changed, 215 insertions(+), 2 deletions(-) create mode 100644 src/components/Cards/BlogCardStyle.jsx diff --git a/src/components/Cards/BlogCardStyle.jsx b/src/components/Cards/BlogCardStyle.jsx new file mode 100644 index 0000000..2955e0e --- /dev/null +++ b/src/components/Cards/BlogCardStyle.jsx @@ -0,0 +1,212 @@ +import React, { useState } from "react"; +import { Link } from "react-router-dom"; +// import { toast } from "react-toastify"; +import localImgLoad from "../../lib/localImgLoad"; +import Icons from "../Helpers/Icons"; + +export default function BlogCardStyle({ + className, + datas, + hidden = false, +}) { + const [addFavorite, setValue] = useState(datas.whishlisted); + const [options, setOption] = useState(false); + const favoriteHandler = () => { + if (!addFavorite) { + setValue(true); + } else { + setValue(false); + } + }; + return ( +
+
+
+
+
+ +
+
+

Owned by

+

+ {datas.owner} +

+
+
+
+ +
+
+
+
+
+ {datas.isActive && ( + + Active + + )} +
+
+ + + {options && ( +
setOption(!options)} + className="w-full h-screen fixed top-0 left-0 z-10" + >
+ )} +
+
    +
  • setOption(!options)} + className="text-thin-light-gray tracking-wide text-xs cursor-pointer" + > +
    + + + + + + + Share + +
    +
    • +
  • setOption(!options)} + className="text-thin-light-gray tracking-wide text-xs cursor-pointer" + > +
    + + + + + + + Report + +
    +
    • +
+
+
+
+ {hidden && ( +
+ + + + + + + +
+ )} +
+
+
+ {/* title */} + +

+ {datas.title} +

+ +
+
+
+ +
+
+ +
+ +
+
+ +
+
+
+
+
+ ); +} diff --git a/src/components/Resources/BlogTab.jsx b/src/components/Resources/BlogTab.jsx index c4cee3c..147fe93 100644 --- a/src/components/Resources/BlogTab.jsx +++ b/src/components/Resources/BlogTab.jsx @@ -1,7 +1,8 @@ import React from "react"; -import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo"; +//import ProductCardStyleTwo from "../Cards/ProductCardStyleTwo"; import DataIteration from "../Helpers/DataIteration"; import SearchCom from "../Helpers/SearchCom"; +import BlogCardStyle from "../Cards/BlogCardStyle"; export default function BlogTab({ className, products }) { return ( @@ -46,7 +47,7 @@ export default function BlogTab({ className, products }) { endLength={products.length} > {({ datas }) => ( - + )}