├── .env.example
├── .gitignore
├── README.md
├── auth.config.ts
├── components
    ├── Card.tsx
    └── Header.tsx
├── hooks
    └── useQueryUser.ts
├── next-env.d.ts
├── package.json
├── pages
    ├── _app.tsx
    ├── api
    │   ├── auth
    │   │   └── [...thirdweb].ts
    │   └── user.ts
    ├── create.tsx
    ├── index.tsx
    └── user
    │   └── [address].tsx
├── prisma
    ├── prisma.ts
    ├── schema.prisma
    └── user.ts
├── public
    ├── avatar.svg
    ├── favicon.ico
    └── thirdweb.svg
├── styles
    ├── Theme.module.css
    └── globals.css
├── tsconfig.json
└── types
    ├── User.ts
    └── index.ts


/.env.example:
--------------------------------------------------------------------------------
1 | DATABASE_URL=
2 | THIRDWEB_AUTH_PRIVATE_KEY=
3 | NEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN=


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # next.js
12 | /.next/
13 | /out/
14 | 
15 | # production
16 | /build
17 | 
18 | # misc
19 | .DS_Store
20 | *.pem
21 | 
22 | # debug
23 | npm-debug.log*
24 | yarn-debug.log*
25 | yarn-error.log*
26 | 
27 | # local env files
28 | .env
29 | .env.local
30 | .env.development.local
31 | .env.test.local
32 | .env.production.local
33 | 
34 | # vercel
35 | .vercel
36 | 
37 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thirdweb-example/creator-platform/5e40717d1916bf33622b6da2b55db6e5bfff5055/README.md


--------------------------------------------------------------------------------
/auth.config.ts:
--------------------------------------------------------------------------------
1 | import { ThirdwebAuth } from "@thirdweb-dev/auth/next";
2 | import { PrivateKeyWallet } from "@thirdweb-dev/auth/evm";
3 | 
4 | export const { ThirdwebAuthHandler, getUser } = ThirdwebAuth({
5 |   domain: process.env.NEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN as string,
6 |   wallet: new PrivateKeyWallet(process.env.THIRDWEB_AUTH_PRIVATE_KEY || ""),
7 | });
8 | 


--------------------------------------------------------------------------------
/components/Card.tsx:
--------------------------------------------------------------------------------
 1 | import { User } from "../types";
 2 | import Link from "next/link";
 3 | import { FC } from "react";
 4 | import styles from "../styles/Theme.module.css";
 5 | 
 6 | interface ICardProps {
 7 |   user: User;
 8 | }
 9 | 
10 | const Card: FC<ICardProps> = ({ user }) => {
11 |   return (
12 |     <Link href={`/user/${user.address}`}>
13 |       <div className={styles.card}>
14 |         <img
15 |           className={styles.avatar}
16 |           src={user?.avatar ? user.avatar : "/avatar.svg"}
17 |           alt={user.name}
18 |         />
19 |         <p>{user.name}</p>
20 |         <p>{user.bio}</p>
21 |         <p>{user.address}</p>
22 |       </div>
23 |     </Link>
24 |   );
25 | };
26 | export default Card;
27 | 


--------------------------------------------------------------------------------
/components/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { useAddress, useLogout, useUser } from "@thirdweb-dev/react";
 2 | import Image from "next/image";
 3 | import Link from "next/link";
 4 | import type { FC } from "react";
 5 | import { useQueryUser } from "../hooks/useQueryUser";
 6 | import styles from "../styles/Theme.module.css";
 7 | 
 8 | const Header: FC = () => {
 9 |   const address = useAddress();
10 |   const { user: thirdwebUser } = useUser();
11 |   const user = useQueryUser();
12 |   const { logout } = useLogout();
13 | 
14 |   return (
15 |     <div className={styles.header}>
16 |       <Image
17 |         src="/thirdweb.svg"
18 |         alt="logo"
19 |         width={50}
20 |         height={30}
21 |         style={{
22 |           objectFit: "contain",
23 |         }}
24 |       />
25 |       <div>
26 |         {user?.address ? (
27 |           <Link href={`/user/${user?.address}`}>
28 |             <img
29 |               className={`${styles.avatar} ${styles.headerAvatar}`}
30 |               src={user?.avatar ? user?.avatar : "/avatar.svg"}
31 |               alt={user?.name}
32 |             />
33 |           </Link>
34 |         ) : (
35 |           <Link href="/create">
36 |             <button>
37 |               {!address ? "Connect Wallet" : !thirdwebUser ? "Login" : "Create"}
38 |             </button>
39 |           </Link>
40 |         )}
41 | 
42 |         {user?.address && <button onClick={() => logout()}>Logout</button>}
43 |       </div>
44 |     </div>
45 |   );
46 | };
47 | 
48 | export default Header;
49 | 


