From 5a7a9278f21665975eae22ca5f76eea321364aa0 Mon Sep 17 00:00:00 2001 From: Rajat Saxena Date: Thu, 1 Feb 2024 01:28:40 +0530 Subject: [PATCH] Social icons --- .../src/footer/admin-widget/index.tsx | 47 ++++++------ .../common-widgets/src/footer/defaults.ts | 11 ++- .../common-widgets/src/footer/settings.ts | 1 + packages/common-widgets/src/footer/widget.tsx | 71 ++++++++++++++++++- .../common-widgets/src/pricing/widget.tsx | 5 +- packages/icons/src/facebook-icon.tsx | 25 +++++++ packages/icons/src/index.tsx | 7 ++ packages/icons/src/youtube-icon.tsx | 25 +++++++ 8 files changed, 167 insertions(+), 25 deletions(-) create mode 100644 packages/icons/src/facebook-icon.tsx create mode 100644 packages/icons/src/youtube-icon.tsx diff --git a/packages/common-widgets/src/footer/admin-widget/index.tsx b/packages/common-widgets/src/footer/admin-widget/index.tsx index 84e31b07b..ae21adae3 100644 --- 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( 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) { -
- setSocial("facebook", e.target.value)} - /> - setSocial("facebook", e.target.value)} - /> + setBackgroundColor(value)} /> + setSectionHeaderFontSize(value)} + diff --git a/packages/common-widgets/src/footer/defaults.ts b/packages/common-widgets/src/footer/defaults.ts index d1bd9c4ac..be87f6fb2 100644 --- 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 index 8b9ad74df..ea2fd9da2 100644 --- 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 index d8314cce8..e5c2ad2ba 100644 --- 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`} > -
+

{state.siteinfo.title}

+
+ {Object.keys(socials).map((key) => ( + <> + {socials[key] && ( + + {key === "facebook" && ( + + )} + {key === "twitter" && ( + + )} + {key === "instagram" && ( + + )} + {key === "linkedin" && ( + + )} + {key === "youtube" && ( + + )} + {key === "github" && ( + + )} + {key === "discord" && ( + + )} + + )} + + ))} +
{sections && diff --git a/packages/common-widgets/src/pricing/widget.tsx b/packages/common-widgets/src/pricing/widget.tsx index 8cc764f8f..3a8332ede 100644 --- 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) => ( -
+
{/* ( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + ); + }, +); diff --git a/packages/icons/src/index.tsx b/packages/icons/src/index.tsx index 489e68ef4..c72b32073 100644 --- 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 new file mode 100644 index 000000000..38232d5ba --- /dev/null +++ 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( + ({ color = "currentColor", ...props }, forwardedRef) => { + return ( + + + + + ); + }, +);