ui test
This commit is contained in:
@@ -1,21 +1,13 @@
|
|||||||
import type { Metadata } from "next";
|
import type { Metadata } from "next";
|
||||||
import { Geist, Geist_Mono } from "next/font/google";
|
import { Inter } from "next/font/google";
|
||||||
import "./globals.css";
|
import "./globals.css";
|
||||||
|
|
||||||
const geistSans = Geist({
|
const inter = Inter({ subsets: ['latin'], variable: "--font-inter" })
|
||||||
variable: "--font-geist-sans",
|
|
||||||
subsets: ["latin"],
|
|
||||||
});
|
|
||||||
|
|
||||||
const geistMono = Geist_Mono({
|
export const metadata = {
|
||||||
variable: "--font-geist-mono",
|
title: 'iCal PWA',
|
||||||
subsets: ["latin"],
|
description: 'Minimal PWA for calendar events',
|
||||||
});
|
}
|
||||||
|
|
||||||
export const metadata: Metadata = {
|
|
||||||
title: "Create Next App",
|
|
||||||
description: "Generated by create next app",
|
|
||||||
};
|
|
||||||
|
|
||||||
export default function RootLayout({
|
export default function RootLayout({
|
||||||
children,
|
children,
|
||||||
@@ -25,9 +17,12 @@ export default function RootLayout({
|
|||||||
return (
|
return (
|
||||||
<html lang="en">
|
<html lang="en">
|
||||||
<body
|
<body
|
||||||
className={`${geistSans.variable} ${geistMono.variable} antialiased`}
|
className={`${inter.variable} antialiased min-h-screen flex flex-col bg-gray-50 text-gray-900`}
|
||||||
>
|
>
|
||||||
{children}
|
<header className="bg-blue-600 text-white px-4 py-3 font-bold shadow">
|
||||||
|
iCal PWA
|
||||||
|
</header>
|
||||||
|
<main className="flex-1 p-4">{children}</main>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
);
|
);
|
||||||
|
|||||||
153
src/app/page.tsx
153
src/app/page.tsx
@@ -1,105 +1,54 @@
|
|||||||
import Image from "next/image";
|
'use client'
|
||||||
|
|
||||||
|
import { useState } from 'react'
|
||||||
import { Button } from '@/components/ui/button'
|
import { Button } from '@/components/ui/button'
|
||||||
|
import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog'
|
||||||
|
import { Input } from '@/components/ui/input'
|
||||||
|
import { nanoid } from 'nanoid'
|
||||||
|
|
||||||
export default function Home() {
|
type Event = {
|
||||||
return (
|
id: string
|
||||||
<div className="font-sans grid grid-rows-[20px_1fr_20px] items-center justify-items-center min-h-screen p-8 pb-20 gap-16 sm:p-20">
|
title: string
|
||||||
<main className="flex flex-col gap-[32px] row-start-2 items-center sm:items-start">
|
start: string
|
||||||
<Image
|
end?: string
|
||||||
className="dark:invert"
|
}
|
||||||
src="/next.svg"
|
|
||||||
alt="Next.js logo"
|
export default function HomePage() {
|
||||||
width={180}
|
const [events, setEvents] = useState<Event[]>([])
|
||||||
height={38}
|
const [open, setOpen] = useState(false)
|
||||||
priority
|
const [title, setTitle] = useState('')
|
||||||
/>
|
const [start, setStart] = useState('')
|
||||||
<ol className="font-mono list-inside list-decimal text-sm/6 text-center sm:text-left">
|
|
||||||
<li className="mb-2 tracking-[-.01em]">
|
const addEvent = () => {
|
||||||
Get started by editing{" "}
|
setEvents([...events, { id: nanoid(), title, start }])
|
||||||
<code className="bg-black/[.05] dark:bg-white/[.06] font-mono font-semibold px-1 py-0.5 rounded">
|
setTitle('')
|
||||||
src/app/page.tsx
|
setStart('')
|
||||||
</code>
|
setOpen(false)
|
||||||
.
|
}
|
||||||
</li>
|
|
||||||
<li className="tracking-[-.01em]">
|
return (
|
||||||
Save and see your changes instantly.
|
<div>
|
||||||
</li>
|
<Button onClick={() => setOpen(true)}>Add Event</Button>
|
||||||
</ol>
|
<ul className="mt-4 space-y-2">
|
||||||
|
{events.map(ev => (
|
||||||
<div className="flex gap-4 items-center flex-col sm:flex-row">
|
<li key={ev.id} className="border p-2 rounded bg-white shadow-sm">
|
||||||
<a
|
<strong>{ev.title}</strong> — {ev.start}
|
||||||
className="rounded-full border border-solid border-transparent transition-colors flex items-center justify-center bg-foreground text-background gap-2 hover:bg-[#383838] dark:hover:bg-[#ccc] font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 sm:w-auto"
|
</li>
|
||||||
href="https://vercel.com/new?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
))}
|
||||||
target="_blank"
|
</ul>
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
<Dialog open={open} onOpenChange={setOpen}>
|
||||||
<Image
|
<DialogContent>
|
||||||
className="dark:invert"
|
<DialogHeader>
|
||||||
src="/vercel.svg"
|
<DialogTitle>Add Event</DialogTitle>
|
||||||
alt="Vercel logomark"
|
</DialogHeader>
|
||||||
width={20}
|
<Input placeholder="Title" value={title} onChange={e => setTitle(e.target.value)} />
|
||||||
height={20}
|
<Input type="date" value={start} onChange={e => setStart(e.target.value)} />
|
||||||
/>
|
<DialogFooter>
|
||||||
Deploy now
|
<Button onClick={addEvent}>Save</Button>
|
||||||
</a>
|
</DialogFooter>
|
||||||
<Button>shadcn button</Button>
|
</DialogContent>
|
||||||
<a
|
</Dialog>
|
||||||
className="rounded-full border border-solid border-black/[.08] dark:border-white/[.145] transition-colors flex items-center justify-center hover:bg-[#f2f2f2] dark:hover:bg-[#1a1a1a] hover:border-transparent font-medium text-sm sm:text-base h-10 sm:h-12 px-4 sm:px-5 w-full sm:w-auto md:w-[158px]"
|
</div>
|
||||||
href="https://nextjs.org/docs?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
)
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
Read our docs
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</main>
|
|
||||||
<footer className="row-start-3 flex gap-[24px] flex-wrap items-center justify-center">
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org/learn?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/file.svg"
|
|
||||||
alt="File icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Learn
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://vercel.com/templates?framework=next.js&utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/window.svg"
|
|
||||||
alt="Window icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Examples
|
|
||||||
</a>
|
|
||||||
<a
|
|
||||||
className="flex items-center gap-2 hover:underline hover:underline-offset-4"
|
|
||||||
href="https://nextjs.org?utm_source=create-next-app&utm_medium=appdir-template-tw&utm_campaign=create-next-app"
|
|
||||||
target="_blank"
|
|
||||||
rel="noopener noreferrer"
|
|
||||||
>
|
|
||||||
<Image
|
|
||||||
aria-hidden
|
|
||||||
src="/globe.svg"
|
|
||||||
alt="Globe icon"
|
|
||||||
width={16}
|
|
||||||
height={16}
|
|
||||||
/>
|
|
||||||
Go to nextjs.org →
|
|
||||||
</a>
|
|
||||||
</footer>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user