feat: add page skeletons

app/admin/Sidebar.tsx

@@ -10,14 +10,16 @@ import {
  HomeIcon,
  NewCommentIcon,
  SubscriberIcon,
+ TiltedSendIcon,
 } from '~/assets'
 
 import logo from './../apple-icon.png'
 
 const navigation = [
  { name: '仪表盘', href: '', icon: DashboardIcon },
- { name: '订阅', href: '/subscribers', icon: SubscriberIcon },
  { name: '评论', href: '/comments', icon: NewCommentIcon },
+ { name: '订阅', href: '/subscribers', icon: SubscriberIcon },
+ { name: 'Newsletters', href: '/newsletters', icon: TiltedSendIcon },
 ]
 
 export function Sidebar() {

app/admin/comments/page.tsx

@@ -15,7 +15,6 @@ import { desc, sql } from 'drizzle-orm'
 import Link from 'next/link'
 import React from 'react'
 
-import { Container } from '~/components/ui/Container'
 import { db } from '~/db'
 import { comments } from '~/db/schema'
 import { url } from '~/lib'
@@ -50,7 +49,7 @@ export default async function AdminCommentsPage() {
  const postMap = new Map(posts.map((post) => [post._id, post]))
 
  return (
- <Container className="py-12">
+ <>
  <Title>评论</Title>
 
  <Grid numItemsMd={2} numItemsLg={3} className="mt-6 gap-6">
@@ -108,6 +107,6 @@ export default async function AdminCommentsPage() {
  </TableBody>
  </Table>
  </Card>
- </Container>
+ </>
  )
 }

app/admin/layout.tsx

@@ -1,6 +1,8 @@
 import { currentUser } from '@clerk/nextjs'
 import { redirect } from 'next/navigation'
 
+import { Container } from '~/components/ui/Container'
+
 import { Sidebar } from './Sidebar'
 
 export default async function AdminLayout({
@@ -18,7 +20,9 @@ export default async function AdminLayout({
  <Sidebar />
 
  <main className="py-10 lg:pl-72">
- <div className="px-4 sm:px-6 lg:px-8">{children}</div>
+ <div className="px-4 sm:px-6 lg:px-8">
+ <Container className="py-12">{children}</Container>
+ </div>
  </main>
  </div>
  )

app/admin/newsletters/new/page.tsx

@@ -0,0 +1,39 @@
+import { Card, Text, TextInput, Title } from '@tremor/react'
+
+export default function CreateNewsletterPage() {
+ return (
+ <>
+ <Title>Create a newsletter</Title>
+
+ <Card className="mt-6">
+ <form>
+ <div className="flex flex-col space-y-3">
+ <Text>Subject</Text>
+ <TextInput name="subject" required />
+ </div>
+ <div className="flex flex-col space-y-3">
+ <Text>Sent at</Text>
+ <input type="datetime-local" name="sent_at" required />
+ </div>
+ <div className="flex flex-col space-y-3">
+ <label
+ htmlFor="body"
+ className="block text-sm font-medium leading-6 text-zinc-800 dark:text-zinc-200"
+ >
+ Body
+ </label>
+ <div className="mt-2">
+ <textarea
+ rows={20}
+ name="body"
+ id="body"
+ className="block w-full rounded-md border-0 py-1.5 text-zinc-900 shadow-sm ring-1 ring-inset ring-zinc-300 placeholder:text-zinc-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 dark:text-zinc-100 dark:ring-zinc-700 sm:text-sm sm:leading-6"
+ defaultValue={''}
+ />
+ </div>
+ </div>
+ </form>
+ </Card>
+ </>
+ )
+}

app/admin/newsletters/page.tsx

@@ -0,0 +1,65 @@
+import {
+ Card,
+ Table,
+ TableBody,
+ TableCell,
+ TableHead,
+ TableHeaderCell,
+ TableRow,
+ Title,
+} from '@tremor/react'
+import { parseDateTime } from '@zolplay/utils'
+import { desc, sql } from 'drizzle-orm'
+
+import { Button } from '~/components/ui/Button'
+import { db } from '~/db'
+import { newsletters } from '~/db/schema'
+
+export default async function AdminNewslettersPage() {
+ const {
+ rows: [count],
+ } = await db.execute<{ today_count: number }>(
+ sql`SELECT 
+ (SELECT COUNT(*) FROM newsletters) as total`
+ )
+ const nl = await db
+ .select()
+ .from(newsletters)
+ .limit(100)
+ .orderBy(desc(newsletters.sentAt))
+
+ return (
+ <>
+ <Title className="mb-3">
+ Total newsletters{' '}
+ {typeof count === 'object' && 'total' in count && (
+ <span>{count.total}</span>
+ )}
+ </Title>
+ <Button href="newsletters/new">New</Button>
+
+ <Card className="mt-6">
+ <Table className="mt-5">
+ <TableHead>
+ <TableRow>
+ <TableHeaderCell>Subject</TableHeaderCell>
+ <TableHeaderCell>Time</TableHeaderCell>
+ </TableRow>
+ </TableHead>
+ <TableBody>
+ {nl.map((newsletter) => (
+ <TableRow key={newsletter.id}>
+ <TableCell>{newsletter.subject}</TableCell>
+ <TableCell>
+ {parseDateTime({ date: newsletter.sentAt })?.format(
+ 'YYYY-MM-DD HH:mm'
+ )}
+ </TableCell>
+ </TableRow>
+ ))}
+ </TableBody>
+ </Table>
+ </Card>
+ </>
+ )
+}

app/admin/page.tsx

@@ -2,7 +2,6 @@ import { Card, Grid, Metric, Text, Title } from '@tremor/react'
 import { sql } from 'drizzle-orm'
 import React from 'react'
 
-import { Container } from '~/components/ui/Container'
 import { db } from '~/db'
 
 export default async function AdminPage() {
@@ -16,7 +15,7 @@ export default async function AdminPage() {
  )
 
  return (
- <Container className="mt-12 pb-12">
+ <>
  <Title>后台仪表盘</Title>
 
  <Grid numItemsMd={2} numItemsLg={3} className="mt-6 gap-6">
@@ -36,6 +35,6 @@ export default async function AdminPage() {
  {count && 'guestbook' in count && <Metric>{count.guestbook}</Metric>}
  </Card>
  </Grid>
- </Container>
+ </>
  )
 }

app/admin/subscribers/page.tsx

@@ -12,7 +12,6 @@ import { parseDateTime } from '@zolplay/utils'
 import { desc, lte, sql } from 'drizzle-orm'
 import React from 'react'
 
-import { Container } from '~/components/ui/Container'
 import { db } from '~/db'
 import { subscribers } from '~/db/schema'
 
@@ -31,7 +30,7 @@ export default async function AdminSubscribersPage() {
  .orderBy(desc(subscribers.subscribedAt))
 
  return (
- <Container className="py-12">
+ <>
  <Title>
  总订阅{' '}
  {typeof count === 'object' && 'total' in count && (
@@ -61,6 +60,6 @@ export default async function AdminSubscribersPage() {
  </TableBody>
  </Table>
  </Card>
- </Container>
+ </>
  )
 }

package.json

@@ -81,6 +81,7 @@
  },
  "devDependencies": {
  "@headlessui/tailwindcss": "^0.1.3",
+ "@tailwindcss/forms": "^0.5.3",
  "@tailwindcss/typography": "^0.5.9",
  "@types/eslint": "^8.40.2",
  "@types/node": "^18.16.15",