🎉 Everything is free here. Read more →
Tutorial
Project Tutorial
CrowdDeFiX
Assets

Assets

  1. We will add some assets to our projects and export them using index.js file.

Assets are the images, icons, videos, etc. that we will use in our project. This should be in our src folder.

index.js
 
import createCampaign from './create-campaign.svg';
import dashboard from './dashboard.svg';
import logo from './logo.svg';
import logout from './logout.svg';
import payment from './payment.svg';
import profile from './profile.svg';
import sun from './sun.svg';
import withdraw from './withdraw.svg';
import tagType from './type.svg';
import search from './search.svg';
import menu from './menu.svg';
import money from './money.svg';
import loader from './loader.svg';
import thirdweb from './thirdweb.png';
 
export {
  tagType,
  createCampaign,
  dashboard,
  logo,
  logout,
  payment,
  profile,
  sun,
  withdraw,
  search,
  menu,
  money,
  loader,
  thirdweb,
};
  1. Create a named folder in the src folder and name it as constants

This code defines a JavaScript module that exports a constant array named navlinks. The array contains objects, each representing a navigation link with properties like name, imgUrl, link, and an optional disabled flag. The module imports image assets from the '../assets' folder and associates them with the respective navigation link.

You should use this code to maintain a centralized and easily manageable configuration for your navigation links. By having a dedicated constants file for these links, you can quickly update or modify the navigation structure without searching through your entire codebase.

constants/index.js
 
import { createCampaign, dashboard, logout, payment, profile, withdraw } from '../assets';
 
export const navlinks = [
  {
    name: 'dashboard',
    imgUrl: dashboard,
    link: '/',
  },
  {
    name: 'campaign',
    imgUrl: createCampaign,
    link: '/create-campaign',
  },
  {
    name: 'payment',
    imgUrl: payment,
    link: '/',
    disabled: true,
  },
  {
    name: 'withdraw',
    imgUrl: withdraw,
    link: '/',
    disabled: true,
  },
  {
    name: 'profile',
    imgUrl: profile,
    link: '/profile',
  },
  {
    name: 'logout',
    imgUrl: logout,
    link: '/',
    disabled: true,
  },
];
Tailwind SetupFolder Setup