tabexseriescomponents 0.0.705 → 0.0.707

package/srcoriginal/TabexComponents/Headers/SocialMediaSection/SocialMediaSection.jsx

@@ -0,0 +1,151 @@
+import React, { useEffect, useState, useContext } from 'react';
+import { css } from 'glamor';
+import { FaFacebookF } from '@react-icons/all-files/fa/FaFacebookF';
+import { FaWhatsapp } from '@react-icons/all-files/fa/FaWhatsapp';
+import { AiFillInstagram } from '@react-icons/all-files/ai/AiFillInstagram';
+import { AiFillYoutube } from '@react-icons/all-files/ai/AiFillYoutube';
+import { IoLogoTiktok } from '@react-icons/all-files/io5/IoLogoTiktok';
+import { FaLinkedinIn } from '@react-icons/all-files/fa/FaLinkedinIn';
+
+const SocialMediaSection = (props) => {
+    const actions = props.actions;
+    const StatePagePropertiesContext = props.actions.StatePagePropertiesContext;
+    const [sectionproperties, setsectionproperties] = useState({});
+    const [templateproperties_context, settemplateproperties_context] = useState({});
+    const authdetailsContext = props.actions.authdetailsContext;
+
+    useEffect(() => {
+        if (props.sectionpropertiesprops != undefined) {
+            setsectionproperties({ ...props?.sectionpropertiesprops });
+        }
+    }, [props.sectionpropertiesprops]);
+    useEffect(() => {
+        if (props.templateproperties_contextprops != undefined) {
+            settemplateproperties_context({ ...props?.templateproperties_contextprops });
+        }
+    }, [props.templateproperties_contextprops]);
+
+    const header_cssstyles = {
+        socialmediaicon: css({
+            fontSize: templateproperties_context.socialmediasectioniconfontsize + 'px',
+            color: templateproperties_context.socialmediasectioniconcolor,
+            width: templateproperties_context.socialmediasectioniconwidth + 'px',
+            height: templateproperties_context.socialmediasectioniconheight + 'px',
+            border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.socialmediasectionbordercolor,
+            borderRadius: 5,
+            ':hover': {
+                transition: '.3s',
+                color: templateproperties_context.socialmediasectioniconcoloronhover,
+                border: templateproperties_context.socialmediasectioniconborderwidth + 'px solid ' + templateproperties_context.socialmediasectioniconcoloronhover,
+            },
+        }),
+    };
+    return (
+        <div
+            class="col-lg-12 px-0 allcentered"
+            style={{
+                background: templateproperties_context.socialmediasectionbgcolor,
+                paddingTop: templateproperties_context.socialmediapaddinghorizontal + 'px',
+                paddingBottom: templateproperties_context.socialmediapaddinghorizontal + 'px',
+            }}
+        >
+            {authdetailsContext?.instinfo?.facebooklink != null && (
+                <div
+                    class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.facebooklink != null) {
+                            window.open(authdetailsContext?.instinfo?.facebooklink, '_blank');
+                        }
+                    }}
+                >
+                    <FaFacebookF size={templateproperties_context.socialmediasectioniconfontsize} />
+                </div>
+            )}
+            {authdetailsContext?.instinfo?.instagramlink != null && (
+                <div
+                    class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.instagramlink != null) {
+                            window.open(authdetailsContext?.instinfo?.instagramlink, '_blank');
+                        }
+                    }}
+                >
+                    <AiFillInstagram
+                        style={{
+                            fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
+                        }}
+                    />
+                </div>
+            )}
+            {authdetailsContext?.instinfo?.youtubelink != null && (
+                <div
+                    class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.youtubelink != null) {
+                            window.open(authdetailsContext?.instinfo?.youtubelink, '_blank');
+                        }
+                    }}
+                >
+                    <AiFillYoutube
+                        style={{
+                            fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
+                        }}
+                    />
+                </div>
+            )}
+
+            {authdetailsContext?.instinfo?.linkedinlink != null && (
+                <div
+                    class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.linkedinlink != null) {
+                            window.open(authdetailsContext?.instinfo?.linkedinlink, '_blank');
+                        }
+                    }}
+                >
+                    <FaLinkedinIn
+                        style={{
+                            fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
+                        }}
+                    />
+                </div>
+            )}
+
+            {authdetailsContext?.instinfo?.tiktoklink != null && (
+                <div
+                    class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.tiktoklink != null) {
+                            window.open(authdetailsContext?.instinfo?.tiktoklink, '_blank');
+                        }
+                    }}
+                >
+                    <IoLogoTiktok
+                        style={{
+                            fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
+                        }}
+                    />
+                </div>
+            )}
+
+            {authdetailsContext?.instinfo?.whatsappnumber != null && (
+                <div
+                    class={`${header_cssstyles.socialmediaicon}` + '  allcentered mx-2 cursor-pointer '}
+                    onClick={() => {
+                        if (authdetailsContext?.instinfo?.whatsappnumber != null) {
+                            window.open('https://api.whatsapp.com/send?phone=' + authdetailsContext?.instinfo?.whatsappnumber, '_blank');
+                        }
+                    }}
+                >
+                    <FaWhatsapp
+                        style={{
+                            fontSize: parseFloat(templateproperties_context.socialmediasectioniconfontsize) + 2 + 'px',
+                        }}
+                    />
+                </div>
+            )}
+        </div>
+    );
+};
+
+export default SocialMediaSection;