Update social media icons

sgcarstrends · Dec 2, 2024 · af247b6 · af247b6
1 parent 1a3700c
commit af247b6
Show file tree

Hide file tree

Showing 2 changed files with 32 additions and 22 deletions.
diff --git a/components/AppSidebar.tsx b/components/AppSidebar.tsx
@@ -2,6 +2,15 @@
 
 import Link from "next/link";
 import { usePathname } from "next/navigation";
+import {
+  type IconType,
+  SiBluesky,
+  SiFacebook,
+  SiGithub,
+  SiInstagram,
+  SiLinkedin,
+  SiX,
+} from "@icons-pack/react-simple-icons";
 import {
   Collapsible,
   CollapsibleContent,
@@ -12,14 +21,9 @@ import {
   ChevronRight,
   DollarSign,
   Droplet,
-  Facebook,
   Fuel,
   Gauge,
-  Github,
-  Instagram,
-  Linkedin,
   type LucideIcon,
-  Twitter,
   Zap,
 } from "lucide-react";
 
@@ -43,17 +47,19 @@ import { VEHICLE_TYPE_MAP } from "@/constants";
 import { slugify } from "@/utils/slugify";
 import type { VehicleType } from "@/types";
 
+type Icon = LucideIcon | IconType;
+
 type NavItem = {
   title: string;
-  icon?: LucideIcon;
+  icon?: Icon;
   url: string;
   isActive?: boolean;
   items?: NavSubItem[];
 };
 
 type NavSubItem = {
   title: string;
-  icon?: LucideIcon;
+  icon?: Icon;
   url: string;
 };
 
@@ -276,27 +282,32 @@ const data: Nav = {
     {
       title: "Facebook",
       url: "https://facebook.com/sgcarstrends",
-      icon: Facebook,
+      icon: SiFacebook,
     },
     {
       title: "Twitter",
       url: "https://twitter.com/sgcarstrends",
-      icon: Twitter,
+      icon: SiX,
     },
     {
       title: "Instagram",
       url: "https://instagram.com/sgcarstrends",
-      icon: Instagram,
+      icon: SiInstagram,
     },
     {
       title: "LinkedIn",
       url: "https://linkedin.com/company/sgcarstrends",
-      icon: Linkedin,
+      icon: SiLinkedin,
     },
     {
       title: "GitHub",
       url: "https://github.com/sgcarstrends",
-      icon: Github,
+      icon: SiGithub,
+    },
+    {
+      title: "Bluesky",
+      url: "https://bsky.app/profile/sgcarstrends",
+      icon: SiBluesky,
     },
   ].sort((a, b) => a.title.localeCompare(b.title)),
 };
diff --git a/components/NavSocialMedia.tsx b/components/NavSocialMedia.tsx
@@ -1,13 +1,12 @@
-import * as React from "react";
-import { type LucideIcon } from "lucide-react";
-
+import type { ComponentPropsWithoutRef } from "react";
 import {
   SidebarGroup,
   SidebarGroupContent,
   SidebarMenu,
   SidebarMenuButton,
   SidebarMenuItem,
 } from "@/components/ui/sidebar";
+import type { IconType } from "@icons-pack/react-simple-icons";
 
 export const NavSocialMedia = ({
   items,
@@ -16,18 +15,18 @@ export const NavSocialMedia = ({
   items: {
     title: string;
     url: string;
-    icon?: LucideIcon;
+    icon?: IconType;
   }[];
-} & React.ComponentPropsWithoutRef<typeof SidebarGroup>) => (
+} & ComponentPropsWithoutRef<typeof SidebarGroup>) => (
   <SidebarGroup {...props}>
     <SidebarGroupContent>
       <SidebarMenu>
-        {items.map((item) => (
-          <SidebarMenuItem key={item.title}>
+        {items.map(({ title, url, icon: Icon }) => (
+          <SidebarMenuItem key={title}>
             <SidebarMenuButton asChild size="sm">
-              <a href={item.url} target="_blank">
-                {item.icon && <item.icon />}
-                <span>{item.title}</span>
+              <a href={url} rel="me noreferrer" target="_blank">
+                {Icon && <Icon title="" />}
+                <span>{title}</span>
               </a>
             </SidebarMenuButton>
           </SidebarMenuItem>