Adding translations and latest neo lib

package.json

@@ -10,7 +10,7 @@
     "preview": "vite preview"
   },
   "dependencies": {
-    "@avaya/neo-react": "^0.8.8",
+    "@avaya/neo-react": "^1.1.16",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.12.0"

src/App.tsx

@@ -3,24 +3,23 @@ import "@avaya/neo-react/avaya-neo-react.css";
 
 import {
   AppLayout,
-  Avatar,
-  Icon,
+  // Icon,
   Image,
   LeftNav,
   TopNav,
-  Widget,
+  // Widget,
 } from "@avaya/neo-react";
 import { ReactNode } from "react";
 import PlayersPage from "./pages/PlayersPage";
 
 function App() {
 
-  const emptyWidget: ReactNode = (
-    <Widget empty>
-      <Icon icon="settings" aria-label="settings" />
-      <p>Widget goes here</p>
-    </Widget>
-  );
+  // const emptyWidget: ReactNode = (
+  //   <Widget empty>
+  //     <Icon icon="settings" aria-label="settings" />
+  //     <p>Widget goes here</p>
+  //   </Widget>
+  // );
 
   const leftNav: ReactNode = (
     <LeftNav

src/mock-data.ts

@@ -0,0 +1,83 @@
+export interface ITableFilterTranslations {
+  clear?: string;
+  close?: string;
+  filterColumns?: string;
+}
+export interface IToolbarTranslations extends ITableFilterTranslations {
+  create?: string;
+  delete?: string;
+  edit?: string;
+  large?: string;
+  medium?: string;
+  noDataAvailable?: string;
+  refresh?: string;
+  rowsPerPage?: string;
+  searchInputPlaceholder?: string;
+  selectRowHeight?: string;
+  small?: string;
+}
+
+export interface IBodyTranslations {
+  noDataAvailable?: string;
+}
+
+export interface IPaginationTranslations {
+  backIconButtonText?: string;
+  itemsPerPageLabel?: string;
+  nextIconButtonText?: string;
+  tooltipForCurrentPage?: string;
+  tooltipForShownPagesSelect?: string;
+}
+
+export interface ITableHeaderTranslations {
+  clearSort?: string;
+  filterColumn?: string;
+  selectAll: string;
+  sortAscending?: string;
+  sortDescending?: string;
+  toggleSortBy?: string;
+}
+
+export interface ITableTranslations {
+  toolbar: IToolbarTranslations;
+  header: ITableHeaderTranslations;
+  body: IBodyTranslations;
+  pagination: IPaginationTranslations;
+}
+
+export const translations: ITableTranslations = {
+  toolbar: {
+    clear: "Clear Filter",
+    close: "Close",
+    create: "Create",
+    delete: "Delete",
+    edit: "Edit",
+    filterColumns: "Filter Columns",
+    large: "Large",
+    medium: "Medium",
+    noDataAvailable: "No data available",
+    refresh: "Refresh",
+    rowsPerPage: "Rows per page",
+    searchInputPlaceholder: "Search all",
+    selectRowHeight: "Select row height",
+    small: "Small",
+  },
+  header: {
+    clearSort: "Clear Sort",
+    filterColumn: "Filter Column",
+    selectAll: "select all",
+    sortAscending: "A - Z",
+    sortDescending: "Z - A",
+    toggleSortBy: "Toggle SortBy",
+  },
+  body: {
+    noDataAvailable: "no data available",
+  },
+  pagination: {
+    backIconButtonText: "back",
+    nextIconButtonText: "next",
+    itemsPerPageLabel: "SHOW: ",
+    tooltipForCurrentPage: "현재 페이지",
+    tooltipForShownPagesSelect: "items per page",
+  },
+};

src/pages/PlayersPage.tsx

@@ -1,4 +1,5 @@
 import { Table } from "@avaya/neo-react";
+import { translations } from "../mock-data";
 
 export type Player = {
   name: string;
@@ -49,10 +50,13 @@ export const playerData: Player[] = [
 export function getPlayers(): Promise<Player[]> {
   return new Promise((resolve, reject) => {
     resolve(playerData);
-  });
+    reject(console.log("Failed fetching players"));
+  }
+  );
 }
 
 const PlayersPage = () => {
+  const theTranslations = translations;
   return (
     <section>
       <h1> Legends of Soccer</h1>
@@ -67,6 +71,7 @@ const PlayersPage = () => {
           { Header: "Assists", accessor: "assists" },
         ]}
         itemsPerPageOptions={[5, 10]}
+        translations= {theTranslations}
       />
     </section>
   );