Update to create page
This commit is contained in:
Dries Augustyns
@@ -14,6 +14,7 @@ import {
|
|||||||
Input,
|
Input,
|
||||||
} from '@plunk/ui';
|
} from '@plunk/ui';
|
||||||
import {AnimatePresence, motion} from 'framer-motion';
|
import {AnimatePresence, motion} from 'framer-motion';
|
||||||
|
import {FolderPlus, UserPlus} from 'lucide-react';
|
||||||
import {NextSeo} from 'next-seo';
|
import {NextSeo} from 'next-seo';
|
||||||
import {useRouter} from 'next/router';
|
import {useRouter} from 'next/router';
|
||||||
import React, {useState} from 'react';
|
import React, {useState} from 'react';
|
||||||
@@ -53,94 +54,134 @@ export default function CreateProject() {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<NextSeo title="Create Project" />
|
<NextSeo title="Create Project" />
|
||||||
<div className={'h-screen flex items-center justify-center bg-neutral-50'}>
|
<div
|
||||||
<div className={'flex flex-col gap-6 max-w-md w-full px-4'}>
|
className={'min-h-screen flex items-center justify-center bg-gradient-to-br from-neutral-50 to-neutral-100 p-4'}
|
||||||
<Card>
|
>
|
||||||
<CardContent className="p-0">
|
<div className={'flex flex-col gap-6 max-w-2xl w-full'}>
|
||||||
<Form {...form}>
|
<div className="text-center mb-2">
|
||||||
<form
|
<h1 className="text-3xl font-bold mb-2">Welcome to Plunk</h1>
|
||||||
onSubmit={e => {
|
<p className="text-neutral-600">Choose how you'd like to get started</p>
|
||||||
e.preventDefault();
|
</div>
|
||||||
void form.handleSubmit(onSubmit)(e);
|
|
||||||
}}
|
|
||||||
className="p-6 md:p-8"
|
|
||||||
>
|
|
||||||
<div className="flex flex-col gap-6">
|
|
||||||
<div className="flex flex-col items-center text-center">
|
|
||||||
<h1 className="text-2xl font-bold">Create your first project</h1>
|
|
||||||
<p className="text-balance text-neutral-500">
|
|
||||||
Get started by creating a project to organize your emails
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
<div className="grid gap-2">
|
|
||||||
<FormField
|
|
||||||
control={form.control}
|
|
||||||
name="name"
|
|
||||||
render={({field}) => (
|
|
||||||
<FormItem>
|
|
||||||
<FormLabel>Project Name</FormLabel>
|
|
||||||
<FormControl>
|
|
||||||
<Input placeholder="My Awesome Project" {...field} />
|
|
||||||
</FormControl>
|
|
||||||
<FormDescription>
|
|
||||||
Choose a descriptive name for your project. You can always change it later.
|
|
||||||
</FormDescription>
|
|
||||||
<FormMessage />
|
|
||||||
</FormItem>
|
|
||||||
)}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<AnimatePresence>
|
<div className="grid md:grid-cols-2 gap-6">
|
||||||
{errorMessage && (
|
<Card className="border-2 hover:border-neutral-300 transition-colors">
|
||||||
<motion.p
|
<CardContent className="p-0">
|
||||||
initial={{opacity: 0, y: -10}}
|
<Form {...form}>
|
||||||
animate={{opacity: 1, y: 0}}
|
<form
|
||||||
exit={{opacity: 0, y: -10}}
|
onSubmit={e => {
|
||||||
className="text-sm font-medium text-red-500"
|
e.preventDefault();
|
||||||
>
|
void form.handleSubmit(onSubmit)(e);
|
||||||
{errorMessage}
|
}}
|
||||||
</motion.p>
|
className="p-6 md:p-8"
|
||||||
)}
|
>
|
||||||
</AnimatePresence>
|
<div className="flex flex-col gap-6">
|
||||||
|
<div className="flex flex-col items-center text-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-neutral-900 text-white flex items-center justify-center">
|
||||||
|
<FolderPlus className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold mb-1">Create a new project</h2>
|
||||||
|
<p className="text-sm text-neutral-500">Start from scratch and set up your own project.</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
<motion.div layout>
|
<div className="grid gap-2">
|
||||||
<Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
|
<FormField
|
||||||
{form.formState.isSubmitting ? (
|
control={form.control}
|
||||||
<>
|
name="name"
|
||||||
<svg
|
render={({field}) => (
|
||||||
className="h-4 w-4 animate-spin"
|
<FormItem>
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
<FormLabel>Project Name</FormLabel>
|
||||||
fill="none"
|
<FormControl>
|
||||||
viewBox="0 0 24 24"
|
<Input placeholder="My Awesome Project" {...field} />
|
||||||
|
</FormControl>
|
||||||
|
<FormDescription>You can change this later</FormDescription>
|
||||||
|
<FormMessage />
|
||||||
|
</FormItem>
|
||||||
|
)}
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<AnimatePresence>
|
||||||
|
{errorMessage && (
|
||||||
|
<motion.p
|
||||||
|
initial={{opacity: 0, y: -10}}
|
||||||
|
animate={{opacity: 1, y: 0}}
|
||||||
|
exit={{opacity: 0, y: -10}}
|
||||||
|
className="text-sm font-medium text-red-500"
|
||||||
>
|
>
|
||||||
<circle
|
{errorMessage}
|
||||||
className="opacity-25"
|
</motion.p>
|
||||||
cx="12"
|
)}
|
||||||
cy="12"
|
</AnimatePresence>
|
||||||
r="10"
|
|
||||||
stroke="currentColor"
|
<motion.div layout>
|
||||||
strokeWidth="4"
|
<Button type="submit" className="w-full" disabled={form.formState.isSubmitting}>
|
||||||
/>
|
{form.formState.isSubmitting ? (
|
||||||
<path
|
<>
|
||||||
className="opacity-75"
|
<svg
|
||||||
fill="currentColor"
|
className="h-4 w-4 animate-spin"
|
||||||
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
/>
|
fill="none"
|
||||||
</svg>
|
viewBox="0 0 24 24"
|
||||||
</>
|
>
|
||||||
) : (
|
<circle
|
||||||
'Create Project'
|
className="opacity-25"
|
||||||
)}
|
cx="12"
|
||||||
</Button>
|
cy="12"
|
||||||
</motion.div>
|
r="10"
|
||||||
|
stroke="currentColor"
|
||||||
|
strokeWidth="4"
|
||||||
|
/>
|
||||||
|
<path
|
||||||
|
className="opacity-75"
|
||||||
|
fill="currentColor"
|
||||||
|
d="M4 12a8 8 0 018-8V0C5.373 0 0 5.373 0 12h4zm2 5.291A7.962 7.962 0 014 12H0c0 3.042 1.135 5.824 3 7.938l3-2.647z"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
Creating...
|
||||||
|
</>
|
||||||
|
) : (
|
||||||
|
<>
|
||||||
|
<FolderPlus className="w-4 h-4 mr-2" />
|
||||||
|
Create Project
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</Button>
|
||||||
|
</motion.div>
|
||||||
|
</div>
|
||||||
|
</form>
|
||||||
|
</Form>
|
||||||
|
</CardContent>
|
||||||
|
</Card>
|
||||||
|
|
||||||
|
<Card className="border-2 hover:border-neutral-300 transition-colors">
|
||||||
|
<CardContent className="p-6 md:p-8 h-full">
|
||||||
|
<div className="flex flex-col gap-6 h-full">
|
||||||
|
<div className="flex flex-col items-center text-center gap-3">
|
||||||
|
<div className="w-12 h-12 rounded-full bg-neutral-100 text-neutral-900 flex items-center justify-center">
|
||||||
|
<UserPlus className="w-6 h-6" />
|
||||||
|
</div>
|
||||||
|
<div>
|
||||||
|
<h2 className="text-xl font-bold mb-1">Join an existing project</h2>
|
||||||
|
<p className="text-sm text-neutral-500">Get access to a project created by your team</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<div className="flex-1 flex flex-col justify-center">
|
||||||
|
<div className="bg-neutral-50 rounded-lg p-6 border border-neutral-200">
|
||||||
|
<p className="text-sm text-neutral-600 text-center leading-relaxed">
|
||||||
|
Contact your project administrator and ask them to add you as a member. They can invite you from
|
||||||
|
the project settings page.
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</form>
|
</CardContent>
|
||||||
</Form>
|
</Card>
|
||||||
</CardContent>
|
</div>
|
||||||
</Card>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</>
|
</>
|
||||||
);
|
);
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user