design-system-next 2.12.11 → 2.12.15

package/src/components/sidenav/sidenav-menu-links.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-for="(navLink, navLinkIndex) in navLinks.top" :key="navLinkIndex">
+  <div v-for="(navLink, navLinkIndex) in navLinks" :key="navLinkIndex" class="spr-grid spr-gap-2">
     <template v-for="(parentLink, parentLinkIndex) in navLink.parentLinks" :key="parentLinkIndex">
       <!-- #region - Parent Links with Menus -->
       <template v-if="parentLink.menuLinks && parentLink.menuLinks.length > 0">
@@ -86,7 +86,7 @@
                     <div
                       :id="`${generateId(parentLink.title, menuLinkItem.title)}`"
                       :class="{
-                        'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
+                        'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                         'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
                         'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
                         'active:spr-background-color-pressed': true,
@@ -96,20 +96,27 @@
                         v-if="props.activeNav.menu === menuLinkItem.title"
                         class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
                       ></div>
-                      <span>{{ menuLinkItem.title }}</span>
-                      <div class="spr-flex spr-items-center spr-gap-1">
-                        <template v-for="(attr, i) in menuLinkItem?.attributes" :key="i">
-                          <spr-lozenge
-                            v-if="attr?.name === 'lozenge' && attr?.value"
-                            :label="getLozengeLabel(attr)"
-                            :tone="getLozengeTone(attr)"
-                            fill
+
+                      <div class="spr-flex spr-w-full spr-items-center spr-justify-between spr-gap-1">
+                        <span>{{ menuLinkItem.title }}</span>
+
+                        <div class="spr-flex spr-items-center spr-gap-2">
+                          <template
+                            v-for="(attribute, i) in convertAttributesToArray(menuLinkItem?.attributes)"
+                            :key="i"
+                          >
+                            <spr-lozenge
+                              v-if="attribute?.name === 'lozenge' && attribute?.value"
+                              :label="getLozengeLabel(attribute)"
+                              :tone="getLozengeTone(attribute)"
+                              fill
+                            />
+                          </template>
+                          <Icon
+                            icon="ph:caret-right"
+                            class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
                           />
-                        </template>
-                        <Icon
-                          icon="ph:caret-right"
-                          class="spr-h-[16px] spr-w-[16px] spr-transform spr-font-normal spr-transition-transform spr-duration-300"
-                        />
+                        </div>
                       </div>
                     </div>
                     <!-- #endregion - Menu links -->
@@ -146,7 +153,7 @@
                               v-if="!submenuLinkItem.hidden"
                               :id="`${generateId(parentLink.title, menuLinkItem.title, submenuLinkItem.title)}`"
                               :class="{
-                                'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
+                                'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                                 'spr-background-color-single-active': props.activeNav.submenu === submenuLinkItem.title,
                                 'hover:spr-background-color-hover': props.activeNav.submenu !== submenuLinkItem.title,
                                 'active:spr-background-color-pressed': true,
@@ -164,17 +171,23 @@
                                 v-show="props.activeNav.submenu === submenuLinkItem.title"
                                 class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
                               ></div>
-                              <div class="spr-flex spr-items-center spr-gap-1">
+
+                              <div class="spr-flex spr-w-full spr-items-center spr-justify-between spr-gap-1">
                                 <span>{{ submenuLinkItem.title }}</span>
 
-                                <template v-for="(attr, i) in submenuLinkItem?.attributes" :key="i">
-                                  <spr-lozenge
-                                    v-if="attr?.name === 'lozenge' && attr?.value"
-                                    :label="getLozengeLabel(attr)"
-                                    :tone="getLozengeTone(attr)"
-                                    fill
-                                  />
-                                </template>
+                                <div class="spr-flex spr-items-center spr-gap-2">
+                                  <template
+                                    v-for="(attribute, i) in convertAttributesToArray(submenuLinkItem?.attributes)"
+                                    :key="i"
+                                  >
+                                    <spr-lozenge
+                                      v-if="attribute?.name === 'lozenge' && attribute?.value"
+                                      :label="getLozengeLabel(attribute)"
+                                      :tone="getLozengeTone(attribute)"
+                                      fill
+                                    />
+                                  </template>
+                                </div>
                               </div>
                             </div>
                             <!-- #endregion - Submenu Links -->
