🤖
ChatGPTが作った激ダサのヘッダーを改善する
これはChatGPTにヘッダー作ってもらったもの。正直ダサいのでなんとかしたい。
でも自分もデザインについては自信はないのでAIでレイアウトを作ってくれる「v0」を使います。
英語で
Remixのヘッダーをshaduiで作ってと書いてとGPTにお願いしました。
"I would like to create a header using the shadui design system. Could you provide me with an example of how to implement this in Remix with some basic styling and navigation links?"
一個目で良さげなのでてきたのでこれで
コードもでてきます。
払い出されたコード
=== component.jsx ===
/**
* v0 by Vercel.
* @see https://v0.dev/t/INLq98mbscb
* Documentation: https://v0.dev/docs#integrating-generated-code-into-your-nextjs-app
*/
import Link from "next/link"
import { Button } from "@/components/ui/button"
export default function Component() {
return (
<header className="flex h-16 w-full items-center border-b px-4 md:px-6">
<Link className="absolute inset-y-0 flex items-center gap-2 font-semibold" href="#">
Acme Inc
</Link>
<nav className="flex flex-1 justify-center font-medium">
<Link className="mx-2" href="#">
Home
</Link>
<Link className="mx-2" href="#">
About
</Link>
<Link className="mx-2" href="#">
Contact
</Link>
</nav>
<Button size="sm">Login</Button>
</header>
)
}
=== styles.css ===
body {
font-family: var(--font-inter), sans-serif;
}
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-inter), sans-serif;
}
=== layout.jsx ===
// This is the root layout component for your Next.js app.
// Learn more: https://nextjs.org/docs/app/building-your-application/routing/pages-and-layouts#root-layout-required
import { Inter } from 'next/font/google'
import { Inter } from 'next/font/google'
import './styles.css'
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
})
export default function Layout({ children }) {
return (
<html lang="en">
<body className={inter.variable + inter.variable}>
{children}
</body>
</html>
)
}
ボタンをインストールします
npx shadcn-ui@latest add button
Remix用に書き換えた
app\components\Header.tsx
import { Link } from "@remix-run/react"
import { Button } from "~/components/ui/button"
export default function Component() {
return (
<header className="flex h-16 w-full items-center border-b px-4 md:px-6">
<Link className="inset-y-0 flex items-center gap-2 font-semibold" to="#">
Acme Inc
</Link>
<nav className="flex flex-1 justify-center font-medium">
<Link className="mx-2" to="#">
Home
</Link>
<Link className="mx-2" to="#">
About
</Link>
<Link className="mx-2" to="#">
Contact
</Link>
</nav>
<Button size="sm">Login</Button>
</header>
)
}
よくなった🤗
Discussion