--------------------------------------------------------------------------------
/hooks/useQueryUser.ts:
--------------------------------------------------------------------------------
 1 | import { useEffect, useState } from "react";
 2 | import { User } from "../types";
 3 | import { useUser } from "@thirdweb-dev/react";
 4 | 
 5 | const useQueryUser = () => {
 6 |   const { user: thirdwebUser } = useUser();
 7 |   const [user, setUser] = useState<User | null>(null);
 8 | 
 9 |   useEffect(() => {
10 |     const fetchUser = async () => {
11 |       try {
12 |         const response = await fetch("/api/user", {
13 |           method: "GET",
14 |         });
15 |         const user = await response.json();
16 |         setUser(user);
17 |       } catch (error) {}
18 |     };
19 | 
20 |     fetchUser();
21 |   }, [thirdwebUser]);
22 | 
23 |   return user;
24 | };
25 | 
26 | export { useQueryUser };
27 | 


--------------------------------------------------------------------------------
/next-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="next" />
2 | /// <reference types="next/image-types/global" />
3 | 
4 | // NOTE: This file should not be edited
5 | // see https://nextjs.org/docs/basic-features/typescript for more information.
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "creator-platform",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "scripts": {
 6 |     "dev": "npx prisma generate && next dev",
 7 |     "build": "npx prisma generate && next build",
 8 |     "start": "next start"
 9 |   },
10 |   "dependencies": {
11 |     "@prisma/client": "^4.3.1",
12 |     "@thirdweb-dev/auth": "^3",
13 |     "@thirdweb-dev/react": "^3",
14 |     "@thirdweb-dev/sdk": "^3",
15 |     "ethers": "^5",
16 |     "next": "^13",
17 |     "react": "^18.2",
18 |     "react-dom": "^18.2"
19 |   },
20 |   "devDependencies": {
21 |     "@types/node": "^18.11.12",
22 |     "@types/react": "^18.0.26",
23 |     "eslint": "^8.29.0",
24 |     "eslint-config-next": "^13",
25 |     "typescript": "^4.9.2"
26 |   }
27 | }
28 | 


--------------------------------------------------------------------------------
/pages/_app.tsx:
--------------------------------------------------------------------------------
 1 | import { ThirdwebProvider } from "@thirdweb-dev/react";
 2 | import { AppProps } from "next/app";
 3 | import "../styles/globals.css";
 4 | 
 5 | const MyApp = ({ Component, pageProps }: AppProps) => {
 6 |   // This is the chain your dApp will work on.
 7 |   const activeChain = "mumbai";
 8 | 
 9 |   return (
10 |     <ThirdwebProvider
11 |       activeChain={activeChain}
12 |       authConfig={{
13 |         authUrl: "/api/auth",
14 |         domain: process.env.NEXT_PUBLIC_THIRDWEB_AUTH_DOMAIN as string,
15 |       }}
16 |     >
17 |       <Component {...pageProps} />
18 |     </ThirdwebProvider>
19 |   );
20 | };
21 | 
22 | export default MyApp;
23 | 


--------------------------------------------------------------------------------
/pages/api/auth/[...thirdweb].ts:
--------------------------------------------------------------------------------
1 | import { ThirdwebAuthHandler } from "../../../auth.config";
2 | 
3 | export default ThirdwebAuthHandler();
4 | 