@@ -193,7 +206,7 @@
                     v-if="!menuLinkItem.hidden"
                     :id="`${generateId(parentLink.title, menuLinkItem.title)}`"
                     :class="{
-                      'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-justify-between spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
+                      'spr-body-sm-regular spr-relative spr-m-0 spr-flex spr-cursor-pointer spr-px-2 spr-py-1.5 spr-align-middle spr-duration-150 spr-ease-in-out': true,
                       'spr-background-color-single-active': props.activeNav.menu === menuLinkItem.title,
                       'hover:spr-background-color-hover': props.activeNav.menu !== menuLinkItem.title,
                       'active:spr-background-color-pressed': true,
@@ -204,15 +217,21 @@
                       v-if="props.activeNav.menu === menuLinkItem.title"
                       class="spr-background-color-brand-base spr-absolute spr-left-0 spr-top-0 spr-h-full spr-w-[2px]"
                     ></div>
-                    <span>{{ menuLinkItem.title }}</span>
-                    <template v-for="(attr, i) in menuLinkItem?.attributes" :key="i">
-                      <spr-lozenge
-                        v-if="attr?.name === 'lozenge' && attr?.value"
-                        :label="getLozengeLabel(attr)"
-                        :tone="getLozengeTone(attr)"
-                        fill
-                      />
-                    </template>
+
+                    <div class="spr-flex spr-w-full spr-items-center spr-justify-between spr-gap-1">
+                      <span>{{ menuLinkItem.title }}</span>
+
+                      <div class="spr-flex spr-items-center spr-gap-2">
+                        <template v-for="(attribute, i) in convertAttributesToArray(menuLinkItem?.attributes)" :key="i">
+                          <spr-lozenge
+                            v-if="attribute?.name === 'lozenge' && attribute?.value"
+                            :label="getLozengeLabel(attribute)"
+                            :tone="getLozengeTone(attribute)"
+                            fill
+                          />
+                        </template>
+                      </div>
+                    </div>
                   </div>
                 </template>
                 <!-- #endregion - Menu link only -->
@@ -279,7 +298,7 @@
 
     <!-- Divider -->
     <div
-      v-if="navLinks.top.length > 0 && navLinkIndex < navLinks.top.length - 1"
+      v-if="navLinks.length > 0 && navLinkIndex < navLinks.length - 1"
       class="spr-background-color-hover spr-h-[2px] spr-w-full"
     ></div>
   </div>
@@ -300,5 +319,8 @@ import SprTooltip from '../tooltip/tooltip.vue';
 const props = defineProps(sidenavPropTypes);
 const emit = defineEmits(sidenavEmitTypes);
 
-const { handleRedirect, generateId, getLozengeLabel, getLozengeTone } = useSidenav(props, emit);
+const { handleRedirect, generateId, getLozengeLabel, getLozengeTone, convertAttributesToArray } = useSidenav(
+  props,
+  emit,
+);
 </script>

package/src/components/sidenav/sidenav.ts

@@ -1,5 +1,7 @@
 import type { PropType, ExtractPropTypes } from 'vue';
 
