In this article, I will provide some conversations with ChatGPT and their results.
First attempt
Prompt: I want to modify tailwindcss className to make it nicer. I’ll put all components and pages below. So I want you to style with a consistent design theme. Since this is a twitter-ish app, I want to mimic Twitter stylings
I provided all components under the prompt and below is the result.
Second attempt
I tried asking for their solutions with more concrete directions.
Also instead of having a Link at the bottom, I want to put navigation in the Header component
// Result
// Header.js
import React from "react";
import Link from "next/link";
const Header = ({ title }) => {
return (
<header className="flex justify-between items-center mb-8">
<h1 className="text-5xl font-extrabold tracking-tight text-blue-700 sm:text-6xl">
{title}
</h1>
<nav>
<ul className="flex space-x-4">
<li>
<Link href="/">Home</Link>
</li>
<li>
<Link href="/my-page">My Page</Link>
</li>
</ul>
</nav>
</header>
);
};
export default Header;
I worked other than padding issue (9/10).
(Code of TiwtterItem.tsx)
Here, instead of text, I want to add delete icon and put it light side
// Result
import { Trash2 } from 'react-feather';
function TweetItem({ tweet }: TweetItemProps) {
const { data: sessionData } = useSession();
const mutation = api.tweet.delete.useMutation();
const handleDelete = () => {
mutation.mutate({ id: tweet.id });
};
return (
<div className="rounded-lg bg-white p-4 shadow-md">
<p className="text-lg font-semibold text-blue-500">
{tweet.user.name} - {tweet.createdAt.toDateString()}
</p>
<p className="text-gray-700">{tweet.content}</p>
{sessionData && (
<button className="text-red-500" onClick={handleDelete}>
<Trash2 size={18} /> {/* Replace the text with the delete icon */}
</button>
)}
</div>
);
}
export default TweetItem;
Unfortunately, this didn’t work as the use of icons was incorrect (0/10).
FYI: here is the correct way of icon usage. Actually, ChatGTP’s answer was somewhat close.
import React from "react";
import { useSession } from "next-auth/react";
import FeatherIcon from "feather-icons-react";
import { type RouterOutputs } from "~/utils/api";
import { api } from "~/utils/api";
type ArryItems<T> = T extends (infer Item)[] ? Item : T;
type TweetItemProps = ArryItems<RouterOutputs["tweet"]["oneUser"]>;
function TweetItem({ tweet }: { tweet: TweetItemProps }) {
const { data: sessionData } = useSession();
return (
<div className="w-full rounded-lg bg-white p-4 shadow-md">
<p className="text-base text-sm font-semibold text-gray-600">
<span className="font-semibold text-blue-500">{tweet.user.name}</span> -{" "}
{tweet.createdAt.toDateString()}
</p>
<div className="w-100 mb-2 flex items-center justify-between">
<p className="text-lg text-gray-700">{tweet.content}</p>
{sessionData && (
<button className="text-blue-500" onClick={handleDelete}>
<FeatherIcon size={18} icon="trash-2" />
</button>
)}
</div>
</div>
);
}
export default TweetItem;
Can you make this header component responsive by having a hamburger menu for navigation elements when the screen size is small? (code of the Header components)
Looks good! Surprisingly they gave me a blue hamburger menu. But the stylings for openMenu status was a little ugly and I gave up to have the hamburger menu(8/10).
Final results
Here is the final result after I modified some stylings manually. What I did are a font size change, padding and margin modification, and width updates for tweets and form components.
Discussion
They have a lot of knowledge and can help you understand important ideas. However, from my observations, it appears that ChatGPT may not excel in making real-time decisions based on the current circumstances although I am not familiar with the inner workings of ChatGPT.
This means they have trouble analyzing the current situation and using their knowledge to find the best solution. So, if you want information about a specific topic, they can give you a good answer. But if you need help with something you are doing right now, their answers may not be very helpful.
Contrarily, we have the potential to become great friends if we actively engage in analyzing the present situation and determine the necessary knowledge to effectively address and resolve it.
One last think I want to mention is that sometimes their knowledge is not up to date. For example, when it comes to Next.js, it is no longer necessary to wrap tags with , even though ChatGPT might suggest doing so.
That’s it! Let me know if you have cool prompts to work with ChatGPT :)
The original article is here
Top comments (0)