Zenn
🤖

ChatGPTが作った激ダサのヘッダーを改善する

2024/04/13に公開
Remix
shadcn/ui
#
v0
tech


これはChatGPTにヘッダー作ってもらったもの。正直ダサいのでなんとかしたい。

でも自分もデザインについては自信はないのでAIでレイアウトを作ってくれる「v0」を使います。

https://v0.dev/

英語で

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