MIH Profile Links

mih_ui/lib/mih_package_components/Example/package_tiles/test_package_tile.dart

@@ -18,7 +18,7 @@ class _TestPackageTileState extends State<TestPackageTile> {
   Widget build(BuildContext context) {
     return MihPackageTile(
       onTap: () {
-        context.pushNamed(
+        context.goNamed(
           'testPackage',
         );
         // Navigator.of(context).pushNamed(

mih_ui/lib/mih_package_components/Example/package_tools/package_tool_three.dart

@@ -11,6 +11,227 @@ class PackageToolThree extends StatefulWidget {
 }
 
 class _PackageToolThreeState extends State<PackageToolThree> {
+  List<ProfileLink> links = [
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "YouTube",
+      custom_name: "",
+      destination: "https://www.youtube.com/@MzansiInnovationHub",
+      order: 1,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Threads",
+      custom_name: "",
+      destination: "https://www.threads.com/@mzansi.innovation.hub",
+      order: 2,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "TikTok",
+      custom_name: "",
+      destination: "https://www.tiktok.com/@mzansiinnovationhub",
+      order: 3,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "WhatsApp",
+      custom_name: "",
+      destination: "https://whatsapp.com/channel/0029Vax3INCIyPtMn8KgeM2F",
+      order: 4,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Twitch",
+      custom_name: "",
+      destination: "https://www.twitch.tv/mzansiinnovationhub",
+      order: 5,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Instagram",
+      custom_name: "",
+      destination: "https://www.instagram.com/mzansi.innovation.hub/",
+      order: 6,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "X",
+      custom_name: "",
+      destination: "https://x.com/mzansi_inno_hub",
+      order: 7,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "LinkedIn",
+      custom_name: "",
+      destination: "https://www.linkedin.com/in/yasien-meth-172352108/",
+      order: 8,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Facebook",
+      custom_name: "",
+      destination: "https://www.facebook.com/profile.php?id=61565345762136",
+      order: 9,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Reddit",
+      custom_name: "",
+      destination: "https://www.reddit.com/r/Mzani_Innovation_Hub/",
+      order: 10,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Git",
+      custom_name: "",
+      destination:
+          "https://git.mzansi-innovation-hub.co.za/yaso_meth/mzansi_vim",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Telegram",
+      custom_name: "",
+      destination: "https://t.me/unisagroupschannel",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Pinterest",
+      custom_name: "",
+      destination: "https://za.pinterest.com/food/tomato-based-recipes-ideas/",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Snapchat",
+      custom_name: "",
+      destination: "https://www.snapchat.com/",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Messenger",
+      custom_name: "",
+      destination: "https://www.messenger.com/",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Medium",
+      custom_name: "",
+      destination:
+          "https://medium.com/flutter-community/the-ultimate-guide-flutter-architecture-template-ii-f86f9aa222e6",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Substack",
+      custom_name: "",
+      destination: "https://substack.com/@flutterbytes",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Spotify",
+      custom_name: "",
+      destination: "https://open.spotify.com/album/2oss3QgSxdNikts0shvMMo",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "YouTube Music",
+      custom_name: "",
+      destination:
+          "https://music.youtube.com/playlist?list=OLAK5uy_m9x66mE1zyhom3o_NPxmjf60HU1BjTXEE",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Apple Music",
+      custom_name: "",
+      destination: "https://music.apple.com/us/album/bastholile/1812031316",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Patreon",
+      custom_name: "",
+      destination: "https://www.patreon.com/c/MzansiInnovationHub",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Loolio",
+      custom_name: "",
+      destination: "https://www.loolio.com/user/mzansiinnovationhub",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "WeChat",
+      custom_name: "",
+      destination: "https://www.wechat.com/en",
+      order: 11,
+    ),
+    ProfileLink(
+      idprofile_links: 1,
+      app_id: "1234",
+      business_id: "",
+      site_name: "Other",
+      custom_name: "My App",
+      destination: "https://app.mzansi-innovation-hub.co.za/about",
+      order: 12,
+    ),
+  ];
   @override
   Widget build(BuildContext context) {
     return MihPackageToolBody(
@@ -21,108 +242,47 @@ class _PackageToolThreeState extends State<PackageToolThree> {
   }
 
   Widget getBody() {
-    List<ProfileLink> links = [
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Youtube",
-        web_link: "https://www.youtube.com/@MzansiInnovationHub",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Threads",
-        web_link: "https://www.threads.com/@mzansi.innovation.hub",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "TikTok",
-        web_link: "https://www.tiktok.com/@mzansiinnovationhub",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "WhatsApp",
-        web_link: "https://whatsapp.com/channel/0029Vax3INCIyPtMn8KgeM2F",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Twitch",
-        web_link: "https://www.twitch.tv/mzansiinnovationhub",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Instagram",
-        web_link: "https://www.instagram.com/mzansi.innovation.hub/",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "X",
-        web_link: "https://x.com/mzansi_inno_hub",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "LinkedIn",
-        web_link: "https://www.linkedin.com/in/yasien-meth-172352108/",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Facebook",
-        web_link: "https://www.facebook.com/profile.php?id=61565345762136",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Reddit",
-        web_link: "https://www.reddit.com/r/Mzani_Innovation_Hub/",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "Discord",
-        web_link: "https://discord.gg/ZtTZYd5d",
-      ),
-      ProfileLink(
-        idprofile_links: 1,
-        app_id: "1234",
-        business_id: "",
-        destination: "My App",
-        web_link: "https://app.mzansi-innovation-hub.co.za/about",
-      ),
-    ];
-
-    return Stack(
+    return
+        // Column(
+        //   mainAxisAlignment: MainAxisAlignment.center,
+        //   crossAxisAlignment: CrossAxisAlignment.center,
+        //   children: [
+        //     MihProfileLinks(
+        //       links: links,
+        //       // links: [],
+        //     ),
+        //     const SizedBox(
+        //       height: 20,
+        //     ),
+        Column(
       children: [
-        MihSingleChildScroll(
-          scrollbarOn: true,
-          child: Column(
-            mainAxisAlignment: MainAxisAlignment.start,
-            children: [
-              MihProfileLinks(
-                links: links,
-                // links: [],
-              ),
-            ],
+        MihProfileLinks(
+          links: links,
+          // links: [],
+        ),
+        Expanded(
+          child: ReorderableListView.builder(
+            itemBuilder: (context, index) {
+              return ListTile(
+                key: ValueKey("$index"),
+                title: Text("Link SIte: ${links[index].site_name}"),
+              );
+            },
+            itemCount: links.length,
+            onReorder: (oldIndex, newIndex) {
+              setState(() {
+                if (oldIndex < newIndex) {
+                  newIndex -= 1;
+                }
+                var link = links.removeAt(oldIndex);
+                links.insert(newIndex, link);
+              });
+            },
           ),
         ),
       ],
     );
+    //   ],
+    // );
   }
 }

mih_ui/lib/mih_package_components/mih_profile_links.dart

@@ -24,72 +24,142 @@ class _MihProfileLinksState extends State<MihProfileLinks> {
     IconData iconData;
     Color btnColor;
     Color iconColor = Colors.white;
-    switch (link.destination.toLowerCase()) {
+    switch (link.site_name.toLowerCase()) {
       case "youtube":
-        iconData = FontAwesomeIcons.youtube;
+        // iconData = FontAwesomeIcons.youtube;
+        iconData = MihIcons.youtube;
         btnColor = const Color(0xFFFF0000);
         break;
       case "tiktok":
-        iconData = FontAwesomeIcons.tiktok;
+        iconData = MihIcons.tiktok;
         btnColor = const Color(0xFF000000);
         break;
       case "twitch":
-        iconData = FontAwesomeIcons.twitch;
+        iconData = MihIcons.twitch;
         btnColor = const Color(0xFF6441a5);
         break;
       case "threads":
-        iconData = FontAwesomeIcons.threads;
+        iconData = MihIcons.threads;
         btnColor = const Color(0xFF000000);
         break;
       case "whatsapp":
-        iconData = FontAwesomeIcons.whatsapp;
+        iconData = MihIcons.whatsapp;
         btnColor = const Color(0xFF25D366);
         break;
       case "instagram":
-        iconData = FontAwesomeIcons.instagram;
+        iconData = MihIcons.instagram;
         btnColor = const Color(0xFFF56040);
         break;
       case "x":
-        iconData = FontAwesomeIcons.xTwitter;
+        iconData = MihIcons.x;
         btnColor = const Color(0xFF000000);
         break;
       case "linkedin":
-        iconData = FontAwesomeIcons.linkedin;
+        iconData = MihIcons.linkedin;
         btnColor = const Color(0xFF0a66c2);
         break;
       case "facebook":
-        iconData = FontAwesomeIcons.facebook;
+        iconData = MihIcons.facebook;
         btnColor = const Color(0xFF4267B2);
         break;
       case "reddit":
-        iconData = FontAwesomeIcons.reddit;
+        iconData = MihIcons.reddit;
         btnColor = const Color(0xFFFF4500);
         break;
       case "discord":
-        iconData = FontAwesomeIcons.discord;
+        iconData = MihIcons.discord;
         btnColor = const Color(0xFF5865F2);
         break;
       case "git":
-        iconData = FontAwesomeIcons.git;
-        btnColor = const Color(0xFF73A952);
+        iconData = MihIcons.git;
+        btnColor = const Color(0xFFf14e32);
+        break;
+      case "telegram":
+        iconData = MihIcons.telegram;
+        btnColor = const Color(0xFF0088cc);
+        break;
+      case "pinterest":
+        iconData = MihIcons.pinterest;
+        btnColor = const Color(0xFFe60023);
+        break;
+      case "snapchat":
+        iconData = MihIcons.snapchat;
+        btnColor = const Color(0xFFfffc00);
+        iconColor = Colors.black;
+        break;
+      case "messenger":
+        iconData = MihIcons.messenger;
+        btnColor = const Color(0xFF0084ff);
+        break;
+      case "medium":
+        iconData = MihIcons.medium;
+        btnColor = const Color(0xFF000000);
+        break;
+      case "substack":
+        iconData = MihIcons.substack;
+        btnColor = const Color(0xFFFF7731);
+        break;
+      case "spotify":
+        iconData = MihIcons.spotify;
+        btnColor = const Color(0xFF1db954);
+        iconColor = Colors.black;
+        break;
+      case "yt music":
+        iconData = MihIcons.youtubeMusic;
+        btnColor = const Color(0xFFFF0000);
+        iconColor = Colors.white;
+        break;
+      case "apple music":
+        iconData = MihIcons.appleMusic;
+        btnColor = const Color(0xFFff4e6b);
+        break;
+      case "patreon":
+        iconData = MihIcons.patreon;
+        btnColor = const Color(0xFF000000);
+        break;
+      case "loolio":
+        iconData = MihIcons.loolio;
+        btnColor = const Color(0xFF24244a);
+        iconColor = const Color(0xFF5fc343);
+        break;
+      case "wechat":
+        iconData = MihIcons.wechat;
+        btnColor = const Color(0xFFff4e6b);
         break;
       default:
-        iconData = FontAwesomeIcons.link;
+        // iconData = FontAwesomeIcons.link;
+        iconData = MihIcons.link;
         btnColor = MihColors.secondary();
-        iconColor = Colors.black;
+        iconColor = MihColors.primary();
     }
-    return MihButton(
-      width: widget.buttonSize ?? 70,
-      height: widget.buttonSize ?? 70,
-      onPressed: () {
-        launchSocialUrl(Uri.parse(link.web_link));
-      },
-      buttonColor: btnColor,
-      child: FaIcon(
-        iconData,
-        color: iconColor,
-        size: 40,
-      ),
+    return Column(
+      mainAxisAlignment: MainAxisAlignment.center,
+      children: [
+        MihButton(
+          width: widget.buttonSize ?? 70,
+          height: widget.buttonSize ?? 70,
+          onPressed: () {
+            launchSocialUrl(Uri.parse(link.destination));
+          },
+          buttonColor: btnColor,
+          child: Icon(
+            iconData,
+            color: iconColor,
+            size: 50,
+          ),
+        ),
+        const SizedBox(height: 2),
+        if (link.custom_name.isNotEmpty)
+          Text(
+            link.custom_name,
+            style: TextStyle(
+              fontWeight: FontWeight.bold,
+            ),
+          ),
+        // link.custom_name.isNotEmpty
+        //     ? Text(link.custom_name)
+        //     : Text(link.site_name),
+      ],
     );
     // return MihPackageTile(
     //   onTap: () {
@@ -137,6 +207,7 @@ class _MihProfileLinksState extends State<MihProfileLinks> {
           children: [
             Wrap(
               alignment: WrapAlignment.center,
+              runAlignment: WrapAlignment.center,
               runSpacing: 10,
               spacing: 10,
               children: widget.links.map(