--------------------------------------------------------------------------------
/pages/api/user.ts:
--------------------------------------------------------------------------------
 1 | import { NextApiRequest, NextApiResponse } from "next";
 2 | import { createUser, deleteUser, getUser, updateUser } from "../../prisma/user";
 3 | 
 4 | import { getUser as getUserThirdweb } from "../../auth.config";
 5 | 
 6 | const handler = async (req: NextApiRequest, res: NextApiResponse) => {
 7 |   const thirdwebUser = await getUserThirdweb(req);
 8 | 
 9 |   if (!thirdwebUser) {
10 |     return res.status(401).json({ message: "Unauthorized" });
11 |   }
12 | 
13 |   try {
14 |     if (req.method === "GET") {
15 |       const user = await getUser({ address: thirdwebUser.address });
16 |       return res.status(200).json(user);
17 |     } else if (req.method === "POST") {
18 |       const { name, bio, avatar } = JSON.parse(req.body);
19 | 
20 |       if (!name || !bio) {
21 |         return res.status(400).json({ message: "Missing fields" });
22 |       }
23 | 
24 |       const user = await createUser({
25 |         name,
26 |         bio,
27 |         avatar,
28 |         address: thirdwebUser.address,
29 |       });
30 | 
31 |       return res.json(user);
32 |     } else if (req.method === "PUT") {
33 |       const { ...updateData } = JSON.parse(req.body);
34 | 
35 |       const user = await updateUser(thirdwebUser.address, updateData);
36 |       return res.json(user);
37 |     } else if (req.method === "DELETE") {
38 |       const user = await deleteUser(thirdwebUser.address);
39 |       return res.json(user);
40 |     }
41 | 
42 |     return res.status(405).json({ message: "Method not allowed" });
43 |   } catch (error) {
44 |     return res.status(500).json(error);
45 |   }
46 | };
47 | 
48 | export default handler;
49 | 


--------------------------------------------------------------------------------
/pages/create.tsx:
--------------------------------------------------------------------------------
  1 | import {
  2 |   ConnectWallet,
  3 |   useAddress,
  4 |   useLogin,
  5 |   useUser,
  6 | } from "@thirdweb-dev/react";
  7 | import { GetServerSideProps } from "next";
  8 | import { useRouter } from "next/router";
  9 | import { FC, useEffect, useState } from "react";
 10 | import { getUser } from "../prisma/user";
 11 | import { useQueryUser } from "../hooks/useQueryUser";
 12 | import { getUser as getUserThirdweb } from "../auth.config";
 13 | import styles from "../styles/Theme.module.css";
 14 | import Header from "../components/Header";
 15 | 
 16 | const Create: FC = () => {
 17 |   const address = useAddress();
 18 |   const { login } = useLogin();
 19 |   const { user: thirdwebUser } = useUser();
 20 |   const [name, setName] = useState("");
 21 |   const [bio, setBio] = useState("");
 22 |   const [avatar, setAvatar] = useState("");
 23 |   const router = useRouter();
 24 |   const user = useQueryUser();
 25 | 
 26 |   useEffect(() => {
 27 |     if (user?.address) {
 28 |       router.push(`/user/${user?.address}`);
 29 |     }
 30 |   }, [user]);
 31 | 
 32 |   if (!address) {
 33 |     return (
 34 |       <div className={styles.container}>
 35 |         <ConnectWallet accentColor="#F213A4" />
 36 |       </div>
 37 |     );
 38 |   }
 39 | 
 40 |   if (!thirdwebUser) {
 41 |     return (
 42 |       <div className={styles.container}>
 43 |         <button onClick={() => login()}>Login</button>
 44 |       </div>
 45 |     );
 46 |   }
 47 | 
 48 |   const handleSubmit = async (e?: React.FormEvent<HTMLFormElement>) => {
 49 |     if (e) {
 50 |       e.preventDefault();
 51 |     }
 52 |     try {
 53 |       await fetch("/api/user", {
 54 |         method: "POST",
 55 |         body: JSON.stringify({ name, bio, avatar }),
 56 |       });
 57 | 
 58 |       router.push(`/user/${thirdwebUser.address}`);
 59 |     } catch (error) {}
 60 |   };
 61 | 
 62 |   return (
 63 |     <div className={styles.container}>
 64 |       <Header />
 65 |       <h2>Create User</h2>
 66 |       <form className={styles.form} onSubmit={handleSubmit}>
 67 |         <input
 68 |           placeholder="Name"
 69 |           value={name}
 70 |           onChange={(e) => setName(e.target.value)}
 71 |         />
 72 |         <input
 73 |           placeholder="Bio"
 74 |           value={bio}
 75 |           onChange={(e) => setBio(e.target.value)}
 76 |         />
 77 |         <input
 78 |           placeholder="Avatar"
 79 |           value={avatar}
 80 |           onChange={(e) => setAvatar(e.target.value)}
 81 |         />
 82 |         <button onClick={() => handleSubmit()}>Create</button>
 83 |       </form>
 84 |     </div>
 85 |   );
 86 | };
 87 | 
 88 | export default Create;
 89 | 
 90 | export const getServerSideProps: GetServerSideProps = async (context) => {
 91 |   const { req } = context;
 92 | 
 93 |   const thirdwebUser = await getUserThirdweb(req);
 94 | 
 95 |   if (!thirdwebUser) {
 96 |     return {
 97 |       props: {},
 98 |     };
 99 |   }
100 | 
101 |   const user = await getUser({ address: thirdwebUser?.address });
102 | 
103 |   if (user?.address) {
104 |     return {
105 |       redirect: {
106 |         destination: `/user/${user.address}`,
107 |         permanent: false,
108 |       },
109 |     };
110 |   }
111 | 
112 |   return {
113 |     props: {},
114 |   };
115 | };
116 | 


