Social icons

codelitdev · Jan 31, 2024 · 5a7a927 · 5a7a927
1 parent 01c3f1c
commit 5a7a927
Show file tree

Hide file tree

Showing 8 changed files with 167 additions and 25 deletions.
diff --git a/packages/common-widgets/src/footer/admin-widget/index.tsx b/packages/common-widgets/src/footer/admin-widget/index.tsx
@@ -24,6 +24,7 @@ import {
     titleFontSize as defaultTitleFontSize,
     sectionHeaderFontSize as defaultSectionHeaderFontSize,
     socials as defaultSocials,
+    socialIconsSize as defaultSocialIconsSize,
 } from "../defaults";
 
 export interface AdminWidgetProps {
@@ -67,6 +68,9 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
     const [socials, setSocials] = useState<Socials>(
         settings.socials || defaultSocials,
     );
+    const [socialIconsSize, setSocialIconsSize] = useState(
+        settings.socialIconsSize || defaultSocialIconsSize,
+    );
 
     useEffect(() => {
         onChange({
@@ -78,6 +82,7 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
             titleFontSize,
             sectionHeaderFontSize,
             socials,
+            socialIconsSize,
         });
     }, [
         sections,
@@ -88,6 +93,7 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
         titleFontSize,
         sectionHeaderFontSize,
         socials,
+        socialIconsSize,
     ]);
 
     const addNewSection = () => {
@@ -260,17 +266,7 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
                 </Button>
             </AdminWidgetPanel>
             <AdminWidgetPanel title="Social media">
-                <Form>
-                    <FormField
-                        label="Facebook"
-                        value={socials.facebook}
-                        onChange={(e) => setSocial("facebook", e.target.value)}
-                    />
-                    <FormField
-                        label="Facebook"
-                        value={socials.facebook}
-                        onChange={(e) => setSocial("facebook", e.target.value)}
-                    />
+                <Form className="flex flex-col gap-2">
                     <FormField
                         label="Facebook"
                         value={socials.facebook}
@@ -319,6 +315,18 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
                     value={backgroundColor || "inherit"}
                     onChange={(value?: string) => setBackgroundColor(value)}
                 />
+                <Select
+                    title="Section headers font weight"
+                    value={sectionHeaderFontSize}
+                    options={[
+                        { label: "Normal", value: "font-normal" },
+                        { label: "Bold", value: "font-medium" },
+                        { label: "Bolder", value: "font-semibold" },
+                    ]}
+                    onChange={(
+                        value: "font-semibold" | "font-normal" | "font-medium",
+                    ) => setSectionHeaderFontSize(value)}
+                />
                 <ContentPaddingSelector
                     value={horizontalPadding}
                     min={50}
@@ -336,17 +344,12 @@ export default function AdminWidget({ settings, onChange }: AdminWidgetProps) {
                     value={titleFontSize}
                     onChange={setTitleFontSize}
                 />
-                <Select
-                    title="Section headers font weight"
-                    value={sectionHeaderFontSize}
-                    options={[
-                        { label: "Normal", value: "font-normal" },
-                        { label: "Bold", value: "font-medium" },
-                        { label: "Bolder", value: "font-semibold" },
-                    ]}
-                    onChange={(
-                        value: "font-semibold" | "font-normal" | "font-medium",
-                    ) => setSectionHeaderFontSize(value)}
+                <PageBuilderSlider
+                    title="Social icons size"
+                    min={16}
+                    max={48}
+                    value={socialIconsSize}
+                    onChange={setSocialIconsSize}
                 />
             </AdminWidgetPanel>
         </div>

diff --git a/packages/common-widgets/src/footer/defaults.ts b/packages/common-widgets/src/footer/defaults.ts
@@ -2,4 +2,13 @@ export const horizontalPadding = 100;
 export const verticalPadding = 16;
 export const titleFontSize = 2;
 export const sectionHeaderFontSize = "font-semibold";
-export const socials = {};
+export const socials = {
+    facebook: "",
+    twitter: "",
+    instagram: "",
+    youtube: "",
+    linkedin: "",
+    discord: "",
+    github: "",
+};
+export const socialIconsSize = 24;
diff --git a/packages/common-widgets/src/footer/settings.ts b/packages/common-widgets/src/footer/settings.ts
@@ -31,4 +31,5 @@ export default interface Settings extends WidgetDefaultSettings {
     titleFontSize?: number;
     sectionHeaderFontSize: "font-normal" | "font-semibold" | "font-medium";
     socials?: Socials;
+    socialIconsSize?: number;
 }
diff --git a/packages/common-widgets/src/footer/widget.tsx b/packages/common-widgets/src/footer/widget.tsx
@@ -7,7 +7,18 @@ import {
     horizontalPadding as defaultHorizontalPadding,
     titleFontSize as defaultTitleFontSize,
     sectionHeaderFontSize as defaultSectionHeaderFontSize,
+    socials as defaultSocials,
+    socialIconsSize as defaultSocialIconsSize,
 } from "./defaults";
+import {
+    Facebook,
+    Twitter,
+    LinkedIn,
+    Instagram,
+    Github,
+    Discord,
+    Youtube,
+} from "@courselit/icons";
 
 export interface WidgetProps {
     settings: Settings;
@@ -23,6 +34,8 @@ const Widget = ({
         sections,
         titleFontSize = defaultTitleFontSize,
         sectionHeaderFontSize = defaultSectionHeaderFontSize,
+        socials = defaultSocials,
+        socialIconsSize = defaultSocialIconsSize,
     },
     state,
 }: WidgetProps) => {
@@ -44,10 +57,66 @@ const Widget = ({
                     horizontalPadding || defaultHorizontalPadding
                 }%] gap-4`}
             >
-                <div className="flex flex-col">
+                <div className="flex flex-col gap-4">
                     <h2 className={`text-${titleFontSize}xl mb-4 font-bold`}>
                         {state.siteinfo.title}
                     </h2>
+                    <div className="flex flex-wrap gap-4 items-center mb-8">
+                        {Object.keys(socials).map((key) => (
+                            <>
+                                {socials[key] && (
+                                    <Link
+                                        key={key}
+                                        href={socials[key]}
+                                        {...linkProps}
+                                    >
+                                        {key === "facebook" && (
+                                            <Facebook
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                        {key === "twitter" && (
+                                            <Twitter
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                        {key === "instagram" && (
+                                            <Instagram
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                        {key === "linkedin" && (
+                                            <LinkedIn
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                        {key === "youtube" && (
+                                            <Youtube
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                        {key === "github" && (
+                                            <Github
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                        {key === "discord" && (
+                                            <Discord
+                                                width={socialIconsSize}
+                                                height={socialIconsSize}
+                                            />
+                                        )}
+                                    </Link>
+                                )}
+                            </>
+                        ))}
+                    </div>
                 </div>
                 <div className="flex flex-col flex-wrap lg:!flex-row gap-8">
                     {sections &&

diff --git a/packages/common-widgets/src/pricing/widget.tsx b/packages/common-widgets/src/pricing/widget.tsx
@@ -107,7 +107,10 @@ export default function Widget({
                                         ?.split(",")
                                         .map((x) => x.trim())
                                         .map((feature) => (
-                                            <div className="flex items-center gap-2">
+                                            <div
+                                                className="flex items-center gap-2"
+                                                key={feature}
+                                            >
                                                 {/* <svg
                                             className="w-4 h-4 text-green-500"
                                             viewBox="0 0 20 20"

diff --git a/packages/icons/src/facebook-icon.tsx b/packages/icons/src/facebook-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "@radix-ui/react-icons/dist/types";
+
+export const FacebookIcon = React.forwardRef<SVGSVGElement, IconProps>(
+    ({ color = "currentColor", ...props }, forwardedRef) => {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                {...props}
+                ref={forwardedRef}
+            >
+                <path
+                    d="M18 2h-3a5 5 0 0 0-5 5v3H7v4h3v8h4v-8h3l1-4h-4V7a1 1 0 0 1 1-1h3z"
+                    fill={color}
+                    fillRule="evenodd"
+                    clipRule="evenodd"
+                />
+            </svg>
+        );
+    },
+);
diff --git a/packages/icons/src/index.tsx b/packages/icons/src/index.tsx
@@ -38,3 +38,10 @@ export { InfoCircledIcon as Info } from "@radix-ui/react-icons";
 export { PieChartIcon as PieChart } from "@radix-ui/react-icons";
 export { PaperPlaneIcon as PaperPlane } from "@radix-ui/react-icons";
 export { ClockIcon as Clock } from "@radix-ui/react-icons";
+export { GitHubLogoIcon as Github } from "@radix-ui/react-icons";
+export { TwitterLogoIcon as Twitter } from "@radix-ui/react-icons";
+export { LinkedInLogoIcon as LinkedIn } from "@radix-ui/react-icons";
+export { InstagramLogoIcon as Instagram } from "@radix-ui/react-icons";
+export { DiscordLogoIcon as Discord } from "@radix-ui/react-icons";
+export { FacebookIcon as Facebook } from "./facebook-icon";
+export { YoutubeIcon as Youtube } from "./youtube-icon";
diff --git a/packages/icons/src/youtube-icon.tsx b/packages/icons/src/youtube-icon.tsx
@@ -0,0 +1,25 @@
+import * as React from "react";
+import { IconProps } from "@radix-ui/react-icons/dist/types";
+
+export const YoutubeIcon = React.forwardRef<SVGSVGElement, IconProps>(
+    ({ color = "currentColor", ...props }, forwardedRef) => {
+        return (
+            <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="15"
+                height="15"
+                viewBox="0 0 24 24"
+                fill="none"
+                stroke="currentColor"
+                strokeWidth="1.5"
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                {...props}
+                ref={forwardedRef}
+            >
+                <path d="M2.5 17a24.12 24.12 0 0 1 0-10 2 2 0 0 1 1.4-1.4 49.56 49.56 0 0 1 16.2 0A2 2 0 0 1 21.5 7a24.12 24.12 0 0 1 0 10 2 2 0 0 1-1.4 1.4 49.55 49.55 0 0 1-16.2 0A2 2 0 0 1 2.5 17" />
+                <path d="m10 15 5-3-5-3z" />
+            </svg>
+        );
+    },
+);