Stevan/conve-x
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: provide custom title for each page. feat: add global error. feat: add favicon image.

Browse Source
This commit is contained in:
Stevan Freeborn
2023-09-16 12:39:06 -05:00
parent 81c6d69a5e
commit 5b40a37043
22 changed files with 400 additions and 257 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/app/account/[[...account]]/page.tsx
+6 -14
View File
@@ -1,22 +1,14 @@
'use client'; import AccountForm from '@/components/AccountForm';
import { Metadata } from 'next';
import { UserProfile } from '@clerk/nextjs'; export const metadata: Metadata = {
title: 'conveX | Account',
};
export default function AccountPage() { export default function AccountPage() {
return ( return (
<main className="flex flex-col items-center"> <main className="flex flex-col items-center">
<UserProfile <AccountForm />
appearance={{
elements: {
card: 'sm:pb-4 shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
navbar: 'hidden',
navbarMobileMenuRow: 'hidden',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
profileSectionTitle: 'dark:border-white dark:border-opacity-10',
breadcrumbsItem: 'dark:text-white',
},
}}
/>
</main> </main>
); );
} }
src/app/error.tsx
+1
View File
@@ -1,4 +1,5 @@
'use client'; 'use client';
export default function Error({ export default function Error({
error, error,
reset, reset,
src/app/favicon.ico
BIN
View File
Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 15 KiB

src/app/following/page.tsx
+5
View File
@@ -1,4 +1,9 @@
import FollowingPosts from '@/components/FollowingPosts'; import FollowingPosts from '@/components/FollowingPosts';
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'conveX | Following',
};
export default function FollowingPage() { export default function FollowingPage() {
return ( return (
src/app/global-error.tsx
+35
View File
@@ -0,0 +1,35 @@
'use client';
import { Inter } from 'next/font/google';
const inter = Inter({ subsets: ['latin'] });
export default function GlobalError({
error,
reset,
}: {
error: Error;
reset: () => void;
}) {
return (
<html lang="en" className="w-full h-full">
<body
className={`w-full h-full flex flex-col bg-white text-primary-gray dark:bg-primary-gray dark:text-white ${inter.className}`}
>
<main className="flex flex-col justify-center items-center flex-1">
<div className="flex flex-col items-center w-full max-w-4xl gap-4">
<h2 className="text-2xl">
Oops it looks like we&apos;ve run into an issue.
</h2>
<button
className="px-3 py-1 text-white bg-primary-accent rounded-md"
onClick={() => reset()}
>
Try again
</button>
</div>
</main>
</body>
</html>
);
}
src/app/layout.tsx
+2 -1
View File
@@ -10,7 +10,8 @@ import './globals.css';
const inter = Inter({ subsets: ['latin'] }); const inter = Inter({ subsets: ['latin'] });
export const metadata: Metadata = { export const metadata: Metadata = {
title: 'conveX', description:
'An X inspired social site that supports liking, following, and posting short and long form content',
}; };
export default function RootLayout({ export default function RootLayout({
src/app/login/[[...login]]/page.tsx
+6 -17
View File
@@ -1,25 +1,14 @@
'use client'; import LoginForm from '@/components/LoginForm';
import { Metadata } from 'next';
import { SignIn } from '@clerk/nextjs'; export const metadata: Metadata = {
title: 'conveX | Login',
};
export default function LoginPage() { export default function LoginPage() {
return ( return (
<main className="flex flex-col flex-1 items-center"> <main className="flex flex-col flex-1 items-center">
<SignIn <LoginForm />
appearance={{
elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google:
'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__microsoft:
'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
dividerLine: 'dark:bg-white dark:bg-opacity-10',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
},
}}
/>
</main> </main>
); );
} }
src/app/page.tsx
+5 -1
View File
@@ -1,7 +1,11 @@
import AllPosts from '@/components/AllPosts'; import AllPosts from '@/components/AllPosts';
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'conveX | Home',
};
export default function Home() { export default function Home() {
throw Error();
return ( return (
<main className="flex flex-col items-center flex-1"> <main className="flex flex-col items-center flex-1">
<div className="flex flex-col w-full max-w-4xl gap-4"> <div className="flex flex-col w-full max-w-4xl gap-4">
src/app/posts/[id]/edit/page.tsx
+6 -61
View File
@@ -1,69 +1,14 @@
'use client'; import EditPostForm from '@/components/EditPostForm';
import { Metadata } from 'next';
import Editor, { SubmitActionParams } from '@/components/Editor'; export const metadata: Metadata = {
import SpinningLoader from '@/components/SpinningLoader'; title: 'conveX | Edit post',
import { useRouter } from '@/hooks'; };
import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react';
import { api } from '../../../../../convex/_generated/api';
import { Id } from '../../../../../convex/_generated/dataModel';
export default function EditPostPage({ params }: { params: { id: string } }) { export default function EditPostPage({ params }: { params: { id: string } }) {
const user = useUser();
const post = useQuery(api.posts.getPostById, {
id: params.id as Id<'posts'>,
});
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const router = useRouter();
if (user.isSignedIn === false) {
router.push('/login');
return;
}
if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component
return <h1>Not Found</h1>;
}
async function submitAction({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) {
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: clerkUserId,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to update post');
default:
router.push(`/posts/${post?._id}`);
return;
}
}
return ( return (
<main className="flex flex-col flex-1 w-full items-center"> <main className="flex flex-col flex-1 w-full items-center">
{user.isLoaded && post !== undefined ? ( <EditPostForm postId={params.id} />
<Editor
clerkUserId={user.user.id}
post={post}
submitAction={submitAction}
/>
) : (
<div className="flex gap-2 items-center">
<SpinningLoader className="animate-spin w-5 h-5" />
Loading...
</div>
)}
</main> </main>
); );
} }
src/app/posts/[id]/page.tsx
+8 -92
View File
@@ -1,16 +1,9 @@
'use client'; import DisplayPost from '@/components/DisplayPost';
import { Metadata } from 'next';
import Editor, { SubmitActionParams } from '@/components/Editor'; export const metadata: Metadata = {
import Post from '@/components/Post'; title: 'conveX | Post',
import PostReplies from '@/components/PostReplies'; };
import SpinningLoader from '@/components/SpinningLoader';
import { useRouter } from '@/hooks';
import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react';
import Image from 'next/image';
import { useEffect, useRef } from 'react';
import { api } from '../../../../convex/_generated/api';
import { Id } from '../../../../convex/_generated/dataModel';
export default function PostPage({ export default function PostPage({
params, params,
@@ -19,91 +12,14 @@ export default function PostPage({
params: { id: string }; params: { id: string };
searchParams: { [key: string]: string | string[] | undefined }; searchParams: { [key: string]: string | string[] | undefined };
}) { }) {
const replyRef = useRef<HTMLDivElement>(null);
const user = useUser();
const router = useRouter();
const post = useQuery(api.posts.getPostById, {
id: params.id as Id<'posts'>,
});
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const isReply = searchParams.reply === 'true';
useEffect(() => {
if (replyRef.current !== null && isReply) {
replyRef.current.scrollIntoView();
}
}, [isReply, user]);
async function submitAction({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) {
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: clerkUserId,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to create post');
default:
return;
}
}
if (user.isSignedIn === false) {
router.push('/login');
return;
}
if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component
return <h1>Not Found</h1>;
}
return ( return (
<main className="flex flex-col flex-1 w-full items-center"> <main className="flex flex-col flex-1 w-full items-center">
<div className="flex flex-col w-full max-w-4xl gap-4"> <div className="flex flex-col w-full max-w-4xl gap-4">
{post !== undefined && user.isLoaded ? ( <DisplayPost
<> postId={params.id}
<div className="flex flex-col min-w-0 p-1 rounded-md border border-gray-600"> isReply={searchParams.reply === 'true'}
<Post post={post} limit={false} showReply={false} />
</div>
<div className="w-full">
<PostReplies parentId={post._id} />
</div>
<div className="flex w-full h-80 gap-4">
<div>
<Image
alt="user profile image"
src={user.user.imageUrl}
width={40}
height={40}
className="rounded-full object-cover border-4 border-primary-accent"
/> />
</div> </div>
<div ref={replyRef} className="flex w-full">
<Editor
clerkUserId={user.user.id}
parentPostId={post._id}
submitAction={submitAction}
autofocus={isReply}
/>
</div>
</div>
</>
) : (
<div className="flex w-full justify-center gap-2">
<SpinningLoader className="animate-spin w-5 h-5" /> Loading post...
</div>
)}
</div>
</main> </main>
); );
} }
src/app/posts/add/page.tsx
+6 -49
View File
@@ -1,57 +1,14 @@
'use client'; import AddPostForm from '@/components/AddPostForm';
import { Metadata } from 'next';
import Editor, { SubmitActionParams } from '@/components/Editor'; export const metadata: Metadata = {
import SpinningLoader from '@/components/SpinningLoader'; title: 'conveX | Add post',
import { useRouter } from '@/hooks'; };
import { useUser } from '@clerk/nextjs';
import { useMutation } from 'convex/react';
import { api } from '../../../../convex/_generated/api';
export default function AddPost() { export default function AddPost() {
const user = useUser();
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const router = useRouter();
async function submitAction({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) {
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: clerkUserId,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to create post');
default:
'use server';
router.push('/');
return;
}
}
if (user.isSignedIn === false) {
router.push('/login');
return;
}
return ( return (
<main className="flex flex-col flex-1 w-full items-center"> <main className="flex flex-col flex-1 w-full items-center">
{user.isLoaded ? ( <AddPostForm />
<Editor clerkUserId={user.user.id} submitAction={submitAction} />
) : (
<div className="flex gap-2 items-center">
<SpinningLoader className="animate-spin w-5 h-5" />
Loading...
</div>
)}
</main> </main>
); );
} }
src/app/profile/[id]/page.tsx
+5
View File
@@ -1,8 +1,13 @@
import UserPosts from '@/components/UserPosts'; import UserPosts from '@/components/UserPosts';
import UserProfile from '@/components/UserProfile'; import UserProfile from '@/components/UserProfile';
import { getConvexClient } from '@/lib/convex'; import { getConvexClient } from '@/lib/convex';
import { Metadata } from 'next';
import { api } from '../../../../convex/_generated/api'; import { api } from '../../../../convex/_generated/api';
export const metadata: Metadata = {
title: 'conveX | Profile',
};
export default async function UserProfilePage({ export default async function UserProfilePage({
params, params,
}: { }: {
src/app/search/page.tsx
+5
View File
@@ -1,4 +1,9 @@
import SearchResults from '@/components/SearchResults'; import SearchResults from '@/components/SearchResults';
import { Metadata } from 'next';
export const metadata: Metadata = {
title: 'conveX | Search',
};
export default function SearchPage({ export default function SearchPage({
searchParams, searchParams,
src/app/signup/[[...signup]]/page.tsx
+6 -17
View File
@@ -1,25 +1,14 @@
'use client'; import SignUpForm from '@/components/SignUpForm';
import { Metadata } from 'next';
import { SignUp } from '@clerk/nextjs'; export const metadata: Metadata = {
title: 'conveX | Sign up',
};
export default function SignUpPage() { export default function SignUpPage() {
return ( return (
<main className="flex flex-col flex-1 items-center"> <main className="flex flex-col flex-1 items-center">
<SignUp <SignUpForm />
appearance={{
elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google:
'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__microsoft:
'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
dividerLine: 'dark:bg-white dark:bg-opacity-10',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
},
}}
/>
</main> </main>
); );
} }
src/app/types/index.ts
+3 -1
View File
@@ -8,6 +8,8 @@ export type UserDto = {
clerkUserId: string; clerkUserId: string;
}; };
export type PostWithUserDto = Omit<Doc<'posts'>, 'contentText'> & { export type PostDto = Omit<Doc<'posts'>, 'contentText'>;
export type PostWithUserDto = PostDto & {
user: UserDto; user: UserDto;
}; };
src/components/AccountForm.tsx
+20
View File
@@ -0,0 +1,20 @@
'use client';
import { UserProfile } from '@clerk/nextjs';
export default function AccountForm() {
return (
<UserProfile
appearance={{
elements: {
card: 'sm:pb-4 shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
navbar: 'hidden',
navbarMobileMenuRow: 'hidden',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
profileSectionTitle: 'dark:border-white dark:border-opacity-10',
breadcrumbsItem: 'dark:text-white',
},
}}
/>
);
}
src/components/AddPostForm.tsx
+55
View File
@@ -0,0 +1,55 @@
'use client';
import { useUser } from '@clerk/nextjs';
import { useMutation } from 'convex/react';
import { useRouter } from '@/hooks';
import { api } from '../../convex/_generated/api';
import Editor, { SubmitActionParams } from './Editor';
import SpinningLoader from './SpinningLoader';
export default function AddPostForm() {
const user = useUser();
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const router = useRouter();
async function submitAction({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) {
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: clerkUserId,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to create post');
default:
'use server';
router.push('/');
return;
}
}
if (user.isSignedIn === false) {
router.push('/login');
return;
}
if (user.isLoaded) {
return <Editor clerkUserId={user.user.id} submitAction={submitAction} />;
}
return (
<div className="flex gap-2 items-center">
<SpinningLoader className="animate-spin w-5 h-5" />
Loading...
</div>
);
}
src/components/DisplayPost.tsx
+106
View File
@@ -0,0 +1,106 @@
'use client';
import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react';
import Image from 'next/image';
import { useRouter } from '@/hooks';
import { useEffect, useRef } from 'react';
import { api } from '../../convex/_generated/api';
import { Id } from '../../convex/_generated/dataModel';
import Editor, { SubmitActionParams } from './Editor';
import Post from './Post';
import PostReplies from './PostReplies';
import SpinningLoader from './SpinningLoader';
export default function DisplayPost({
postId,
isReply,
}: {
postId: string;
isReply: boolean;
}) {
const replyRef = useRef<HTMLDivElement>(null);
const user = useUser();
const router = useRouter();
const post = useQuery(api.posts.getPostById, {
id: postId as Id<'posts'>,
});
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
useEffect(() => {
if (replyRef.current !== null && isReply) {
replyRef.current.scrollIntoView();
}
}, [isReply, user]);
async function submitAction({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) {
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: clerkUserId,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to create post');
default:
return;
}
}
if (user.isSignedIn === false) {
router.push('/login');
return;
}
if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component
return <h1>Not Found</h1>;
}
if (post !== undefined && user.isLoaded) {
return (
<>
<div className="flex flex-col min-w-0 p-1 rounded-md border border-gray-600">
<Post post={post} limit={false} showReply={false} />
</div>
<div className="w-full">
<PostReplies parentId={post._id} />
</div>
<div className="flex w-full h-80 gap-4">
<div>
<Image
alt="user profile image"
src={user.user.imageUrl}
width={40}
height={40}
className="rounded-full object-cover border-4 border-primary-accent"
/>
</div>
<div ref={replyRef} className="flex w-full">
<Editor
clerkUserId={user.user.id}
parentPostId={post._id}
submitAction={submitAction}
autofocus={isReply}
/>
</div>
</div>
</>
);
}
return (
<div className="flex w-full justify-center gap-2">
<SpinningLoader className="animate-spin w-5 h-5" /> Loading post...
</div>
);
}
src/components/EditPostForm.tsx
+69
View File
@@ -0,0 +1,69 @@
'use client';
import { useRouter } from '@/hooks';
import { useUser } from '@clerk/nextjs';
import { useMutation, useQuery } from 'convex/react';
import { api } from '../../convex/_generated/api';
import { Id } from '../../convex/_generated/dataModel';
import Editor, { SubmitActionParams } from './Editor';
import SpinningLoader from './SpinningLoader';
export default function EditPostForm({ postId }: { postId: string }) {
const user = useUser();
const post = useQuery(api.posts.getPostById, {
id: postId as Id<'posts'>,
});
const createOrUpdatePost = useMutation(api.posts.createOrUpdatePost);
const router = useRouter();
if (user.isSignedIn === false) {
router.push('/login');
return;
}
if (post === 'POST_NOT_FOUND' || post === 'USER_FOR_POST_NOT_FOUND') {
// TODO: Return actual not found component
return <h1>Not Found</h1>;
}
async function submitAction({
clerkUserId,
parentPostId,
post,
currentDoc,
}: SubmitActionParams) {
const result = await createOrUpdatePost({
parentPostId: parentPostId,
id: post?._id,
clerkUserId: clerkUserId,
content: currentDoc,
});
switch (result) {
case 'USER_NOT_FOUND':
case 'USER_NOT_AUTHORIZED':
case 'CANNOT_POST_ON_BEHALF_OF_ANOTHER_USER':
throw Error('Unable to update post');
default:
router.push(`/posts/${post?._id}`);
return;
}
}
if (user.isLoaded && post !== undefined) {
return (
<Editor
clerkUserId={user.user.id}
post={post}
submitAction={submitAction}
/>
);
}
return (
<div className="flex gap-2 items-center">
<SpinningLoader className="animate-spin w-5 h-5" />
Loading...
</div>
);
}
src/components/Editor.tsx
+4 -3
View File
@@ -1,5 +1,6 @@
'use client'; 'use client';
import { PostDto } from '@/app/types';
import { useCodeMirror, useRouter } from '@/hooks'; import { useCodeMirror, useRouter } from '@/hooks';
import { basicDark } from '@/lib/codemirror'; import { basicDark } from '@/lib/codemirror';
import { indentWithTab } from '@codemirror/commands'; import { indentWithTab } from '@codemirror/commands';
@@ -9,13 +10,13 @@ import { Compartment, EditorState, Text } from '@codemirror/state';
import { EditorView, keymap } from '@codemirror/view'; import { EditorView, keymap } from '@codemirror/view';
import { basicSetup } from 'codemirror'; import { basicSetup } from 'codemirror';
import { FormEvent, useEffect, useState } from 'react'; import { FormEvent, useEffect, useState } from 'react';
import { Doc, Id } from '../../convex/_generated/dataModel'; import { Id } from '../../convex/_generated/dataModel';
import PostContent from './PostContent'; import PostContent from './PostContent';
export type SubmitActionParams = { export type SubmitActionParams = {
clerkUserId: string; clerkUserId: string;
parentPostId?: Id<'posts'>; parentPostId?: Id<'posts'>;
post?: Doc<'posts'>; post?: PostDto;
currentDoc: string[]; currentDoc: string[];
}; };
@@ -28,7 +29,7 @@ export default function Editor({
}: { }: {
clerkUserId: string; clerkUserId: string;
parentPostId?: Id<'posts'>; parentPostId?: Id<'posts'>;
post?: Doc<'posts'>; post?: PostDto;
submitAction: ({ submitAction: ({
clerkUserId, clerkUserId,
parentPostId, parentPostId,
src/components/LoginForm.tsx
+23
View File
@@ -0,0 +1,23 @@
'use client';
import { SignIn } from '@clerk/nextjs';
export default function LoginForm() {
return (
<SignIn
appearance={{
elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google:
'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__microsoft:
'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
dividerLine: 'dark:bg-white dark:bg-opacity-10',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
},
}}
/>
);
}
src/components/SignUpForm.tsx
+23
View File
@@ -0,0 +1,23 @@
'use client';
import { SignUp } from '@clerk/nextjs';
export default function SignUpForm() {
return (
<SignUp
appearance={{
elements: {
card: 'shadow-md dark:bg-secondary-gray [&_*:not(button):not(a):not(svg)]:dark:text-white [&_.cl-internal-b3fm6y]:hidden',
socialButtonsIconButton__github:
'hover:bg-gradient-to-br from-blue-600 via-purple-600 to-red-600 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__google:
'hover:bg-gradient-to-r from-blue-500 via-green-500 to-yellow-500 dark:border-white dark:border-opacity-10',
socialButtonsIconButton__microsoft:
'hover:bg-gradient-to-r from-red-600 via-green-600 to-blue-600 dark:border-white dark:border-opacity-10',
dividerLine: 'dark:bg-white dark:bg-opacity-10',
formFieldInput: 'dark:bg-primary-gray dark:text-white',
},
}}
/>
);
}