--------------------------------------------------------------------------------
/pages/index.tsx:
--------------------------------------------------------------------------------
 1 | import { GetServerSideProps, NextPage } from "next";
 2 | import { User } from "../types";
 3 | import styles from "../styles/Theme.module.css";
 4 | import { getAllUsers } from "../prisma/user";
 5 | import Card from "../components/Card";
 6 | import Header from "../components/Header";
 7 | 
 8 | interface IHomeProps {
 9 |   users: User[];
10 | }
11 | 
12 | const Home: NextPage<IHomeProps> = ({ users }) => {
13 |   return (
14 |     <div className={styles.container}>
15 |       <Header />
16 |       <div className={styles.users}>
17 |         {users.map((user) => (
18 |           <Card user={user} key={user.address} />
19 |         ))}
20 |       </div>
21 |     </div>
22 |   );
23 | };
24 | 
25 | export default Home;
26 | 
27 | export const getServerSideProps: GetServerSideProps = async (context) => {
28 |   const users = await getAllUsers();
29 | 
30 |   return {
31 |     props: {
32 |       users,
33 |     },
34 |   };
35 | };
36 | 


--------------------------------------------------------------------------------
/pages/user/[address].tsx:
--------------------------------------------------------------------------------
  1 | import { useUser } from "@thirdweb-dev/react";
  2 | import type { GetServerSideProps, NextPage } from "next";
  3 | import { useRouter } from "next/router";
  4 | import { useState } from "react";
  5 | import { User } from "../../types";
  6 | import styles from "../../styles/Theme.module.css";
  7 | import { getUser } from "../../prisma/user";
  8 | 
  9 | interface IAddressProps {
 10 |   user: User;
 11 | }
 12 | 
 13 | const Address: NextPage<IAddressProps> = ({ user }) => {
 14 |   const { user: thirdwebUser } = useUser();
 15 |   const owner = thirdwebUser?.address === user.address;
 16 |   const [editing, setEditing] = useState(false);
 17 |   const [name, setName] = useState(user.name);
 18 |   const [bio, setBio] = useState(user.bio);
 19 |   const [avatar, setAvatar] = useState(user.avatar);
 20 |   const router = useRouter();
 21 | 
 22 |   const handleEditClick = async () => {
 23 |     if (editing) {
 24 |       try {
 25 |         await fetch("/api/user", {
 26 |           method: "PUT",
 27 |           body: JSON.stringify({ name, bio, avatar }),
 28 |         });
 29 |         setEditing(false);
 30 |         alert("Profile updated!");
 31 |       } catch (error) {
 32 |         alert("Error updating profile");
 33 |       }
 34 |     }
 35 | 
 36 |     if (!editing) {
 37 |       setEditing(true);
 38 |     }
 39 |   };
 40 | 
 41 |   const deleteAccount = async () => {
 42 |     try {
 43 |       await fetch("/api/user", {
 44 |         method: "DELETE",
 45 |       });
 46 |       alert("Account deleted");
 47 |       router.push("/");
 48 |     } catch (error) {
 49 |       alert("Error deleting account");
 50 |     }
 51 |   };
 52 | 
 53 |   const shortenAddress = (address: string) => {
 54 |     return `${address.slice(0, 6)}...${address.slice(-4)}`;
 55 |   };
 56 | 
 57 |   return (
 58 |     <div className={styles.container}>
 59 |       <div className={editing ? styles.form : ""}>
 60 |         {editing ? (
 61 |           <input
 62 |             value={avatar as string}
 63 |             onChange={(e) => setAvatar(e.target.value)}
 64 |             placeholder="Avatar"
 65 |           />
 66 |         ) : (
 67 |           <img
 68 |             className={styles.avatar}
 69 |             src={user?.avatar ? user.avatar : "/avatar.svg"}
 70 |             alt={user.name}
 71 |           />
 72 |         )}
 73 | 
 74 |         {editing ? (
 75 |           <input
 76 |             value={name}
 77 |             onChange={(e) => setName(e.target.value)}
 78 |             placeholder="Name"
 79 |           />
 80 |         ) : (
 81 |           <p>{user.name}</p>
 82 |         )}
 83 |         {editing ? (
 84 |           <input
 85 |             value={bio}
 86 |             onChange={(e) => setBio(e.target.value)}
 87 |             placeholder="Bio"
 88 |           />
 89 |         ) : (
 90 |           <p>{user.bio}</p>
 91 |         )}
 92 | 
 93 |         <a
 94 |           href={`https://goerli.etherscan.io/address/${user.address}`}
 95 |           target="_blank"
 96 |           rel="noreferrer"
 97 |         >
 98 |           {shortenAddress(user.address)}
 99 |         </a>
100 | 
101 |         <div className={editing ? styles.userButtons : ""}>
102 |           {owner && editing && (
103 |             <button onClick={() => setEditing(false)}>Cancel</button>
104 |           )}
105 | 
106 |           {owner && (
107 |             <button
108 |               onClick={handleEditClick}
109 |               style={{
110 |                 marginTop: editing ? 0 : "1rem",
111 |               }}
112 |             >
113 |               {editing ? "Save" : "Edit"}
114 |             </button>
115 |           )}
116 |         </div>
117 | 
118 |         {owner && (
119 |           <button
120 |             onClick={deleteAccount}
121 |             style={{
122 |               marginTop: "1rem",
123 |             }}
124 |           >
125 |             Delete
126 |           </button>
127 |         )}
128 |       </div>
129 |     </div>
130 |   );
131 | };
132 | 
133 | export default Address;
134 | 
135 | export const getServerSideProps: GetServerSideProps = async (context) => {
136 |   const user = await getUser({ address: context?.params?.address as string });
137 | 
138 |   if (!user) {
139 |     return {
140 |       notFound: true,
141 |     };
142 |   }
143 | 
144 |   return {
145 |     props: {
146 |       user,
147 |     },
148 |   };
149 | };
150 | 


