chore: improve responsibility
This commit is contained in:
Fernando Falci
parent
ca1defd3a8
commit
0292e5614b
59
src/App.jsx
59
src/App.jsx
@ -15,52 +15,39 @@ function App() {
|
||||
useDocumentTitle(PAGE_TITLE);
|
||||
return (
|
||||
<div className="bg-neutral-50 h-screen flex">
|
||||
<div className="flex-col justify-between items-center flex max-w-7xl mx-auto flex-1">
|
||||
<div className="flex-col justify-center items-center gap-10 flex w-full">
|
||||
<div className="h-20 p-4 justify-between items-center inline-flex w-full ">
|
||||
<div className="flex-col justify-between items-center flex max-w-7xl mx-auto gap-10 w-full">
|
||||
<nav className="w-full flex justify-between gap-2 px-4 py-2">
|
||||
<img className="w-36" src={brandLogo} />
|
||||
<div className="justify-start items-center gap-6 flex ">
|
||||
<ConnectButton />
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex-col justify-start items-center gap-16 flex px-4 lg:px-0">
|
||||
<div className="flex-col justify-start items-center gap-4 fle">
|
||||
<div className="self-stretch flex-col justify-start items-center gap-4 flex">
|
||||
<div className="self-stretch text-center text-neutral-950 text-5xl font-bold leading-relaxed">
|
||||
</nav>
|
||||
<section className="flex-grow w-full flex flex-col items-center p-4 gap-6 text-center">
|
||||
<div className="text-neutral-950 text-4xl lg:text-5xl font-bold leading-none">
|
||||
{HERO_TEXT}
|
||||
</div>
|
||||
<div className="self-stretch h-10 text-center text-neutral-500 text-2xl font-bold leading-normal">
|
||||
<div className="text-neutral-500 text-lg lg:text-2xl font-bold leading-normal">
|
||||
{SUB_TEXT}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div className="w-full flex-1 pt-6 max-w-xl text-left">
|
||||
<Search />
|
||||
</div>
|
||||
</div>
|
||||
<div className="px-4 py-6 border-t border-gray-200 flex-col justify-start items-center gap-6 flex w-full">
|
||||
<div className="self-stretch justify-between items-left lg:items-center inline-flex flex-col lg:flex-row gap-4">
|
||||
<div className="justify-start items-center gap-6 flex">
|
||||
</section>
|
||||
<footer className="w-full border-t px-4 py-6 flex flex-col gap-4">
|
||||
<ul className="flex gap-8 text-neutral-700 text-sm font-medium uppercase">
|
||||
<li>
|
||||
<a href={`https://twitter.com/${TWITTER_HANDLE}`}>Twitter</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="https://github.com/namebasehq/wallet-id">GitHub</a>
|
||||
</li>
|
||||
<li>
|
||||
<a
|
||||
className="text-neutral-700 text-sm font-medium uppercase"
|
||||
href={`https://twitter.com/${TWITTER_HANDLE}`}
|
||||
>
|
||||
Twitter
|
||||
</a>
|
||||
<a
|
||||
className="text-neutral-700 text-sm font-medium uppercase"
|
||||
href="https://github.com/namebasehq/wallet-id"
|
||||
>
|
||||
GitHub
|
||||
</a>
|
||||
<a
|
||||
className="text-neutral-700 text-sm font-medium uppercase"
|
||||
href={`https://opensea.io/collection/handshake-slds?search[stringTraits][0][name]=TLD&search[stringTraits][0][values][0]=${TLD}`}
|
||||
>
|
||||
Opensea
|
||||
OpenSea
|
||||
</a>
|
||||
</div>
|
||||
<div className="justify-start items-center gap-4 flex">
|
||||
<div className="justify-start items-center gap-4 flex">
|
||||
</li>
|
||||
</ul>
|
||||
<div className="flex items-center gap-3">
|
||||
<div className="text-neutral-400 text-xs font-normal uppercase">
|
||||
powered by
|
||||
</div>
|
||||
@ -68,9 +55,7 @@ function App() {
|
||||
<img src={hnsLogo} className="w-24" />
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
|
||||
@ -5,7 +5,7 @@ export const Badge = ({ children, variant, title }) => (
|
||||
<div
|
||||
title={title}
|
||||
className={cn(
|
||||
'px-3 py-2 bg-opacity-10 rounded-2xl justify-center items-center gap-2 flex text-xs font-semibold leading-none',
|
||||
'px-3 py-2 bg-opacity-10 rounded-2xl justify-center items-center gap-2 flex text-xs font-semibold leading-none whitespace-nowrap',
|
||||
{
|
||||
'bg-emerald-500 text-emerald-500': variant === 'success',
|
||||
'bg-amber-500 text-amber-500': variant === 'premium',
|
||||
|
||||
27
src/components/Debug.jsx
Normal file
27
src/components/Debug.jsx
Normal file
@ -0,0 +1,27 @@
|
||||
import { DEV_MODE } from '../constants';
|
||||
import PropTypes from 'prop-types';
|
||||
|
||||
export const Debug = ({ error, data }) => {
|
||||
if (!DEV_MODE) return;
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-2 mt-10 text-left">
|
||||
<span className="text-red-600 font-semibold bg-yellow-300 px-4 py-2 rounded-md">
|
||||
TESTNET
|
||||
</span>
|
||||
{error && (
|
||||
<div className="p-2 text-red-600 bg-red-100 rounded-md">{error}</div>
|
||||
)}
|
||||
{data && (
|
||||
<pre className="p-2 text-gray-500 bg-gray-100 border border-gray-500 rounded-lg overflow-scroll">
|
||||
{JSON.stringify(data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
Debug.propTypes = {
|
||||
error: PropTypes.any,
|
||||
data: PropTypes.any,
|
||||
};
|
||||
@ -1,12 +1,13 @@
|
||||
import { useState } from 'react';
|
||||
import { useDebounce } from '@uidotdev/usehooks';
|
||||
import { useState } from 'react';
|
||||
import { SearchInput } from './SearchInput';
|
||||
import { SearchStatus } from './SearchStatus';
|
||||
|
||||
import { TLD } from '../../constants';
|
||||
import { useDomainStatus } from '../../hooks/useDomainStatus';
|
||||
import { Debug } from '../Debug';
|
||||
import { SearchCTA } from './SearchCTA';
|
||||
import { SearchPrice } from './SearchPrice';
|
||||
import { DEV_MODE, TLD } from '../../constants';
|
||||
import { useDomainStatus } from '../../hooks/useDomainStatus';
|
||||
|
||||
export const Search = () => {
|
||||
// "term" is the value from the input (first part if it contains a ".")
|
||||
@ -23,56 +24,37 @@ export const Search = () => {
|
||||
const show = !!label;
|
||||
|
||||
// if there's a "." (like "foo.bar"), we only use the first part (foo)
|
||||
const onChange = (term) => setTerm(term.split('.').at(0));
|
||||
const onChange = (term = '') => setTerm(term.toLowerCase().split('.').at(0));
|
||||
|
||||
// ensure the current data is related to the final search term
|
||||
const safeData = term === data?.label ? data : undefined;
|
||||
|
||||
return (
|
||||
<>
|
||||
<div className="w-full bg-white rounded-2xl border border-zinc-300 shadow">
|
||||
<div className="flex-1 bg-white rounded-2xl border border-zinc-300 shadow">
|
||||
<SearchInput expand={show} onChange={onChange} />
|
||||
{show && (
|
||||
<div className="w-full px-5 pt-3 pb-4 bg-white flex-col justify-start items-start gap-4 inline-flex rounded-b-2xl">
|
||||
<div className="self-stretch py-1 justify-between items-center inline-flex">
|
||||
<div className="rounded justify-start items-center gap-2 flex">
|
||||
<div>
|
||||
<span className="text-neutral-950 text-xl font-medium leading-loose">
|
||||
{label}
|
||||
</span>
|
||||
<span className="text-neutral-400 text-xl font-medium leading-loose">
|
||||
.{TLD}
|
||||
</span>
|
||||
<div className="w-full p-3 bg-white rounded-b-2xl inline-flex flex-col lg:flex-row gap-2 flex-1 lg:overflow-scroll">
|
||||
<div className="flex-1 lg:w-full lg:overflow-scroll items-center gap-2 flex">
|
||||
<div
|
||||
className="text-xl font-medium leading-loose w-full lg:w-fit overflow-scroll"
|
||||
style={{ scrollbarWidth: 'none' }}
|
||||
>
|
||||
<span className="text-neutral-950">{label}</span>
|
||||
<span className="text-neutral-400">.{TLD}</span>
|
||||
</div>
|
||||
|
||||
<SearchStatus details={safeData} />
|
||||
</div>
|
||||
<div className="justify-start items-center gap-4 flex">
|
||||
<div className="shrink-0 flex items-center gap-4 justify-between lg:justify-end ">
|
||||
<SearchPrice details={safeData} />
|
||||
<SearchCTA details={safeData} />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{DEV_MODE && (
|
||||
<div className="flex flex-col gap-2">
|
||||
<span className="text-red-600 font-semibold bg-yellow-300 px-4 py-2 rounded-md">
|
||||
TESTNET
|
||||
</span>
|
||||
{error && (
|
||||
<div className="p-2 text-red-600 bg-red-100 rounded-md">
|
||||
{error}
|
||||
</div>
|
||||
)}
|
||||
{data && (
|
||||
<pre className="p-2 text-gray-500 bg-gray-100 border border-gray-500 rounded-lg">
|
||||
{JSON.stringify(data, null, 2)}
|
||||
</pre>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
<Debug {...{ error, data }} />
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
Loading…
Reference in New Issue
Block a user