\nWhat is MTAweb Directory?
So you have heard about this site or you have been to it, but you cannot figure out what it is or what it can do. MTA web directory is the simplest way in which one can bid on a link, or a few links if they wish to do so. The link directory on MTA displays all of the links it currently has, and does so in alphabetical order, which makes it much easier for someone to find what they are looking for if it is something specific and they do not want to go through all the other sites and links as well. It allows you to start your bid at the bottom and slowly work your way to the top of the list.
With a very low costing starting bid of just $1, you are guaranteed to have a spot in MTA’s successful directory list. When you would like to increase your bid to one of the top positions, you have to know that this would be a wise decision to make as it will not only get your link to be at a higher point in the directory but it will also give you a chance to have your site advertised with the rest of the top ten on the home page of the website. This means that when visitors come to MTAweb.com, your site will be one of the first things they see. In other words, you stand a great chance at getting a comeback to your site sooner than you thought.
\nThis is strong text.
\nThis is italic text
\n${\n /* eslint-disable-next-line */\n `This is underline text
`\n}\n\nLife is short, Smile while you still have teeth!\n\n
cd project-folder\\nnpm install\\n`\n}\n\n
var React = require('react');\\nvar Markdown = require('react-markdown');\\n\\nReact.render(\\n <Markdown1 source=\\\"# Your markdown here\\\" />,\\n document.getElementById('content')\\n);\\n`\n}\n\n
function createStyleObject(classNames, style) {\\n return classNames.reduce((styleObject, className) => {\\n return {...styleObject, ...style[className]};\\n }, {});\\n }\\n`\n}\n\n
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
Why do we use it?
It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout. The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters, as opposed to using 'Content here, content here', making it look like readable English. Many desktop publishing packages and web page editors now use Lorem Ipsum as their default model text, and a search for 'lorem ipsum' will uncover many web sites still in their infancy. Various versions have evolved over the years, sometimes by accident, sometimes on purpose (injected humour and the like).
\n\n\n\n
\nIt is important that you buy links because the links are what get you the results that you want. The popularity of the links that are listed in the MTA directory is in fact one of the most important factors in the performance of the search engine. Links are important and this is why you have to purchase a link in order to bid on something and the best part is that a link will only cost you $1, which is nothing compared to what you would pay if you decided to do it through any other company or website.\n
\n\n\n
\n
SPECIFICATION
\nLeather panels. Laces. Rounded toe. Rubber sole.\n
\n
MATERIAL AND WASHING INSTRUCTIONS
\nShoeupper: 54% bovine leather,46% polyurethane. Lining: 65% polyester,35% cotton. Insole: 100% polyurethane. Sole: 100% thermoplastic. Fixing sole: 100% glued.
\n`;\nconst PRODUCT_SIZE = [\n '6',\n '7',\n '8',\n '8.5',\n '9',\n '9.5',\n '10',\n '10.5',\n '11',\n '11.5',\n '12',\n '13',\n];\n\n// ----------------------------------------------------------------------\n\nconst products = [...Array(24)].map((_, index) => ({\n id: mockData.id(index),\n cover: mockData.image.product(index),\n images: [...Array(8)].map((_, index) => mockData.image.product(index)),\n name: PRODUCT_NAME[index],\n code: `38BEE27${index}`,\n sku: `WW75K521${index}YW/SV`,\n tags: PRODUCT_TAGS,\n price: mockData.number.price(index),\n priceSale: index % 3 ? null : mockData.number.price(index),\n totalRating: mockData.number.rating(index),\n totalReview: random(9999),\n ratings: [...Array(5)].map((_, index) => ({\n name: `${index + 1} Star`,\n starCount: random(9999),\n reviewCount: random(9999),\n })),\n reviews: [...Array(8)].map((_, index) => ({\n id: mockData.id(index),\n name: mockData.name.fullName(index),\n avatarUrl: `/static/mock-images/avatars/avatar_${index + 1}.jpg`,\n comment: mockData.text.sentence(index),\n rating: mockData.number.rating(index),\n isPurchased: mockData.boolean(index),\n helpful: random(9999),\n postedAt: mockData.time(index),\n })),\n colors:\n (index === 1 && PRODUCT_COLOR.slice(0, 2)) ||\n (index === 2 && PRODUCT_COLOR.slice(1, 3)) ||\n (index === 3 && PRODUCT_COLOR.slice(2, 4)) ||\n (index === 4 && PRODUCT_COLOR.slice(3, 6)) ||\n (index === 23 && PRODUCT_COLOR.slice(4, 6)) ||\n (index === 24 && PRODUCT_COLOR.slice(5, 6)) ||\n PRODUCT_COLOR,\n status: index % 3 ? sample(['new', '', '', '', '', '']) : 'sale',\n inventoryType: sample(['in_stock', 'out_of_stock', 'low_stock']),\n sizes: PRODUCT_SIZE,\n available: index % 3 === 0 ? random(19, 100) : 2,\n description: PRODUCT_DESCRIPTION,\n sold: random(999),\n createdAt: mockData.time(index),\n category: sample(['Shose', 'Apparel', 'Accessories']),\n gender: sample(['Men', 'Women', 'Kids']),\n}));\n\n// ----------------------------------------------------------------------\n\nmock.onGet('/api/products').reply(200, { products });\n\n// ----------------------------------------------------------------------\n\nmock.onGet('/api/products/product').reply((config) => {\n try {\n const { name } = config.params;\n const product = products.find(\n (_product) => paramCase(_product.name) === name\n );\n\n if (!product) {\n return [404, { message: 'product not found' }];\n }\n\n return [200, { product }];\n } catch (error) {\n console.error(error);\n return [500, { message: 'Internal server error' }];\n }\n});\n","import { v4 as uuidv4 } from 'uuid';\nimport { addDays } from 'date-fns';\n// utils\nimport mockData from '../utils/mock-data';\n//\nimport mock from './mock';\n\n// ----------------------------------------------------------------------\n\nconst now = new Date();\n\nconst columnIds = {\n column1: '8cd887ec-b3bc-11eb-8529-0242ac130003',\n column2: '23008a1f-ad94-4771-b85c-3566755afab7',\n column3: '37a9a747-f732-4587-a866-88d51c037641',\n column4: '4ac3cd37-b3e1-466a-8e3b-d7d88f6f5d4f',\n};\n\nconst cardIds = {\n card1: 'deb02f04-9cf8-4f1e-97e0-2fbda84cc6b3',\n card2: '98bf6e8b-becc-485b-9c3f-a7d09392c48d',\n card3: '99fbc02c-de89-4be3-9515-f8bd12227d38',\n card4: 'ab9cebca-6cb4-4847-aa17-3b261b3dd0fb',\n card5: 'ebf0d26a-78e5-414f-986f-003d8fcd3154',\n card6: '9d98ce30-3c51-4de3-8537-7a4b663ee3af',\n card7: '0f71fb1f-9fce-419c-a525-46aeeb9b3e83',\n card8: '534fac32-cae1-4d77-965a-062d2114bc29',\n card9: 'dc0fa705-1740-46a4-a3ec-5c6d67b6f402',\n card10: '5b323625-c53b-4d06-86df-b59e180657a0',\n};\n\nconst memberIds = {\n member1: '473d2720-341c-49bf-94ed-556999cf6ef7',\n member2: 'b8395203-887c-46f5-a85f-339b2d75c98b',\n member3: '048f6343-7a65-4873-a570-eb6ff4eb1ba3',\n member4: '18e23ac9-c874-43e4-8163-2d37f15f3367',\n member5: 'a3be5485-03bf-47a6-b553-a9cf9f070ed8',\n};\n\nconst COMMENTS = [...Array(8)].map((_, index) => ({\n id: uuidv4(),\n avatar: mockData.image.avatar(index),\n name: mockData.name.fullName(index),\n createdAt: mockData.time(index),\n messageType: index === 3 || index === 5 ? 'image' : 'text',\n message:\n (index === 3 && mockData.image.feed(6)) ||\n (index === 5 && mockData.image.feed(8)) ||\n mockData.text.sentence(index),\n}));\n\n// ----------------------------------------------------------------------\n\nconst cardList = [\n {\n id: cardIds.card1,\n name: 'Call with sales of HubSpot',\n description:\n 'Duis condimentum lacus finibus felis pellentesque, ac auctor nibh fermentum. Duis sed dui ante. Phasellus id eros tincidunt, dictum lorem vitae, pellentesque sem. Aenean eu enim sit amet mauris rhoncus mollis. Sed enim turpis, porta a felis et, luctus faucibus nisi. Phasellus et metus fermentum, ultrices arcu aliquam, facilisis justo. Cras nunc nunc, elementum sed euismod ut, maximus eget nibh. Phasellus condimentum lorem neque. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Fusce sagittis pharetra eleifend. Suspendisse potenti.',\n assignee: [\n {\n id: memberIds.member1,\n avatar: mockData.image.avatar(1),\n name: mockData.name.fullName(1),\n },\n ],\n due: [addDays(now, 6).getTime(), addDays(now, 7).getTime()],\n attachments: [],\n comments: COMMENTS,\n completed: true,\n },\n {\n id: cardIds.card2,\n name: 'Interview for the Asis. Sales Manager',\n description:\n 'We are looking for vue experience and of course node js strong knowledge',\n assignee: [\n {\n id: memberIds.member1,\n avatar: mockData.image.avatar(1),\n name: mockData.name.fullName(2),\n },\n {\n id: memberIds.member2,\n avatar: mockData.image.avatar(2),\n name: mockData.name.fullName(3),\n },\n {\n id: memberIds.member4,\n avatar: mockData.image.avatar(3),\n name: mockData.name.fullName(4),\n },\n {\n id: memberIds.member5,\n avatar: mockData.image.avatar(4),\n name: mockData.name.fullName(5),\n },\n {\n id: memberIds.member3,\n avatar: mockData.image.avatar(5),\n name: mockData.name.fullName(6),\n },\n ],\n due: [addDays(now, 6).getTime(), addDays(now, 7).getTime()],\n attachments: [mockData.image.feed(1)],\n comments: [],\n completed: false,\n },\n {\n id: cardIds.card3,\n name: 'Change the height of the top bar because it looks too chunky',\n description:\n 'We nede to make it aggressive with pricing because it’s in their interest to acquire us',\n assignee: [],\n due: [null, null],\n attachments: [],\n comments: [],\n completed: true,\n },\n {\n id: cardIds.card4,\n name: 'Integrate Stripe API',\n description:\n 'We nede to make it aggresive with pricing because it’s in their interest to acquire us',\n assignee: [\n {\n id: memberIds.member2,\n avatar: mockData.image.avatar(2),\n name: mockData.name.fullName(7),\n },\n {\n id: memberIds.member5,\n avatar: mockData.image.avatar(5),\n name: mockData.name.fullName(8),\n },\n ],\n due: [null, null],\n attachments: [mockData.image.feed(3)],\n comments: [],\n completed: false,\n },\n {\n id: cardIds.card5,\n name: 'Update the customer API for payments',\n description:\n 'We need to make it aggresive with pricing because it’s in their interest to acquire us',\n assignee: [\n {\n id: memberIds.member1,\n avatar: mockData.image.avatar(1),\n name: mockData.name.fullName(9),\n },\n ],\n due: [null, null],\n attachments: [],\n comments: [],\n completed: true,\n },\n {\n id: cardIds.card6,\n name: 'Release minimals DS',\n description: 'Production',\n assignee: [\n {\n id: memberIds.member1,\n avatar: mockData.image.avatar(1),\n name: mockData.name.fullName(10),\n },\n ],\n due: [null, null],\n attachments: [],\n comments: [],\n completed: true,\n },\n];\n\nconst columnList = [\n {\n id: columnIds.column1,\n name: 'Backlog',\n cardIds: [cardIds.card1, cardIds.card2, cardIds.card3],\n },\n {\n id: columnIds.column2,\n name: 'Progress',\n cardIds: [cardIds.card4, cardIds.card5],\n },\n {\n id: columnIds.column3,\n name: 'Q&A',\n cardIds: [],\n },\n {\n id: columnIds.column4,\n name: 'Production',\n cardIds: [cardIds.card6],\n },\n];\n\nconst board = {\n cards: cardList,\n columns: columnList,\n columnOrder: [\n columnIds.column1,\n columnIds.column2,\n columnIds.column3,\n columnIds.column4,\n ],\n};\n\n// ----------------------------------------------------------------------\n\nmock.onGet('/api/kanban/board').reply(200, { board });\n\n// ----------------------------------------------------------------------\n\nmock.onPost('/api/kanban/columns/new').reply((request) => {\n try {\n const { name } = JSON.parse(request.data);\n const column = {\n id: uuidv4(),\n name,\n cardIds: [],\n };\n board.columns.push(column);\n board.columnOrder.push(column.id);\n return [200, { column }];\n } catch (error) {\n console.error(error);\n return [500, { message: 'Internal server error' }];\n }\n});\n\n// ----------------------------------------------------------------------\n\nmock.onPost('/api/kanban/columns/update').reply((request) => {\n try {\n const { columnId, updateColumn } = JSON.parse(request.data);\n const columnIndex = board.columns.findIndex(\n (column) => column.id === columnId\n );\n\n board.columns[columnIndex] = {\n ...board.columns[columnIndex],\n ...updateColumn,\n };\n\n return [200, { column: board.columns[columnIndex] }];\n } catch (error) {\n console.error(error);\n return [500, { message: 'Internal server error' }];\n }\n});\n\n// ----------------------------------------------------------------------\n\nmock.onPost('/api/kanban/columns/delete').reply((request) => {\n try {\n const { columnId } = JSON.parse(request.data);\n\n const column = board.columns.find((c) => c.id === columnId);\n\n if (column) {\n board.cards = board.cards.filter(\n (card) => !column.cardIds.includes(card.id)\n );\n }\n\n board.columns = board.columns.filter((id) => id !== columnId);\n board.columnOrder = board.columnOrder.filter((id) => id !== columnId);\n\n return [200, { columnId }];\n } catch (error) {\n console.error(error);\n return [500, { message: 'Internal server error' }];\n }\n});\n","import i18n from 'i18next';\nimport LanguageDetector from 'i18next-browser-languagedetector';\nimport { initReactI18next } from 'react-i18next';\n//\nimport enLocales from './en.json';\nimport deLocales from './de.json';\nimport frLocales from './fr.json';\n\n// ----------------------------------------------------------------------\n\ni18n\n .use(LanguageDetector)\n .use(initReactI18next)\n .init({\n resources: {\n en: { translations: enLocales },\n de: { translations: deLocales },\n fr: { translations: frLocales }\n },\n lng: localStorage.getItem('i18nextLng') || 'en',\n fallbackLng: 'en',\n debug: false,\n ns: ['translations'],\n defaultNS: 'translations',\n interpolation: {\n escapeValue: false\n }\n });\n\nexport default i18n;\n","import hljs from 'highlight.js';\nimport 'highlight.js/styles/atom-one-dark.css';\n\n// ----------------------------------------------------------------------\n\nhljs.configure({\n languages: ['javascript', 'jsx', 'sh', 'bash', 'html', 'scss', 'css', 'json']\n});\n\n// @ts-ignore\nwindow.hljs = hljs;\n","// This optional code is used to register a service worker.\n// register() is not called by default.\n\n// This lets the app load faster on subsequent visits in production, and gives\n// it offline capabilities. However, it also means that developers (and users)\n// will only see deployed updates on subsequent visits to a page, after all the\n// existing tabs open on the page have been closed, since previously cached\n// resources are updated in the background.\n\n// To learn more about the benefits of this model and instructions on how to\n// opt-in, read https://cra.link/PWA\n\nconst isLocalhost = Boolean(\n window.location.hostname === 'localhost' ||\n // [::1] is the IPv6 localhost address.\n window.location.hostname === '[::1]' ||\n // 127.0.0.0/8 are considered localhost for IPv4.\n window.location.hostname.match(\n /^127(?:\\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/\n )\n);\n\ntype Config = {\n onSuccess?: (registration: ServiceWorkerRegistration) => void;\n onUpdate?: (registration: ServiceWorkerRegistration) => void;\n};\n\nexport function register(config?: Config) {\n if (process.env.NODE_ENV === 'production' && 'serviceWorker' in navigator) {\n // The URL constructor is available in all browsers that support SW.\n const publicUrl = new URL(process.env.PUBLIC_URL, window.location.href);\n if (publicUrl.origin !== window.location.origin) {\n // Our service worker won't work if PUBLIC_URL is on a different origin\n // from what our page is served on. This might happen if a CDN is used to\n // serve assets; see https://github.com/facebook/create-react-app/issues/2374\n return;\n }\n\n window.addEventListener('load', () => {\n const swUrl = `${process.env.PUBLIC_URL}/service-worker.js`;\n\n if (isLocalhost) {\n // This is running on localhost. Let's check if a service worker still exists or not.\n checkValidServiceWorker(swUrl, config);\n\n // Add some additional logging to localhost, pointing developers to the\n // service worker/PWA documentation.\n navigator.serviceWorker.ready.then(() => {\n console.log(\n 'This web app is being served cache-first by a service ' +\n 'worker. To learn more, visit https://cra.link/PWA'\n );\n });\n } else {\n // Is not localhost. Just register service worker\n registerValidSW(swUrl, config);\n }\n });\n }\n}\n\nfunction registerValidSW(swUrl: string, config?: Config) {\n navigator.serviceWorker\n .register(swUrl)\n .then((registration) => {\n registration.onupdatefound = () => {\n const installingWorker = registration.installing;\n if (installingWorker == null) {\n return;\n }\n installingWorker.onstatechange = () => {\n if (installingWorker.state === 'installed') {\n if (navigator.serviceWorker.controller) {\n // At this point, the updated precached content has been fetched,\n // but the previous service worker will still serve the older\n // content until all client tabs are closed.\n console.log(\n 'New content is available and will be used when all ' +\n 'tabs for this page are closed. See https://cra.link/PWA.'\n );\n\n // Execute callback\n if (config && config.onUpdate) {\n config.onUpdate(registration);\n }\n } else {\n // At this point, everything has been precached.\n // It's the perfect time to display a\n // \"Content is cached for offline use.\" message.\n console.log('Content is cached for offline use.');\n\n // Execute callback\n if (config && config.onSuccess) {\n config.onSuccess(registration);\n }\n }\n }\n };\n };\n })\n .catch((error) => {\n console.error('Error during service worker registration:', error);\n });\n}\n\nfunction checkValidServiceWorker(swUrl: string, config?: Config) {\n // Check if the service worker can be found. If it can't reload the page.\n fetch(swUrl, {\n headers: { 'Service-Worker': 'script' },\n })\n .then((response) => {\n // Ensure service worker exists, and that we really are getting a JS file.\n const contentType = response.headers.get('content-type');\n if (\n response.status === 404 ||\n (contentType != null && contentType.indexOf('javascript') === -1)\n ) {\n // No service worker found. Probably a different app. Reload the page.\n navigator.serviceWorker.ready.then((registration) => {\n registration.unregister().then(() => {\n window.location.reload();\n });\n });\n } else {\n // Service worker found. Proceed as normal.\n registerValidSW(swUrl, config);\n }\n })\n .catch(() => {\n console.log(\n 'No internet connection found. App is running in offline mode.'\n );\n });\n}\n\nexport function unregister() {\n if ('serviceWorker' in navigator) {\n navigator.serviceWorker.ready\n .then((registration) => {\n registration.unregister();\n })\n .catch((error) => {\n console.error(error.message);\n });\n }\n}\n","import { ReportHandler } from 'web-vitals';\n\nconst reportWebVitals = (onPerfEntry?: ReportHandler) => {\n if (onPerfEntry && onPerfEntry instanceof Function) {\n import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {\n getCLS(onPerfEntry);\n getFID(onPerfEntry);\n getFCP(onPerfEntry);\n getLCP(onPerfEntry);\n getTTFB(onPerfEntry);\n });\n }\n};\n\nexport default reportWebVitals;\n","import { alpha } from '@mui/material/styles';\n\n// ----------------------------------------------------------------------\n\nfunction createGradient(color1: string, color2: string) {\n return `linear-gradient(to bottom, ${color1}, ${color2})`;\n}\n\ninterface GradientsPaletteOptions {\n primary: string;\n info: string;\n success: string;\n warning: string;\n error: string;\n}\n\ninterface ChartPaletteOptions {\n violet: string[];\n blue: string[];\n green: string[];\n yellow: string[];\n red: string[];\n}\n\ndeclare module '@mui/material/styles/createPalette' {\n interface TypeBackground {\n neutral: string;\n }\n interface SimplePaletteColorOptions {\n lighter: string;\n darker: string;\n }\n interface PaletteColor {\n lighter: string;\n darker: string;\n }\n interface Palette {\n gradients: GradientsPaletteOptions;\n chart: ChartPaletteOptions;\n }\n interface PaletteOptions {\n gradients: GradientsPaletteOptions;\n chart: ChartPaletteOptions;\n }\n}\n\ndeclare module '@mui/material' {\n interface Color {\n 0: string;\n 500_8: string;\n 500_12: string;\n 500_16: string;\n 500_24: string;\n 500_32: string;\n 500_48: string;\n 500_56: string;\n 500_80: string;\n }\n}\n\n// SETUP COLORS\nconst PRIMARY = {\n lighter: '#E0F4F0',\n light: '#82D2C0',\n main: '#25B195',\n dark: '#008467',\n darker: '#00573D'\n};\nconst SECONDARY = {\n lighter: '#E2F5F8',\n light: '#88D2E4',\n main: '#36A7D1',\n dark: '#2587B1',\n darker: '#18577C'\n};\nconst INFO = {\n lighter: '#D0F2FF',\n light: '#74CAFF',\n main: '#1890FF',\n dark: '#0C53B7',\n darker: '#04297A'\n};\nconst SUCCESS = {\n lighter: '#E9FCD4',\n light: '#AAF27F',\n main: '#54D62C',\n dark: '#229A16',\n darker: '#08660D'\n};\nconst WARNING = {\n lighter: '#FFF7CD',\n light: '#FFE16A',\n main: '#FFC107',\n dark: '#B78103',\n darker: '#7A4F01'\n};\nconst ERROR = {\n lighter: '#FFE7D9',\n light: '#FFA48D',\n main: '#FF4842',\n dark: '#B72136',\n darker: '#7A0C2E'\n};\n\nconst GREY = {\n 0: '#FFFFFF',\n 100: '#F4F4F6',\n 200: '#E9EAEE',\n 300: '#C5CBD5',\n 400: '#A2AAB9',\n 500: '#7F899C',\n 600: '#657088',\n 700: '#44516F',\n 800: '#353E56',\n 900: '#2A2E3C',\n 500_8: alpha('#7F899C', 0.08),\n 500_12: alpha('#7F899C', 0.12),\n 500_16: alpha('#7F899C', 0.16),\n 500_24: alpha('#7F899C', 0.24),\n 500_32: alpha('#7F899C', 0.32),\n 500_48: alpha('#7F899C', 0.48),\n 500_56: alpha('#7F899C', 0.56),\n 500_80: alpha('#7F899C', 0.8)\n};\n\nconst GRADIENTS = {\n primary: createGradient(PRIMARY.light, PRIMARY.main),\n info: createGradient(INFO.light, INFO.main),\n success: createGradient(SUCCESS.light, SUCCESS.main),\n warning: createGradient(WARNING.light, WARNING.main),\n error: createGradient(ERROR.light, ERROR.main)\n};\n\nconst CHART_COLORS = {\n violet: ['#826AF9', '#9E86FF', '#D0AEFF', '#F7D2FF'],\n blue: ['#2D99FF', '#83CFFF', '#A5F3FF', '#CCFAFF'],\n green: ['#2CD9C5', '#60F1C8', '#A4F7CC', '#C0F2DC'],\n yellow: ['#FFE700', '#FFEF5A', '#FFF7AE', '#FFF3D6'],\n red: ['#FF6C40', '#FF8F6D', '#FFBD98', '#FFF2D4']\n};\n\nconst COMMON = {\n common: { black: '#000', white: '#fff' },\n primary: { ...PRIMARY, contrastText: '#fff' },\n secondary: { ...SECONDARY, contrastText: '#fff' },\n info: { ...INFO, contrastText: '#fff' },\n success: { ...SUCCESS, contrastText: GREY[800] },\n warning: { ...WARNING, contrastText: GREY[800] },\n error: { ...ERROR, contrastText: '#fff' },\n grey: GREY,\n gradients: GRADIENTS,\n chart: CHART_COLORS,\n divider: GREY[500_24],\n action: {\n hover: GREY[500_8],\n selected: GREY[500_16],\n disabled: GREY[500_80],\n disabledBackground: GREY[500_24],\n focus: GREY[500_24],\n hoverOpacity: 0.08,\n disabledOpacity: 0.48\n }\n};\n\nconst palette = {\n light: {\n ...COMMON,\n text: { primary: GREY[700], secondary: GREY[400], disabled: GREY[300] },\n background: { paper: '#fff', default: '#fff', neutral: GREY[100] },\n action: { active: GREY[600], ...COMMON.action }\n },\n dark: {\n ...COMMON,\n text: { primary: '#fff', secondary: GREY[500], disabled: GREY[600] },\n background: { paper: GREY[800], default: GREY[900], neutral: GREY[500_16] },\n action: { active: GREY[500], ...COMMON.action }\n }\n};\n\nexport default palette;\n","import { ReactNode, createContext } from 'react';\n// hooks\nimport useLocalStorage from '../hooks/useLocalStorage';\n// theme\nimport palette from '../theme/palette';\n// @type\nimport { ThemeMode, ThemeDirection, ThemeColor, SettingsContextProps } from '../@types/settings';\n\n// ----------------------------------------------------------------------\n\nconst PRIMARY_COLOR = [\n // DEFAULT\n {\n name: 'default',\n ...palette.light.primary\n },\n // PURPLE\n {\n name: 'purple',\n lighter: '#EBD6FD',\n light: '#B985F4',\n main: '#7635dc',\n dark: '#431A9E',\n darker: '#200A69',\n contrastText: '#fff'\n },\n // CYAN\n {\n name: 'cyan',\n lighter: '#D1FFFC',\n light: '#76F2FF',\n main: '#1CCAFF',\n dark: '#0E77B7',\n darker: '#053D7A',\n contrastText: palette.light.grey[800]\n },\n // BLUE\n {\n name: 'blue',\n lighter: '#CCDFFF',\n light: '#6697FF',\n main: '#0045FF',\n dark: '#0027B7',\n darker: '#00137A',\n contrastText: '#fff'\n },\n // ORANGE\n {\n name: 'orange',\n lighter: '#FEF4D4',\n light: '#FED680',\n main: '#fda92d',\n dark: '#B66816',\n darker: '#793908',\n contrastText: palette.light.grey[800]\n },\n // RED\n {\n name: 'red',\n lighter: '#FFE3D5',\n light: '#FFC1AC',\n main: '#FF3030',\n dark: '#B71833',\n darker: '#7A0930',\n contrastText: '#fff'\n }\n];\n\nfunction SetColor(themeColor: ThemeColor) {\n let color;\n const DEFAULT = PRIMARY_COLOR[0];\n const PURPLE = PRIMARY_COLOR[1];\n const CYAN = PRIMARY_COLOR[2];\n const BLUE = PRIMARY_COLOR[3];\n const ORANGE = PRIMARY_COLOR[4];\n const RED = PRIMARY_COLOR[5];\n\n switch (themeColor) {\n case 'purple':\n color = PURPLE;\n break;\n case 'cyan':\n color = CYAN;\n break;\n case 'blue':\n color = BLUE;\n break;\n case 'orange':\n color = ORANGE;\n break;\n case 'red':\n color = RED;\n break;\n default:\n color = DEFAULT;\n }\n return color;\n}\n\nconst initialState: SettingsContextProps = {\n themeMode: 'light',\n themeDirection: 'ltr',\n themeColor: 'default',\n themeStretch: false,\n onChangeMode: () => {},\n onChangeDirection: () => {},\n onChangeColor: () => {},\n onToggleStretch: () => {},\n setColor: PRIMARY_COLOR[0],\n colorOption: []\n};\n\nconst SettingsContext = createContext(initialState);\n\ntype SettingsProviderProps = {\n children: ReactNode;\n};\n\nfunction SettingsProvider({ children }: SettingsProviderProps) {\n const [settings, setSettings] = useLocalStorage('settings', {\n themeMode: initialState.themeMode,\n themeDirection: initialState.themeDirection,\n themeColor: initialState.themeColor,\n themeStretch: initialState.themeStretch\n });\n\n const onChangeMode = (event: React.ChangeEvent