tabexseriescomponents 0.0.706 → 0.0.708

package/srcoman/TabexComponents/Cards/Prouductcard_with_zoomhover/Prouductcard_with_zoomhover.jsx

@@ -0,0 +1,137 @@
+import React, { useEffect, useState, useContext } from 'react';
+import cardsstyles from '../../../styles/cards/Prouductcard_with_zoomhover.module.css';
+import { css } from 'glamor';
+import { Imagekitimagecomp } from '../../../Imagekitconfig.jsx';
+const Prouductcard_with_zoomhover = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [item, setitem] = useState(props.cardinfoitemprops);
+    const [index, setindex] = useState(props.cardinfoindexprops);
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const lang = props.actions.lang;
+    const langdetect = props.actions.langdetect;
+    const setShowProductInfoModalContext = props.actions.setShowProductInfoModalContext;
+    const addtofavoritescontext = props.actions.addtofavoritescontext;
+    const setProductIdProdutInfoModalContext = props.actions.setProductIdProdutInfoModalContext;
+    const AddtoCartContext = props.actions.AddtoCartContext;
+    const AddtoCartMutationContext = props.actions.AddtoCartMutationContext;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const routingcountext = props.actions.routingcountext;
+    const cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
+    const ikimagecredcontext = props.actions.ikimagecredcontext;
+
+    useEffect(() => {
+        if (props.srcfrom == 'addsectionform') {
+            var secpropobj = {};
+            props.defaultproperties.forEach(function (defaultpropobj, defaultpropindex) {
+                secpropobj[defaultpropobj.property_css_name] = defaultpropobj.property_value;
+            });
+
+            setsectionproperties({ ...secpropobj });
+        } else {
+            var secpropobj = {};
+            StatePagePropertiesContext.pageobj.sections.forEach(function (sectionitem, sectionindex) {
+                if (sectionitem.sectionid == props.sectionidprops) {
+                    sectionitem.sectionproperties.forEach(function (sectionpropertiesobj, sectionpropertiesindex) {
+                        secpropobj[sectionpropertiesobj.property_css_name] = sectionpropertiesobj.property_value;
+                    });
+                }
+            });
+            setsectionproperties({ ...secpropobj });
+        }
+    }, [StatePagePropertiesContext]);
+    useEffect(() => {
+        setitem(props.cardinfoitemprops);
+    }, [props.cardinfoitemprops]);
+    useEffect(() => {
+        if (props.cardinfoitemprops != undefined) {
+            setitem(props.cardinfoitemprops);
+        }
+    }, [props.cardinfoitemprops]);
+    const card_cssstyles = {
+        productcard: css({
+            background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+            opacity: sectionproperties.cardbg_opacity,
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.borderBottomLeftRadius + 'px' : sectionproperties.borderBottomRightRadius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.borderBottomRightRadius + 'px' : sectionproperties.borderBottomLeftRadius + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.borderTopLeftRadius + 'px' : sectionproperties.borderTopRightRadius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.borderTopRightRadius + 'px' : sectionproperties.borderTopLeftRadius + 'px',
+            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+            paddingTop: sectionproperties.paddingTop + 'px',
+            marginBottom: sectionproperties.marginBottom + 'px',
+            marginTop: sectionproperties.marginTop + 'px',
+            paddingBottom: sectionproperties.paddingBottom + 'px',
+            boxShadow: sectionproperties.sectioncardshadow == 'Show' ? '0 0 10px ' + sectionproperties.sectioncardshadowcolor : 'none',
+            border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+            transition: '.3s',
+            height: '400px',
+            ':hover': {
+                categorycardtext: css({
+                    color: sectionproperties.text_secondarycolor,
+
+                    transitionDelay: '0.3s',
+                    ':after': {
+                        borderBottomColor: sectionproperties.text_secondarycolor,
+                    },
+                }),
+            },
+        }),
+        categorycardtext: css({
+            fontSize: sectionproperties.generaltext_fontSize + 'px',
+            color: sectionproperties.generaltext_fontColor,
+            textTransform: sectionproperties.generaltext_textTransform,
+            fontWeight: sectionproperties.generaltext_fontWeight,
+            opacity: 1,
+            transitionDelay: '0.3s',
+            ':after': {
+                borderBottomColor: sectionproperties.generaltext_fontColor,
+            },
+        }),
+        cardbtn: css({
+            fontWeight: sectionproperties.generalbtn_fontweight,
+            backgroundColor: sectionproperties.generalbtn_bgColortransparent == 'Transparent' ? 'transparent' : sectionproperties.generalbtn_bgColor,
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.generalbtn_bordertopleftradius + 'px' : sectionproperties.generalbtn_bordertoprightradius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.generalbtn_bordertoprightradius + 'px' : sectionproperties.generalbtn_bordertopleftradius + 'px',
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.generalbtn_borderbottomleftradius + 'px' : sectionproperties.generalbtn_borderbottomrightradius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.generalbtn_borderbottomrightradius + 'px' : sectionproperties.generalbtn_borderbottomleftradius + 'px',
+            height: sectionproperties.generalbtn_height + 'px',
+            width: sectionproperties.generalbtn_width + 'px',
+            fontSize: sectionproperties.generalbtn_fontsize + 'px',
+            color: sectionproperties.generalbtn_textColor,
+            textTransform: sectionproperties.generalbtn_texttransform,
+            opacity: sectionproperties.generalbtn_opacity,
+            ':hover': {
+                backgroundColor: sectionproperties.generalbtn_bgColoronhover,
+                color: sectionproperties.generalbtn_textColoronhover,
+                opacity: sectionproperties.generalbtn_opacityonhover,
+            },
+        }),
+    };
+
+    return (
+        <div
+            class="row m-0 w-100"
+            style={{
+                paddingLeft: langdetect == 'en' ? sectionproperties.card_marginLeft + 'px' : sectionproperties.card_marginRight + 'px',
+                paddingRight: langdetect == 'en' ? sectionproperties.card_marginRight + 'px' : sectionproperties.card_marginLeft + 'px',
+            }}
+        >
+            <div
+                class={`${cardsstyles.productcard} ${card_cssstyles.productcard}` + ' d-flex flex-row justify-content-center align-items-center w-100 '}
+                style={{
+                    backgroundImage: `url('https://media.istockphoto.com/photos/fashionable-woman-in-pink-dress-on-pink-background-picture-id917325078?k=20&m=917325078&s=170667a&w=0&h=1QwDo4uUflE8aofqp7bGtw4TNS10ClIh5u13VE75sxk=')`,
+                    backgroundRepeat: 'no-repeat',
+                    backgroundSize: 'cover',
+                }}
+            >
+                <div class="d-flex flex-column justify-content-center align-items-center">
+                    <a class={`${card_cssstyles.categorycardtext}`} href="">
+                        Sale
+                    </a>
+                    <button class={`${card_cssstyles.cardbtn} ` + ' mt-2 '}>Showmore</button>
+                </div>
+            </div>
+        </div>
+    );
+};
+export default Prouductcard_with_zoomhover;