+import { LozengePropTypes } from '../lozenge/lozenge';
+
 export type QuickAction = {
   menuHeading: string;
   items: QuickActionItem[];
@@ -32,7 +34,7 @@ export type ParentLinkItem = {
   menuLinks: MenuLink[];
   submenuLinks?: SubmenuLink[];
   hidden?: boolean;
-  attributes?: Attributes[];
+  attributes?: Attributes[] | string;
 };
 
 export type MenuLink = {
@@ -44,7 +46,7 @@ export type MenuLinkItem = {
   title: string;
   hidden: boolean;
   redirect: Redirect;
-  attributes?: Attributes[];
+  attributes?: Attributes[] | string;
   submenuLinks: SubmenuLink[];
 };
 
@@ -57,7 +59,7 @@ export type SubmenuLinkItem = {
   title: string;
   hidden: boolean;
   redirect: Redirect;
-  attributes?: Attributes[];
+  attributes?: Attributes[] | string;
 };
 
 export type Redirect = {
@@ -88,7 +90,7 @@ export interface NavItem {
   children?: NavItem[] | null;
   groupName?: string | null;
   hidden?: boolean;
-  attributes?: Attributes[] | null;
+  attributes?: Attributes[] | string | null;
 }
 
 export type Attributes = {
@@ -96,10 +98,7 @@ export type Attributes = {
   value: unknown | string | number | boolean | AttrLozenge;
 };
 
-export type AttrLozenge = {
-  label: string;
-  tone?: string;
-};
+export type AttrLozenge = LozengePropTypes;
 
 export interface MappedNavItem {
   title: string;
@@ -109,7 +108,7 @@ export interface MappedNavItem {
     isAbsoluteURL: boolean;
     link: string;
   };
-  attributes?: AttrLozenge | unknown[];
+  attributes?: Attributes[] | string | unknown[];
   menuLinks?: {
     menuHeading: string;
     items: MappedNavItem[];

package/src/components/sidenav/sidenav.vue

@@ -144,7 +144,11 @@
         <!-- #endregion - Search -->
 
         <!-- #region - Grouped Nav Links -->
-        <sidenav-menu-links :nav-links="navLinks" />
+        <sidenav-menu-links
+          :nav-links="navLinks.top"
+          :active-nav="props.activeNav"
+          @get-navlink-item="emit('get-navlink-item', $event)"
+        />
         <!-- #endregion - Grouped Nav Links -->
       </div>
       <!-- #endregion - Top Section -->
@@ -155,7 +159,11 @@
         class="spr-grid spr-justify-center spr-gap-2 spr-px-3 spr-pb-4 spr-pt-0"
       >
         <!-- #region - Grouped Nav Links -->
-        <sidenav-menu-links :nav-links="navLinks" />
+        <sidenav-menu-links
+          :nav-links="navLinks.bottom"
+          :active-nav="props.activeNav"
+          @get-navlink-item="emit('get-navlink-item', $event)"
+        />
         <!-- #endregion - Grouped Nav Links -->
       </div>
       <!-- #endregion - Bottom Section -->

package/src/components/sidenav/use-sidenav.ts

@@ -1,4 +1,6 @@
-import { ref, onMounted } from 'vue';
+import { ref, onMounted, watch } from 'vue';
+
+import { LOZENGE_TONE } from '../lozenge/lozenge';
 
 import type { SetupContext } from 'vue';
 import type {
@@ -22,6 +24,7 @@ interface ObjectItem {
     menu: string;
     submenu: string;
   };
+  attributes?: Attributes[] | string;
 }
 
 export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEmitTypes>['emit']) => {
@@ -182,30 +185,80 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     return transformedData;
   };
 
-  const getLozengeTone = (attr: Attributes) => {
-    if (
-      typeof attr === 'object' &&
-      attr !== null &&
-      'tone' in attr &&
-      typeof attr.tone === 'string' &&
-      ['danger', 'information', 'plain', 'pending', 'success', 'neutral', 'caution'].includes(attr.tone)
-    ) {
-      return attr.tone as 'danger' | 'information' | 'plain' | 'pending' | 'success' | 'neutral' | 'caution';
+  const getLozengeTone = (attributes: Attributes | string) => {
+    // Handle case where attr is a string (needs conversion)
+    if (!attributes) return;
+
+    let parsedAttributes;
+
+    if (typeof attributes === 'string') {
+      parsedAttributes = JSON.parse(attributes);
+    } else {
+      parsedAttributes = attributes;
+    }
+
+    if (parsedAttributes.value.tone && LOZENGE_TONE.includes(parsedAttributes.value.tone)) {
+      return parsedAttributes.value.tone;
+    }
+
+    return 'neutral';
+  };
+
+  const getLozengeLabel = (attributes: Attributes | string) => {
+    // Handle case where attr is a string (needs conversion)
+    if (!attributes) return;
+
+    let parsedAttributes;
+
+    if (typeof attributes === 'string') {
+      parsedAttributes = JSON.parse(attributes);
+    } else {
+      parsedAttributes = attributes;
+    }
+
+    if (parsedAttributes.value.label) {
+      return String(parsedAttributes.value.label);
     }
-    return 'success'; // Default tone
+
+    return '';
   };
 
-  const getLozengeLabel = (attr: Attributes) => {
-    return attr.value && typeof attr?.value === 'object' && 'label' in attr.value ? String(attr.value.label) : '';
+  // Utility function to convert string attributes to array
+  const convertAttributesToArray = (attributes: string | Attributes[] | undefined): Attributes[] => {
+    if (!attributes) {
+      return [];
+    }
+
+    if (typeof attributes === 'string') {
+      try {
+        const parsed = JSON.parse(attributes);
+        return Array.isArray(parsed) ? parsed : [parsed];
+      } catch {
+        return [];
+      }
+    }
+
+    return Array.isArray(attributes) ? attributes : [];
   };
 
-  onMounted(async () => {
+  const setNavLinkItems = async () => {
     if (props.isNavApi) {
       navLinks.value = await transformedNavItems(props.navLinks);
     } else {
-      // Use the original navLinks from props
       navLinks.value = props.navLinks;
     }
+  };
+
+  watch(
+    () => props.navLinks,
+    async () => {
+      await setNavLinkItems();
+    },
+    { immediate: true },
+  );
+
+  onMounted(async () => {
+    await setNavLinkItems();
   });
 
   return {
@@ -217,5 +270,6 @@ export const useSidenav = (props: SidenavPropTypes, emit: SetupContext<SidenavEm
     transformedNavItems,
     getLozengeTone,
     getLozengeLabel,
+    convertAttributesToArray,
   };
 };

package/src/components/table/table-pagination/table-pagination.ts

@@ -51,10 +51,18 @@ export const tablePaginationPropTypes = {
     type: Boolean as PropType<boolean>,
     default: true,
   },
+  /**
+   * @description Toggle editable state for current page input
+   */
+  editableCurrentPage: {
+    type: Boolean as PropType<boolean>,
+    default: false,
+  },
 };
 
 export const tablePaginationEmitTypes = {
   'update:selectedRowCount': (value: number): value is number => typeof value === 'number',
+  'update:currentPage': (value: number): value is number => typeof value === 'number',
   previous: () => true,
   next: () => true,
 };

package/src/components/table/table-pagination/table-pagination.vue

@@ -16,9 +16,22 @@
     </spr-dropdown>
 
     <div :class="paginationClasses.rightSideClass">
-      <div :class="paginationClasses.computeRowRangeClass">
-        {{ computeRowRange }}
+      <div v-if="editableCurrentPage" class="spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-4xs">
+        <span class="spr-body-xs-regular spr-text-color-base">Page</span>
+        <input
+          v-model="currentPage" type="number" min="1" :max="totalPages" 
+          class="number-input 
+            spr-text-center spr-font-main spr-font-medium spr-font-size-200 spr-font-height-300 sp-text-color-strong
+            spr-p-size-spacing-3xs spr-rounded-border-radius-md spr-border spr-border-solid spr-border-color-base spr-outline-none 
+            spr-min-w-[48px] spr-max-h-[36px] spr-w-[48px] spr-h-[32px] spr-box-border"
+        />
+        <span class="spr-body-xs-regular spr-text-color-base">of {{ totalPages }}</span>
       </div>
+      <template v-else>
+        <div :class="paginationClasses.computeRowRangeClass">
+          {{ computeRowRange }}
+        </div>
+      </template>
       <div :class="paginationClasses.navigationContainerClass">
         <spr-button
           id="previousButton"
@@ -68,5 +81,19 @@ const {
   disabledPrevious,
   dropdownSelection,
   dropdownId,
+  currentPage,
+  totalPages,
 } = useTablePagination(props, emit);
 </script>
+
+<style scoped>
+.number-input::-webkit-outer-spin-button,
+.number-input::-webkit-inner-spin-button {
+  margin: 0;
+  -webkit-appearance: none;
+}
+
+.number-input {
+  -moz-appearance: textfield;
+}
+</style>

package/src/components/table/table-pagination/use-table-pagination.ts

@@ -5,6 +5,7 @@ import type {
   TablePaginationPropTypes,
   TablePaginationEmitTypes,
 } from '@/components/table/table-pagination/table-pagination';
+import { useVModel } from '@vueuse/core';
 
 interface TablePaginationClasses {
   baseClass: string;
@@ -21,7 +22,9 @@ export const useTablePagination = (
   props: TablePaginationPropTypes,
   emit: SetupContext<TablePaginationEmitTypes>['emit'],
 ) => {
-  const { selectedRowCount, currentPage, totalItems, bordered } = toRefs(props);
+  const { selectedRowCount, totalItems, bordered, editableCurrentPage } = toRefs(props);
+
+  const currentPage = useVModel(props, 'currentPage', emit);
 
   const paginationClasses: ComputedRef<TablePaginationClasses> = computed(() => {
     const baseClass = classNames('spr-p-size-spacing-xs spr-flex spr-justify-between spr-bg-white-50 spr-h-max', {
@@ -30,9 +33,21 @@ export const useTablePagination = (
     });
     const dropdownInputFieldClass = classNames('spr-w-[120px] spr-h-full spr-space-x-2');
     const inputFieldIconClass = classNames('spr-mt-0.5 spr-pl-1 spr-text-mushroom-950');
-    const rightSideClass = classNames('spr-flex spr-justify-between spr-items-center spr-space-x-4');
+    const rightSideClass = classNames(
+      'spr-flex spr-justify-between spr-items-center',
+      {
+        'spr-space-x-4': !editableCurrentPage.value,
+        'spr-gap-size-spacing-3xs': editableCurrentPage.value
+      }
+    );
     const computeRowRangeClass = classNames('spr-text-color-base spr-body-sm-regular');
-    const navigationContainerClass = classNames('spr-flex spr-space-x-2');
+    const navigationContainerClass = classNames(
+      'spr-flex',
+      {
+        'spr-space-x-2': !editableCurrentPage.value,
+        'spr-gap-size-spacing-5xs': editableCurrentPage.value
+      }
+    );
     const navigationButtonClass = classNames('spr-rounded-border-radius-md');
     const dropdownClass = classNames('!spr-w-max');
     return {
@@ -58,7 +73,7 @@ export const useTablePagination = (
     return `${selectedRowCount.value} Rows`;
   });
 
-  const handleSelectedItem = (item: string[]) => {
+  const handleSelectedItem = (item: unknown) => {
     emit('update:selectedRowCount', Number(item));
   };
 
@@ -87,6 +102,11 @@ export const useTablePagination = (
 
   const dropdownId = ref(`dropdown-${generateUniqueId()}`);
 
+  // Get total number of pages
+  const totalPages = computed(() => {
+    return Math.ceil(props.totalItems / props.selectedRowCount);
+  });
+
   return {
     paginationClasses,
     handleSelectedItem,
@@ -98,5 +118,7 @@ export const useTablePagination = (
     disabledPrevious,
     dropdownSelection,
     dropdownId,
+    currentPage,
+    totalPages,
   };
 };

package/src/components/table/table.vue

@@ -21,7 +21,10 @@
       <table aria-describedby="describe" class="spr-h-full spr-w-full spr-table-fixed" cellspacing="0" cellpadding="0">
         <thead>
           <tr v-if="!(props.removeHeaderOnEmpty && sortedData.length <= 0)">
-            <th v-if="props.isMultiSelect" :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses(null)]">
+            <th
+              v-if="props.isMultiSelect"
+              :class="[getTableClasses.multiselectClass, getTableClasses.headerClasses(null)]"
+            >
               <div class="spr-flex spr-items-center spr-justify-center">
                 <spr-checkbox
                   label=""
@@ -31,7 +34,11 @@
                 />
               </div>
             </th>
-            <th v-for="(header, keyHeader) in headers" :key="keyHeader" :class="[getTableClasses.headerClasses(header)]">
+            <th
+              v-for="(header, keyHeader) in headers"
+              :key="keyHeader"
+              :class="[getTableClasses.headerClasses(header)]"
+            >
               <div :class="getTableClasses.headerNameClass">
                 <span :class="[{ 'spr-cursor-pointer': header.sort }]" @click="header.sort && sortData(header.field)">
                   {{ header.name }}
@@ -60,7 +67,7 @@
             </th>
 
             <!-- for action Button -->
-            <th v-if="action" :class="getTableClasses.headerClasses">
+            <th v-if="action" :class="getTableClasses.headerClasses(null)">
               <slot name="action-name" :class="getTableClasses.tableCellSlotClasses" />
             </th>
           </tr>

package/src/components/table/use-table.ts

@@ -86,7 +86,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
 
   const getTableClasses = computed(() => {
     const tableWrapperClasses = classNames(
-      'spr-flex spr-flex-col spr-h-full spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid spr-table-wrapper spr-relative',
+      'spr-flex spr-flex-col spr-h-full spr-border-color-weak spr-w-full spr-overflow-hidden spr-rounded-border-radius-lg spr-border spr-border-solid spr-table-wrapper spr-relative spr-font-main',
     );
     const tableFooterClasses = classNames('spr-w-full spr-bottom-0 spr-left-0', {
       'spr-background-color-surface': props.variant === 'surface',
@@ -97,7 +97,7 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
       'spr-background-color-surface': props.variant === 'surface',
     });
     const headerClasses = (header: Header | null) => {
-      if (header?.customTailwindClasses){
+      if (header?.customTailwindClasses) {
         return classNames(header.customTailwindClasses);
       }
 
@@ -107,9 +107,10 @@ export const useTable = (props: TablePropTypes, emit: SetupContext<TableEmitType
         'spr-border-color-weak spr-border-x-0 spr-border-y spr-border-solid',
         {
           'spr-border-t-0': !slots.default,
-      },
-      headerBackground,
-    )};
+        },
+        headerBackground,
+      );
+    };
 
     const headerNameClass = 'spr-flex spr-flex-row spr-items-center spr-gap-size-spacing-5xs';
 

package/src/mock/tableData.ts

@@ -0,0 +1,23 @@
+import { ref } from "vue";
+
+const data = ref([
+  ...Array.from({ length: 100 }, (_, i) => ({
+    name: {
+      title: `Shift ${i + 1}`,
+      subtext: `Lorem ipsectetur adipiscing elit. Sed etiam, sed etiam. Item ${i + 1}`,
+      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
+    },
+    lastUpdate: {
+      title: `Nov ${((i % 30) + 1)}, 2025`,
+      subtext: `Lorem ipsum dolor item ${i + 1}`,
+      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
+    },
+    status: {
+      title: ['Success', 'Pending', 'Failed'][i % 3],
+      subtext: `Lorem ipsum dolor sit amet, consectetur, sed etiam. Status ${i + 1}`,
+      image: `https://media.sproutsocial.com/uploads/2022/06/profile-picture.jpeg`,
+    },
+  }))
+]);
+
+export default data;