--------------------------------------------------------------------------------
/prisma/prisma.ts:
--------------------------------------------------------------------------------
 1 | import { PrismaClient } from "@prisma/client";
 2 | 
 3 | let prisma: PrismaClient;
 4 | 
 5 | if (process.env.NODE_ENV === "production") {
 6 |   prisma = new PrismaClient();
 7 | } else {
 8 |   const globalWithPrisma = global as typeof globalThis & {
 9 |     prisma: PrismaClient;
10 |   };
11 |   if (!globalWithPrisma.prisma) {
12 |     globalWithPrisma.prisma = new PrismaClient();
13 |   }
14 |   prisma = globalWithPrisma.prisma;
15 | }
16 | 
17 | export default prisma;
18 | 


--------------------------------------------------------------------------------
/prisma/schema.prisma:
--------------------------------------------------------------------------------
 1 | datasource db {
 2 |   provider = "mongodb"
 3 |   url      = env("DATABASE_URL")
 4 | }
 5 | 
 6 | generator client {
 7 |   provider = "prisma-client-js"
 8 | }
 9 | 
10 | model User {
11 |   id      String  @id @default(auto()) @map("_id") @db.ObjectId
12 |   name    String
13 |   bio     String
14 |   avatar  String?
15 |   address String  @unique
16 | }
17 | 


