Create Input Component, restructure files/components

pages/_app.tsx

@@ -3,8 +3,8 @@ import React from 'react';
 import {ApolloProvider} from '@apollo/client';
 import client from '../src/middleware/graphql/apollo-client';
 import type {AppProps /*, AppContext */, NextWebVitalsMetric} from 'next/app';
-import Navbar from '../src/ui/Navbar';
-import Footer from '../src/ui/Footer';
+import Navbar from '../src/components/ui/Navbar';
+import Footer from '../src/components/ui/Footer';
 import {Provider} from 'react-redux';
 // @ts-ignore
 import {store} from '../src/store';

pages/about/index.tsx

@@ -1,7 +1,7 @@
 import React, {ReactNode} from 'react';
 import H from '../../src/components/common/H';
 //@ts-ignore
-import SEO from '@/src/components/SEO';
+import SEO from '@/src/components/common/SEO';
 export default function About(): ReactNode {
   return (
     <>

pages/auction-house/index.tsx

@@ -1,10 +1,10 @@
 import React, {Fragment, useEffect, useState} from 'react';
 //@ts-ignore
-import SEO from '../../src/components/SEO';
+import SEO from '../../src/components/common/SEO';
 
 const {DateTime} = require('luxon');
 
-import ANIM_Ellipsis from '../../src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '../../src/components/blocks/ANIM-Ellipsis';
 import H from '../../src/components/common/H';
 import DABU from '../../dabu';
 import {runTime} from '../../dabu/helpers';

pages/index.tsx

@@ -1,12 +1,12 @@
 import React, {Fragment, useEffect, useState} from 'react';
 //@ts-ignore
-import SEO from '../src/components/SEO';
+import SEO from '../src/components/common/SEO';
 // @ts-ignore
-import NFTCARD from '../src/ui/NFTCard';
+import NFTCARD from '../src/components/ui/NFTCard';
 
 const {DateTime} = require('luxon');
 
-import ANIM_Ellipsis from '../src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '../src/components/blocks/ANIM-Ellipsis';
 import H from '../src/components/common/H';
 import DABU from '../dabu';
 import {runTime} from '../dabu/helpers';

pages/profile.tsx

@@ -6,11 +6,11 @@ import TAKO from '@/src/tako';
 import DABU from '../dabu';
 
 //@ts-ignore
-import SEO from '@/src/components/SEO';
+import SEO from '@/src/components/common/SEO';
 //@ts-ignore
 import Button from '@/src/components/common/Button';
 // @ts-ignore
-import ANIM_Ellipsis from '@/src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '@/src/components/blocks/ANIM-Ellipsis';
 import {
   useAddress,
   MediaRenderer,

pages/trade/[network_id].tsx

@@ -11,13 +11,13 @@ import {
   ChainId,
 } from '@thirdweb-dev/react';
 //@ts-ignore
-import SEO from '../../src/components/SEO';
+import SEO from '../../src/components/common/SEO';
 // @ts-ignore
 import Button from '../../src/components/common/Button';
 // @ts-ignore
 import getTrade from '../../src/hooks/getTrade';
 // @ts-ignore
-import ANIM_Ellipsis from '@/src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '@/src/components/blocks/ANIM-Ellipsis';
 function truncateAddress(address) {
   try {
     return `${address.substring(0, 6).toLowerCase()}...${address

pages/trade/index.tsx

@@ -4,13 +4,13 @@ const {DateTime} = require('luxon');
 import DABU from '../../dabu';
 import {useAddress} from '@thirdweb-dev/react';
 //@ts-ignore
-import SEO from '@/src/components/SEO';
+import SEO from '@/src/components/common/SEO';
 // @ts-ignore
 import Button from '@/src/components/common/Button';
 // @ts-ignore
 import NFTCard from '../../src/ui/NFTCard';
 // @ts-ignore
-import ANIM_Ellipsis from '@/src/components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '@/src/components/blocks/ANIM-Ellipsis';
 import Web3 from 'web3';
 import { runTime } from '../../dabu/helpers';
 var BN: any = Web3.utils.hexToNumberString;

src/components/FormInputs.js → src/components/blocks/FormInputs.js

@@ -1,4 +1,4 @@
-import Input from './common/input.tsx';
+import Input from '../common/input.tsx';
 import NFTInput from './NFTInput';
 export default function FormInputs({
   id,

src/components/NavItem/index.stories.js → src/components/blocks/NavItem/index.stories.js

@@ -1,7 +1,7 @@
 // /stories/pages/Button.stories.jsx
 import _NavItem from '.';
 export default {
-  title: 'Components/NavItem',
+  title: 'Components/Blocks/NavItem',
   component: _NavItem,
 };
 

src/components/NavItem/index.tsx → src/components/blocks/NavItem/index.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import Button from '../common/Button';
+import Button from '../../common/Button';
 export default function NavButton({
   children,
   className,

src/components/WalletButton/index.js → src/components/blocks/WalletButton/index.js

@@ -1,5 +1,5 @@
-import Button from '../common/Button';
-import {truncateAddress} from '../../../dabu/helpers/truncateAddress';
+import Button from '../../common/Button';
+import {truncateAddress} from '../../../../dabu/helpers/truncateAddress';
 function WalletButton({address, onPress, onLogin}) {
   return (
     <div

src/components/WalletButton/index.stories.js → src/components/blocks/WalletButton/index.stories.js

@@ -1,7 +1,7 @@
 // /stories/pages/Button.stories.jsx
 import WalletButton from '.';
 export default {
-  title: 'Components/WalletButton',
+  title: 'Components/Blocks/WalletButton',
   component: WalletButton,
 };
 

src/components/common/Input.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+export default function Input({
+  type,
+  value,
+}: {
+  type: string;
+  value: string;
+}): React.ReactElement {
+  return <input type={type} value={value} />;
+}

src/ui/Footer/index.tsx → src/components/ui/Footer/index.tsx

@@ -1,7 +1,7 @@
 import React, {useEffect, useState} from 'react';
 import {useRouter} from 'next/router';
-import WalletButton from '../../components/WalletButton';
-import Button from '../../components/common/Button';
+import WalletButton from '../../blocks/WalletButton';
+import Button from '../../common/Button';
 import Link from 'next/link';
 function Footer({wrapperCss = '', ...props}: any) {
   const router = useRouter();

src/ui/NFTCard/index.stories.jsx → src/components/ui/NFTCard/index.stories.jsx

@@ -2,7 +2,7 @@
 import _NFTCard from '.';
 
 export default {
-  title: 'UI/NFTCard',
+  title: 'Components/UI/NFTCard',
   component: _NFTCard,
 };
 

src/ui/NFTCard/index.tsx → src/components/ui/NFTCard/index.tsx

@@ -1,15 +1,15 @@
 import React, {useEffect, useState, useRef, useMemo} from 'react';
 import mime from 'mime/lite.js';
 // @ts-ignore
-import ANIM_Ellipsis from '../../components/ANIM-Ellipsis';
+import ANIM_Ellipsis from '../../blocks/ANIM-Ellipsis';
 import {
   useQuery,
   QueryClient,
   QueryClientProvider,
 } from '@tanstack/react-query';
 const queryClient = new QueryClient();
 // @ts-ignore
-import Button from '../../components/common/Button';
+import Button from '../../common/Button';
 import {useRouter} from 'next/router';
 
 const NFTCard = ({

src/ui/Navbar/index.stories.jsx → src/components/ui/Navbar/index.stories.jsx

@@ -2,7 +2,7 @@
 import _Navbar from '.';
 
 export default {
-  title: 'UI/Navbar',
+  title: 'Components/UI/Navbar',
   component: _Navbar,
 };
 

src/ui/Navbar/index.tsx → src/components/ui/Navbar/index.tsx

@@ -1,9 +1,9 @@
 import React, {useEffect, useState} from 'react';
 import {useRouter} from 'next/router';
-import WalletButton from '../../components/WalletButton';
-import Button from '../../components/common/Button';
+import WalletButton from '../../blocks/WalletButton';
+import Button from '../../common/Button';
 import Link from 'next/link';
-import NavItem from '../../components/NavItem';
+import NavItem from '../../blocks/NavItem';
 function Navbar({wrapperCss = '', ...props}: any): React.ReactElement {
   const router = useRouter();
   const [show, setShow] = useState(false);