Introduce Footer & Improved Record support

web/src/Home.tsx

@@ -2,6 +2,7 @@ import { clsx } from 'clsx';
 import { useState } from 'react';
 import { FiSearch } from 'react-icons/fi';
 
+import { Footer } from './footer/Footer';
 import { Layout } from './Layout';
 
 export const Home = () => {
@@ -36,6 +37,7 @@ export const Home = () => {
  Go
  </a>
  </div>
+ <Footer />
  </Layout>
  );
 };

web/src/Profile.tsx

@@ -12,6 +12,7 @@ import {
 
 import { DEVELOPER_MODE } from './App';
 import { Field } from './field/Field';
+import { Footer } from './footer/Footer';
 import { Layout } from './Layout';
 import { GoGassless } from './migration/GoGassless';
 
@@ -247,9 +248,9 @@ export const Profile: FC<{ name: string }> = ({ name }) => {
  editable={editable}
  />
  <Field
- label="Website"
- record="url"
- value={data.records['url']}
+ label="Pronouns"
+ record="pronouns"
+ value={data.records['pronouns']}
  editable={editable}
  />
  <Field
@@ -258,6 +259,12 @@ export const Profile: FC<{ name: string }> = ({ name }) => {
  value={data.records['description']}
  editable={editable}
  />
+ <Field
+ label="Website"
+ record="url"
+ value={data.records['url']}
+ editable={editable}
+ />
  <Field
  label="X"
  record="com.twitter"
@@ -270,6 +277,12 @@ export const Profile: FC<{ name: string }> = ({ name }) => {
  value={data.records['org.telegram']}
  editable={editable}
  />
+ <Field
+ label="Timezone"
+ record="timezone"
+ value={data.records['timezone']}
+ editable={editable}
+ />
  <Field
  label="Discord"
  record="com.discord"
@@ -329,6 +342,7 @@ export const Profile: FC<{ name: string }> = ({ name }) => {
  )}
  </div>
  </div>
+ <Footer />
  </Layout>
  );
 };

web/src/field/Field.tsx

@@ -2,11 +2,14 @@ import { BrowserSVG, PersonSVG } from '@ensdomains/thorin';
 import { FC, ReactNode } from 'react';
 import { BsTwitterX } from 'react-icons/bs';
 import {
+ FaBookOpen,
+ FaBookReader,
  FaDiscord,
  FaEthereum,
  FaGithub,
  FaTelegramPlane,
 } from 'react-icons/fa';
+import { FiAlignJustify, FiClock } from 'react-icons/fi';
 
 const field_record_to_icon: Record<string, ReactNode> = {
  'com.twitter': <BsTwitterX />,
@@ -15,6 +18,8 @@ const field_record_to_icon: Record<string, ReactNode> = {
  url: <BrowserSVG />,
  'com.discord': <FaDiscord />,
  'com.github': <FaGithub />,
+ description: <FiAlignJustify />,
+ timezone: <FiClock />,
  60: <FaEthereum />,
 };
 
@@ -25,7 +30,10 @@ const field_placeholders: Record<string, string> = {
  'org.telegram': 'lucemans',
  'com.discord': 'lucemans',
  name: 'Luc',
+ description: 'this is my description',
  url: 'https://example.com',
+ pronouns: 'they/them',
+ timezone: 'Europe/Amsterdam',
 };
 
 export const Field: FC<{

web/src/footer/Footer.tsx

@@ -0,0 +1,24 @@
+import { FiGithub } from 'react-icons/fi';
+
+export const Footer = () => {
+ return (
+ <div className="min-h-[10rem] w-full">
+ <div className="text-center flex justify-center center gap-1 items-center">
+ <a href="https://ens.app" target="_blank">
+ ENS
+ </a>
+ |
+ <a href="https://v3x.company" target="_blank">
+ V3X
+ </a>
+ |
+ <a
+ href="https://github.com/ensdomains/offchain-gateway-rs"
+ target="_blank"
+ >
+ <FiGithub />
+ </a>
+ </div>
+ </div>
+ );
+};