tabexseriescomponents 0.0.217 → 0.0.220

package/srcold/TabexComponents/Cards/UserCardWithSocialMediaOnHover/UserCardWithSocialMediaOnHover.jsx

@@ -0,0 +1,184 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import { IKImage } from 'imagekitio-react';
+import { IKpublicKey, IKurlEndpoint } from '../../../../Env';
+import cardstyles from '../../../styles/cards/UserCardWithSocialMediaOnHover.module.css';
+import { FaFacebookF } from '@react-icons/all-files/fa/FaFacebookF';
+import { AiFillInstagram } from '@react-icons/all-files/ai/AiFillInstagram';
+
+const UserCardWithSocialMediaOnHover = (props) => {
+    const [sectionproperties, setsectionproperties] = useState('');
+    const [item, setitem] = useState(props.cardinfoitemprops);
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const langdetect = props.actions.langdetect;
+    const StaticPagesLinksContext = props.actions.StaticPagesLinksContext;
+    const routingcountext = props.actions.routingcountext;
+    const cardonclickfunctionContext = props.actions.cardonclickfunctionContext;
+    useEffect(() => {
+        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]);
+    const card_cssstyles = {
+        productcard: css({
+            background: sectionproperties.backgroundColortransparent == 'Transparent' ? 'transparent' : sectionproperties.backgroundColor,
+            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',
+            marginTop: sectionproperties.marginTop + 'px',
+            marginBottom: sectionproperties.marginBottom + 'px',
+            paddingLeft: langdetect == 'en' ? sectionproperties.paddingLeft + 'px' : sectionproperties.paddingRight + 'px',
+            paddingRight: langdetect == 'en' ? sectionproperties.paddingRight + 'px' : sectionproperties.paddingLeft + 'px',
+            paddingTop: sectionproperties.paddingTop + 'px',
+            paddingBottom: sectionproperties.paddingBottom + 'px',
+            border: sectionproperties.sectioncardborderwidth + 'px solid ' + sectionproperties.sectioncardbordercolor,
+            transition: '.3s',
+            ':hover .card_image': {
+                transition: '.3s',
+                opacity: sectionproperties.darknessopacity,
+            },
+        }),
+        image_container: css({
+            height: sectionproperties.image_height + 'px',
+            background: sectionproperties.image_bgtransparent == 'Transparent' ? '' : sectionproperties.image_bgcolor,
+            border: sectionproperties.image_borderwidth + 'px solid ' + sectionproperties.image_bordercolor,
+            borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
+            borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
+            borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
+            borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px',
+            transition: '.3s',
+        }),
+        titleStyles: css({
+            color: sectionproperties.generaltext_fontColor,
+            fontSize: sectionproperties.generaltext_fontSize + 'px',
+            textTransform: sectionproperties.generaltext_textTransform,
+            fontWeight: sectionproperties.generaltext_fontWeight,
+        }),
+        descriptionStyles: css({
+            color: sectionproperties.prodCatColor,
+            fontSize: sectionproperties.prodCatFontSize + 'px',
+            fontWeight: sectionproperties.prodCatFontWeight,
+            textTransform: sectionproperties.prodCatTextTranform,
+        }),
+        facebook_btn: css({
+            background: sectionproperties.facebkbtnn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.facebkbtnnbgColor,
+            width: sectionproperties.facebkbtnnWidth + 'px',
+            height: sectionproperties.facebkbtnnHeight + 'px',
+            borderRadius: sectionproperties.facebkbtnn_borderRadius + 'px',
+            color: sectionproperties.facebkbtnnTextcolor,
+            border: sectionproperties.facebkbtnnborderwidth + 'px solid ' + sectionproperties.facebkbtnnbordercolor,
+            transition: 'ease .3s',
+            ':hover': {
+                background: sectionproperties.facebkbtnntransparentbgcoloronhover == 'Transparent' ? 'Transparent' : sectionproperties.facebkbtnnbgColoronhover,
+                color: sectionproperties.facebkbtnnTextcoloronhover,
+                borderColor: sectionproperties.facebkbtnntransparentbgcoloronhover == 'Transparent' ? sectionproperties.facebkbtnnTextcoloronhover : sectionproperties.facebkbtnnbgColoronhover,
+            },
+        }),
+        instgram_btn: css({
+            background: sectionproperties.instgrambtn_bgtransparent == 'Transparent' ? 'transparent' : sectionproperties.instgrambtnbgColor,
+            width: sectionproperties.instgrambtnWidth + 'px',
+            height: sectionproperties.instgrambtnHeight + 'px',
+            borderRadius: sectionproperties.instgrambtn_borderRadius + 'px',
+            color: sectionproperties.instgrambtnTextcolor,
+            border: sectionproperties.instgrambtnborderwidth + 'px solid ' + sectionproperties.instgrambtnbordercolor,
+            transition: 'ease .3s',
+            ':hover': {
+                background: sectionproperties.instgrambtn_transparentbgcoloronhover == 'Transparent' ? 'transparent' : sectionproperties.instgrambtnbgColoronhover,
+                color: sectionproperties.instgrambtnTextcoloronhover,
+                borderColor: sectionproperties.instgrambtn_transparentbgcoloronhover == 'Transparent' ? sectionproperties.instgrambtnTextcoloronhover : sectionproperties.instgrambtnbgColoronhover,
+            },
+        }),
+    };
+
+    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',
+            }}
+        >
+            {sectionproperties.length != 0 && (
+                <div class={`${card_cssstyles.productcard} ${cardstyles.productcard}` + ' w-100 w-100 '}>
+                    <div class={`${card_cssstyles.image_container} ${cardstyles.image_container}`} style={{ position: 'relative' }}>
+                        <IKImage
+                            urlEndpoint={IKurlEndpoint}
+                            publicKey={IKpublicKey}
+                            path={'/tr:w-' + sectionproperties.imagetr_w + ',h-' + sectionproperties.imagetr_h + '/' + item.image}
+                            style={{
+                                width: '100%',
+                                height: '100%',
+                                objectFit: sectionproperties.bgcovercontain == 'Cover' ? 'cover' : 'contain',
+                                borderBottomLeftRadius: langdetect == 'en' ? sectionproperties.image_borderBottomLeftRadius + 'px' : sectionproperties.image_borderBottomRightRadius + 'px',
+                                borderBottomRightRadius: langdetect == 'en' ? sectionproperties.image_borderBottomRightRadius + 'px' : sectionproperties.image_borderBottomLeftRadius + 'px',
+                                borderTopLeftRadius: langdetect == 'en' ? sectionproperties.image_bordertopleftradius + 'px' : sectionproperties.image_bordertoprightradius + 'px',
+                                borderTopRightRadius: langdetect == 'en' ? sectionproperties.image_bordertoprightradius + 'px' : sectionproperties.image_bordertopleftradius + 'px',
+                            }}
+                            class="card_image"
+                            loading="lazy"
+                        />
+                        <ul class={`${cardstyles.buttons_container1}` + ' m-0 p-0 '}>
+                            {sectionproperties.fbbtn_show == 'Show' && item.fblink != null && item.fblink != '' && (
+                                <li class={langdetect == 'en' ? ' mr-3 ' : ' ml-3 '}>
+                                    <span
+                                        class={card_cssstyles.facebook_btn + ' cursor-pointer '}
+                                        onClick={() => {
+                                            window.open(item.fblink);
+                                        }}
+                                    >
+                                        <i class="h-100 d-flex align-items-center justify-content-center">
+                                            <FaFacebookF size={sectionproperties.facebkbtnniconfontsize} />
+                                        </i>
+                                    </span>
+                                </li>
+                            )}
+                            {sectionproperties.instbtn_show == 'Show' && item.instlink != null && item.instlink != '' && (
+                                <li class={langdetect == 'en' ? ' ml-3 ' : ' mr-3 '}>
+                                    <span
+                                        class={card_cssstyles.instgram_btn + ' cursor-pointer '}
+                                        onClick={() => {
+                                            window.open(item.instlink);
+                                        }}
+                                    >
+                                        <i class="h-100 d-flex align-items-center justify-content-center">
+                                            <AiFillInstagram size={sectionproperties.instgrambtniconfontsize} />
+                                        </i>
+                                    </span>
+                                </li>
+                            )}
+                        </ul>
+                    </div>
+                    <div
+                        class={'row m-0 w-100 text-center mt-2'}
+                        style={{
+                            paddingLeft: sectionproperties.paddingLeft + 'px',
+                            paddingRight: sectionproperties.paddingRight + 'px',
+                        }}
+                    >
+                        {/* {sectionproperties.prodNameShow == 'Show' && ( */}
+                        <div class="col-lg-12 m-0 p-0">
+                            <p class={`${card_cssstyles.descriptionStyles}` + ' p-0 m-0 wordbreak wordbreak1 '}>{item.description}</p>
+                        </div>
+                        {/* )} */}
+                        {/* {sectionproperties.prodNameShow == 'Show' && ( */}
+                        <div class="col-lg-12 m-0 p-0">
+                            <p class={`${card_cssstyles.titleStyles}` + ' p-0 m-0 wordbreak wordbreak1 '}>{item.name}</p>
+                        </div>
+                        {/* )} */}
+                    </div>
+                </div>
+            )}
+        </div>
+    );
+};
+export default UserCardWithSocialMediaOnHover;