--------------------------------------------------------------------------------
/prisma/user.ts:
--------------------------------------------------------------------------------
 1 | import { User } from "../types";
 2 | import prisma from "./prisma";
 3 | 
 4 | export const getAllUsers = async () => {
 5 |   const users = await prisma.user.findMany({});
 6 |   return users;
 7 | };
 8 | 
 9 | export const getUser = async ({ address }: { address: string }) => {
10 |   const user: User | null = await prisma.user.findUnique({
11 |     where: {
12 |       address,
13 |     },
14 |   });
15 |   return user;
16 | };
17 | 
18 | export const createUser = async ({
19 |   name,
20 |   bio,
21 |   avatar,
22 |   address,
23 | }: {
24 |   name: string;
25 |   bio: string;
26 |   avatar: string;
27 |   address: string;
28 | }) => {
29 |   const user: User = await prisma.user.create({
30 |     data: {
31 |       name,
32 |       bio,
33 |       avatar,
34 |       address,
35 |     },
36 |   });
37 |   return user;
38 | };
39 | 
40 | export const updateUser = async (address: string, updateData: any) => {
41 |   const user: User = await prisma.user.update({
42 |     where: {
43 |       address,
44 |     },
45 |     data: {
46 |       ...updateData,
47 |     },
48 |   });
49 |   return user;
50 | };
51 | 
52 | export const deleteUser = async (address: string) => {
53 |   const user: User = await prisma.user.delete({
54 |     where: {
55 |       address,
56 |     },
57 |   });
58 |   return user;
59 | };
60 | 


--------------------------------------------------------------------------------
/public/avatar.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 36 36" fill="none" role="img" width="80" height="80"><title>Maya Angelou</title><mask id="mask__beam" maskUnits="userSpaceOnUse" x="0" y="0" width="36" height="36"><rect width="36" height="36" rx="72" fill="#FFFFFF"/></mask><g mask="url(#mask__beam)"><rect width="36" height="36" fill="#fc2f68"/><rect x="0" y="0" width="36" height="36" transform="translate(-5 9) rotate(189 18 18) scale(1)" fill="#08295e" rx="36"/><g transform="translate(-5 4.5) rotate(-9 18 18)"><path d="M13,19 a1,0.75 0 0,0 10,0" fill="#FFFFFF"/><rect x="10" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#FFFFFF"/><rect x="24" y="14" width="1.5" height="2" rx="1" stroke="none" fill="#FFFFFF"/></g></g></svg>


--------------------------------------------------------------------------------
/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/thirdweb-example/creator-platform/5e40717d1916bf33622b6da2b55db6e5bfff5055/public/favicon.ico


--------------------------------------------------------------------------------
/public/thirdweb.svg:
--------------------------------------------------------------------------------
 1 | <svg width="1126" height="700" viewBox="0 0 1126 700" fill="none" xmlns="http://www.w3.org/2000/svg">
 2 | <path fill-rule="evenodd" clip-rule="evenodd" d="M3.06915 58.8968C-8.14591 30.5859 12.7549 0 43.3414 0H233.233C251.075 0 266.878 10.6166 273.505 27.047L424.654 404.189C428.732 414.3 428.732 425.675 424.654 436.039L329.58 672.89C315.052 709.037 263.564 709.037 249.036 672.89L3.06915 58.8968ZM369.861 57.6329C359.665 29.5748 380.566 0 410.643 0H576.065C594.416 0 610.729 11.3749 616.846 28.3109L754.231 405.453C757.544 414.805 757.544 425.169 754.231 434.775L671.647 661.515C657.883 699.431 603.847 699.431 590.083 661.515L369.861 57.6329ZM741.233 0C710.646 0 689.746 30.5859 700.961 58.8968L946.927 672.89C961.456 709.037 1012.94 709.037 1027.47 672.89L1122.54 436.039C1126.62 425.675 1126.62 414.3 1122.54 404.189L971.396 27.047C964.769 10.6166 948.966 0 931.124 0H741.233Z" fill="url(#paint0_linear_215_66)"/>
 3 | <defs>
 4 | <linearGradient id="paint0_linear_215_66" x1="563.567" y1="-165.278" x2="1341.59" y2="881.403" gradientUnits="userSpaceOnUse">
 5 | <stop stop-color="#F213A4"/>
 6 | <stop offset="1" stop-color="#5204BF"/>
 7 | </linearGradient>
 8 | </defs>
 9 | </svg>
10 | 


