Skip to content

Commit

Permalink
add home page ui
Browse files Browse the repository at this point in the history
  • Loading branch information
rajdeep-ghosh committed May 13, 2024
1 parent b4108fa commit 5c18e8d
Show file tree
Hide file tree
Showing 5 changed files with 130 additions and 111 deletions.
1 change: 1 addition & 0 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,7 @@
"**/*": "prettier --write --ignore-unknown"
},
"dependencies": {
"@radix-ui/react-slot": "^1.0.2",
"lucide-react": "^0.378.0",
"next": "^14.1.2",
"react": "^18",
Expand Down
44 changes: 38 additions & 6 deletions pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

10 changes: 10 additions & 0 deletions src/app/api/upload/route.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,10 @@
import { type NextRequest, NextResponse } from 'next/server';

export async function POST(req: NextRequest) {
const formData = await req.formData();

const file = formData.get('file');
console.log(file);

return NextResponse.json({ file });
}
130 changes: 25 additions & 105 deletions src/app/page.tsx
Original file line number Diff line number Diff line change
@@ -1,112 +1,32 @@
import Image from 'next/image';
import { Upload } from 'lucide-react';
import { Button } from '@/components/ui/button';

export default function HomePage() {
return (
<main className='flex min-h-screen flex-col items-center justify-between p-24'>
<div className='z-10 w-full max-w-5xl items-center justify-between font-mono text-sm lg:flex'>
<p className='fixed left-0 top-0 flex w-full justify-center border-b border-gray-300 bg-gradient-to-b from-zinc-200 pb-6 pt-8 backdrop-blur-2xl lg:static lg:w-auto lg:rounded-xl lg:border lg:bg-gray-200 lg:p-4 dark:border-neutral-800 dark:bg-zinc-800/30 dark:from-inherit lg:dark:bg-zinc-800/30'>
Get started by editing&nbsp;
<code className='font-mono font-bold'>src/app/page.tsx</code>
</p>
<div className='fixed bottom-0 left-0 flex h-48 w-full items-end justify-center bg-gradient-to-t from-white via-white lg:static lg:h-auto lg:w-auto lg:bg-none dark:from-black dark:via-black'>
<a
className='pointer-events-none flex place-items-center gap-2 p-8 lg:pointer-events-auto lg:p-0'
href='https://vercel.com?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
target='_blank'
rel='noopener noreferrer'
>
By{' '}
<Image
src='/vercel.svg'
alt='Vercel Logo'
className='dark:invert'
width={100}
height={24}
priority
/>
</a>
</div>
</div>

<div className="relative flex place-items-center before:absolute before:h-[300px] before:w-[480px] before:-translate-x-1/2 before:rounded-full before:bg-[radial-gradient(var(--tw-gradient-stops))] before:from-white before:to-transparent before:blur-2xl before:content-[''] after:absolute after:-z-20 after:h-[180px] after:w-[240px] after:translate-x-1/3 after:bg-[conic-gradient(from_180deg_at_50%_50%,_var(--tw-gradient-stops))] after:from-sky-200 after:via-blue-200 after:blur-2xl after:content-[''] before:lg:h-[360px] before:dark:bg-gradient-to-br before:dark:from-transparent before:dark:to-blue-700 before:dark:opacity-10 after:dark:from-sky-900 after:dark:via-[#0141ff] after:dark:opacity-40">
<Image
className='relative dark:drop-shadow-[0_0_0.3rem_#ffffff70] dark:invert'
src='/next.svg'
alt='Next.js Logo'
width={180}
height={37}
priority
/>
</div>

<div className='mb-32 grid text-center lg:mb-0 lg:grid-cols-4 lg:text-left'>
<a
href='https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className='mb-3 text-2xl font-semibold'>
Docs{' '}
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Find in-depth information about Next.js features and API.
</p>
</a>

<a
href='https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800 hover:dark:bg-opacity-30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className='mb-3 text-2xl font-semibold'>
Learn{' '}
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Learn about Next.js in an interactive course with&nbsp;quizzes!
<main className='py-20'>
<div className='mx-auto grid max-w-3xl gap-8 px-4 sm:px-6 lg:px-8'>
<div className='space-y-4 text-center'>
<h1 className='text-4xl font-bold tracking-tight sm:text-5xl'>
Simple, Secure File Storage
</h1>
<p className='text-lg text-gray-300'>
DropGo makes it easy to store files temporarily. Your uploaded files
will be automatically deleted after 24 hours.
</p>
</a>

<a
href='https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className='mb-3 text-2xl font-semibold'>
Templates{' '}
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Explore the Next.js 13 playground.
</p>
</a>

<a
href='https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template&utm_campaign=create-next-app'
className='group rounded-lg border border-transparent px-5 py-4 transition-colors hover:border-gray-300 hover:bg-gray-100 hover:dark:border-neutral-700 hover:dark:bg-neutral-800/30'
target='_blank'
rel='noopener noreferrer'
>
<h2 className='mb-3 text-2xl font-semibold'>
Deploy{' '}
<span className='inline-block transition-transform group-hover:translate-x-1 motion-reduce:transform-none'>
-&gt;
</span>
</h2>
<p className='m-0 max-w-[30ch] text-sm opacity-50'>
Instantly deploy your Next.js site to a shareable URL with Vercel.
</p>
</a>
</div>
<div className='rounded-lg border border-gray-700 bg-gray-800 p-8 shadow-lg'>
<div className='flex h-48 items-center justify-center rounded-md border-2 border-dashed border-gray-500 bg-gray-700 text-gray-400'>
<div className='space-y-2 text-center'>
<Upload className='mx-auto size-10' />
<p>Drag and drop files or click to select</p>
</div>
</div>
<div className='mt-4 flex justify-end'>
<Button variant='secondary' className='w-full sm:w-auto'>
Upload Files
</Button>
</div>
</div>
</div>
</main>
);
Expand Down
56 changes: 56 additions & 0 deletions src/components/ui/button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,56 @@
import * as React from 'react';
import { Slot } from '@radix-ui/react-slot';
import { cva, type VariantProps } from 'class-variance-authority';

import { cn } from '@/lib/utils';

const buttonVariants = cva(
'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
{
variants: {
variant: {
default: 'bg-primary text-primary-foreground hover:bg-primary/90',
destructive:
'bg-destructive text-destructive-foreground hover:bg-destructive/90',
outline:
'border border-input bg-background hover:bg-accent hover:text-accent-foreground',
secondary:
'bg-secondary text-secondary-foreground hover:bg-secondary/80',
ghost: 'hover:bg-accent hover:text-accent-foreground',
link: 'text-primary underline-offset-4 hover:underline'
},
size: {
default: 'h-10 px-4 py-2',
sm: 'h-9 rounded-md px-3',
lg: 'h-11 rounded-md px-8',
icon: 'h-10 w-10'
}
},
defaultVariants: {
variant: 'default',
size: 'default'
}
}
);

export interface ButtonProps
extends React.ButtonHTMLAttributes<HTMLButtonElement>,
VariantProps<typeof buttonVariants> {
asChild?: boolean;
}

const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
({ className, variant, size, asChild = false, ...props }, ref) => {
const Comp = asChild ? Slot : 'button';
return (
<Comp
className={cn(buttonVariants({ variant, size, className }))}
ref={ref}
{...props}
/>
);
}
);
Button.displayName = 'Button';

export { Button, buttonVariants };

0 comments on commit 5c18e8d

Please sign in to comment.