--------------------------------------------------------------------------------
/styles/Theme.module.css:
--------------------------------------------------------------------------------
 1 | .container {
 2 |   display: flex;
 3 |   align-items: center;
 4 |   min-height: 100vh;
 5 |   background-color: #1c1e21;
 6 |   color: white;
 7 |   text-align: center;
 8 |   flex-direction: column;
 9 |   padding-top: 100px;
10 | }
11 | 
12 | .card {
13 |   cursor: pointer;
14 |   display: flex;
15 |   flex-direction: column;
16 |   align-items: center;
17 |   justify-content: center;
18 |   background-color: #2c2f33;
19 |   border-radius: 10px;
20 |   padding: 20px;
21 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
22 | }
23 | 
24 | .avatar {
25 |   width: 100px;
26 |   height: 100px;
27 |   border-radius: 50%;
28 |   object-fit: cover;
29 |   margin-bottom: 20px;
30 | }
31 | 
32 | .header {
33 |   display: flex;
34 |   position: absolute;
35 |   top: 20px;
36 |   left: 0;
37 |   height: 60px;
38 |   width: 100vw;
39 |   padding: 0 20px;
40 |   justify-content: space-between;
41 |   align-items: center;
42 | }
43 | 
44 | .header > div {
45 |   display: flex;
46 |   align-items: center;
47 |   gap: 20px;
48 |   justify-content: center;
49 | }
50 | 
51 | .headerAvatar {
52 |   width: 50px;
53 |   height: 50px;
54 |   margin-bottom: 0px;
55 | }
56 | 
57 | .users {
58 |   display: flex;
59 |   flex-wrap: wrap;
60 |   justify-content: center;
61 |   align-items: center;
62 |   gap: 20px;
63 | }
64 | 
65 | .form {
66 |   display: flex;
67 |   flex-direction: column;
68 |   align-items: center;
69 |   justify-content: center;
70 |   background-color: #2c2f33;
71 |   border-radius: 10px;
72 |   padding: 20px;
73 |   box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
74 |   gap: 20px;
75 | }
76 | 
77 | .form > button {
78 |   width: 100%;
79 | }
80 | 
81 | .userButtons {
82 |   display: flex;
83 |   gap: 20px;
84 | }
85 | 


--------------------------------------------------------------------------------
/styles/globals.css:
--------------------------------------------------------------------------------
 1 | @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap");
 2 | 
 3 | /* Box sizing rules */
 4 | *,
 5 | *::before,
 6 | *::after {
 7 |   box-sizing: border-box;
 8 | }
 9 | 
10 | /* Inherit fonts for inputs and buttons */
11 | input,
12 | button,
13 | textarea,
14 | select {
15 |   font: inherit;
16 | }
17 | 
18 | :root {
19 |   --background-color: #1c1e21;
20 |   --white: #ffffff;
21 | }
22 | 
23 | body {
24 |   background: var(--background-color);
25 |   font-family: "Inter", sans-serif;
26 |   color: var(--white);
27 |   margin: 0;
28 |   text-align: center;
29 | }
30 | 
31 | button {
32 |   cursor: pointer;
33 |   background-color: #f213a4;
34 |   color: var(--white);
35 |   border: none;
36 |   border-radius: 5px;
37 |   font-size: 1rem;
38 |   padding: 0.5rem 1rem;
39 | }
40 | 
41 | input {
42 |   background-color: #2c2f33;
43 |   color: var(--white);
44 |   border: none;
45 |   border-radius: 5px;
46 |   font-size: 1rem;
47 |   padding: 0.5rem 1rem;
48 | }
49 | 
50 | input:focus {
51 |   outline: none;
52 | }
53 | 
54 | a {
55 |   color: var(--white);
56 | }
57 | 


--------------------------------------------------------------------------------
/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": ["dom", "dom.iterable", "esnext"],
 5 |     "allowJs": true,
 6 |     "skipLibCheck": true,
 7 |     "strict": true,
 8 |     "forceConsistentCasingInFileNames": true,
 9 |     "noEmit": true,
10 |     "esModuleInterop": true,
11 |     "module": "esnext",
12 |     "moduleResolution": "node",
13 |     "resolveJsonModule": true,
14 |     "isolatedModules": true,
15 |     "jsx": "preserve",
16 |     "incremental": true
17 |   },
18 |   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
19 |   "exclude": ["node_modules"]
20 | }
21 | 


--------------------------------------------------------------------------------
/types/User.ts:
--------------------------------------------------------------------------------
 1 | interface User {
 2 |   id: any;
 3 |   name: string;
 4 |   bio: string;
 5 |   avatar: string | null;
 6 |   address: string;
 7 | }
 8 | 
 9 | export type { User };
10 | 


--------------------------------------------------------------------------------
/types/index.ts:
--------------------------------------------------------------------------------
1 | export * from "./User";
2 | 


--------------------------------------------------------------------------------