Merge pull request #770 from thrishank/tailwind-prettier

Tailwind prettier

.prettierrc

@@ -2,5 +2,8 @@
   "semi": true,
   "singleQuote": true,
   "tabWidth": 2,
-  "trailingComma": "all"
+  "trailingComma": "all",
+  "plugins": [
+    "prettier-plugin-tailwindcss"
+  ]
 }

package.json

@@ -114,6 +114,7 @@
     "jsdom": "^24.0.0",
     "postcss": "^8",
     "prettier": "^3.2.4",
+    "prettier-plugin-tailwindcss": "^0.6.1",
     "prisma": "^5.13.0",
     "tailwindcss": "^3.3.0",
     "ts-node": "^10.9.2",

src/app/(marketing)/(policy)/privacy-policy/page.tsx

@@ -2,14 +2,14 @@ import { privacyPolicyContent } from '../../../../components/landing/footer/priv
 
 const PrivacyPolicyPage = () => {
   return (
-    <main className="flex flex-col items-start justify-center -mt-6 mb-12 px-4 md:px-36">
-      <h1 className="text-3xl md:text-4xl font-semibold text-neutral-800 dark:text-neutral-200 mb-4 md:mb-6 w-full text-center md:max-w-screen-2xl mx-auto">
+    <main className="-mt-6 mb-12 flex flex-col items-start justify-center px-4 md:px-36">
+      <h1 className="mx-auto mb-4 w-full text-center text-3xl font-semibold text-neutral-800 dark:text-neutral-200 md:mb-6 md:max-w-screen-2xl md:text-4xl">
         Privacy Policy
       </h1>
       {privacyPolicyContent.map((item) => {
         return (
           <div
-            className="my-3 text-neutral-700 dark:text-neutral-300 font-normal text-lg"
+            className="my-3 text-lg font-normal text-neutral-700 dark:text-neutral-300"
             key={item.id}
           >
             <p className="">{item.description}</p>

src/app/(marketing)/(policy)/refund/page.tsx

@@ -1,11 +1,11 @@
 const RefundAndCancellationPage = () => {
   return (
-    <main className="flex flex-col items-start -mt-6 mb-12 px-4 md:px-36 h-[60vh] lg:h-[70vh]">
-      <h1 className="text-3xl md:text-4xl font-semibold text-neutral-800 dark:text-neutral-200 mb-4 md:mb-6 w-full text-center md:max-w-screen-2xl mx-auto">
+    <main className="-mt-6 mb-12 flex h-[60vh] flex-col items-start px-4 md:px-36 lg:h-[70vh]">
+      <h1 className="mx-auto mb-4 w-full text-center text-3xl font-semibold text-neutral-800 dark:text-neutral-200 md:mb-6 md:max-w-screen-2xl md:text-4xl">
         Refund/Cancellation Policy
       </h1>
 
-      <p className="my-3 text-neutral-700 dark:text-neutral-300 font-normal text-lg">
+      <p className="my-3 text-lg font-normal text-neutral-700 dark:text-neutral-300">
         You are entitled to a refund in the case of the purchased course not
         being assigned to you within the expiration date from your date of
         purchase or if you have paid twice for the same course. Under any other

src/app/(marketing)/(policy)/tnc/page.tsx

@@ -2,14 +2,14 @@ import { tncContent } from '../../../../components/landing/footer/tnc/tnc-conten
 
 const TermsAndConditionsPage = () => {
   return (
-    <main className="flex flex-col items-start justify-center -mt-6 mb-12 px-4 md:px-36">
-      <h1 className="text-3xl md:text-4xl font-semibold text-neutral-800 dark:text-neutral-200 mb-4 md:mb-6 w-full text-center md:max-w-screen-2xl mx-auto">
+    <main className="-mt-6 mb-12 flex flex-col items-start justify-center px-4 md:px-36">
+      <h1 className="mx-auto mb-4 w-full text-center text-3xl font-semibold text-neutral-800 dark:text-neutral-200 md:mb-6 md:max-w-screen-2xl md:text-4xl">
         Terms & Conditions
       </h1>
       {tncContent.map((item) => {
         return (
           <div
-            className="my-4 text-neutral-700 dark:text-neutral-300 font-normal text-lg"
+            className="my-4 text-lg font-normal text-neutral-700 dark:text-neutral-300"
             key={item.id}
           >
             <p>{item.description}</p>

src/app/(marketing)/layout.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 const MarketingLayout = ({ children }: { children: React.ReactNode }) => {
   return (
-    <main className="pt-36 pb-20 h-full overflow-y-auto no-scrollbar">
+    <main className="no-scrollbar h-full overflow-y-auto pb-20 pt-36">
       {children}
     </main>
   );

src/app/admin/comment/ApproveComment.tsx

@@ -34,15 +34,15 @@ const ApproveComment = () => {
   };
   return (
     <form onSubmit={handleApprove} ref={formRef}>
-      <div className="w-full max-w-sm rounded-lg border border-gray-200 grid grid-rows-5 shadow-sm dark:border-gray-800">
-        <div className="p-6 grid gap-2 items-center row-span-3">
+      <div className="grid w-full max-w-sm grid-rows-5 rounded-lg border border-gray-200 shadow-sm dark:border-gray-800">
+        <div className="row-span-3 grid items-center gap-2 p-6">
           <div className="text-3xl font-bold">Approve Intro comment</div>
           <div className="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">
             Enter the information below to approve the comment
           </div>
         </div>
 
-        <div className="p-6 flex items-center row-span-2">
+        <div className="row-span-2 flex items-center p-6">
           <Label className="sr-only">Comment ID</Label>
           <Input
             className="w-full"
@@ -55,7 +55,7 @@ const ApproveComment = () => {
           />
           <FormErrors id="commentId" errors={fieldErrors} />
         </div>
-        <div className="p-6 flex items-center row-span-2">
+        <div className="row-span-2 flex items-center p-6">
           <Label className="sr-only">Admin password</Label>
           <Input
             className="w-full"
@@ -68,7 +68,7 @@ const ApproveComment = () => {
           />
           <FormErrors id="adminPassword" errors={fieldErrors} />
         </div>
-        <div className="p-6 flex items-center justify-center row-span-2">
+        <div className="row-span-2 flex items-center justify-center p-6">
           <Button className="w-full">Approve</Button>
         </div>
       </div>

src/app/admin/comment/page.tsx

@@ -3,7 +3,7 @@ import ApproveComment from './ApproveComment';
 
 const CommentAdminPage = () => {
   return (
-    <div className="flex justify-center h-[100dvh] items-center">
+    <div className="flex h-[100dvh] items-center justify-center">
       <ApproveComment />
     </div>
   );

src/app/admin/content/[...courseId]/page.tsx

@@ -25,7 +25,7 @@ export default async function UpdateCourseContent({
 
   if (contentType === 'video') {
     return (
-      <div className="max-w-screen-xl justify-between mx-auto p-4 text-white">
+      <div className="mx-auto max-w-screen-xl justify-between p-4 text-white">
         {/* <ContentRenderer nextContent={null} content={{ id: courseContent[0]?.id || 0, title: courseContent[0]?.title || "", type: contentType || "video", thumbnail: courseContent[0]?.thumbnail || "", description: courseContent[0]?.description ?? "" }} /> */}
         Video
       </div>
@@ -34,17 +34,17 @@ export default async function UpdateCourseContent({
 
   if (contentType === 'notion') {
     return (
-      <div className="max-w-screen-xl justify-between mx-auto p-4 dark:text-white text-blacke">
+      <div className="text-blacke mx-auto max-w-screen-xl justify-between p-4 dark:text-white">
         {/* <NotionRenderer id={courseContent[0]?.id} /> */}
         Notion doc
       </div>
     );
   }
 
   return (
-    <div className="max-w-screen-xl justify-between mx-auto p-4 dark:text-white text-black">
+    <div className="mx-auto max-w-screen-xl justify-between p-4 text-black dark:text-white">
       {course?.title}
-      <div className="font-bold  md:text-5xl lg:text-6xl">Content</div>
+      <div className="font-bold md:text-5xl lg:text-6xl">Content</div>
       <AddContent
         courseId={parseInt(courseId, 10)}
         parentContentId={parseFloat(rest[rest.length - 1])}

src/app/admin/content/page.tsx

@@ -10,7 +10,7 @@ async function getCourses() {
 export default async function CourseContent() {
   const courses = await getCourses();
   return (
-    <div className="max-w-screen-xl justify-between mx-auto p-4 cursor-pointer">
+    <div className="mx-auto max-w-screen-xl cursor-pointer justify-between p-4">
       <SelectCourse courses={courses} />
     </div>
   );

src/app/admin/discord/page.tsx

@@ -9,8 +9,8 @@ export default function DiscordPage() {
   const [adminSecret, setAdminSecret] = useState('' as any);
   const [userData, setUserData] = useState({} as any);
   return (
-    <div className="flex md:flex-row flex-col justify-around px-10 py-5">
-      <div className="border p-5 rounded-lg flex flex-col justify-self-center">
+    <div className="flex flex-col justify-around px-10 py-5 md:flex-row">
+      <div className="flex flex-col justify-self-center rounded-lg border p-5">
         <h1 className="text-xl sm:text-2xl md:text-4xl">
           Refresh discord permissions
         </h1>
@@ -32,7 +32,7 @@ export default function DiscordPage() {
         />
         <br />
         <Button
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
           onClick={async () => {
             const response = await fetch('/api/admin/discord/refresh', {
               method: 'POST',
@@ -53,13 +53,13 @@ export default function DiscordPage() {
           Allow user to re-initiate discord
         </Button>
         <br />
-        <h1 className="capitalize text-center">
+        <h1 className="text-center capitalize">
           please delete old user from discord first
         </h1>
       </div>
 
       <br />
-      <div className="flex gap-2 flex-col border rounded-lg p-5">
+      <div className="flex flex-col gap-2 rounded-lg border p-5">
         <h1 className="text-xl sm:text-2xl md:text-4xl">Get information</h1>
         <Input
           placeholder="email"
@@ -76,7 +76,7 @@ export default function DiscordPage() {
           onChange={(e) => setAdminSecret(e.target.value)}
         />
         <Button
-          className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-2 px-4 rounded"
+          className="rounded bg-blue-500 px-4 py-2 font-bold text-white hover:bg-blue-700"
           onClick={async () => {
             const response = await fetch('/api/admin/discord/', {
               method: 'POST',

src/app/admin/page.tsx

@@ -37,12 +37,12 @@ export default function Courses() {
   };
 
   return (
-    <Card className="lg:mt-10 w-full max-w-6xl mx-auto overflow-y-auto">
+    <Card className="mx-auto w-full max-w-6xl overflow-y-auto lg:mt-10">
       <CardHeader>
         <CardTitle>Create a new course</CardTitle>
         <CardDescription>Fill in the course details below</CardDescription>
       </CardHeader>
-      <CardContent className="p-4 pt-0 grid gap-4">
+      <CardContent className="grid gap-4 p-4 pt-0">
         <form
           onSubmit={handleSubmit(onSubmit)}
           className="grid gap-3.5 md:grid-cols-2"
@@ -99,7 +99,7 @@ export default function Courses() {
             required
             {...register('discordRoleId', { required: true })}
           />
-          <div className="flex flex-1 w-full justify-center">
+          <div className="flex w-full flex-1 justify-center">
             <Button type="submit">Create</Button>
           </div>
         </form>

src/app/admin/user/LogoutUser.tsx

@@ -20,15 +20,15 @@ const LogoutUserComp = () => {
   };
   return (
     <form onSubmit={handlLogout} ref={formRef}>
-      <div className="w-full max-w-sm rounded-lg border border-gray-200 grid grid-rows-5 shadow-sm dark:border-gray-800">
-        <div className="p-6 grid gap-2 items-center row-span-3">
+      <div className="grid w-full max-w-sm grid-rows-5 rounded-lg border border-gray-200 shadow-sm dark:border-gray-800">
+        <div className="row-span-3 grid items-center gap-2 p-6">
           <div className="text-3xl font-bold">Logout the user</div>
           <div className="text-sm font-medium leading-none text-gray-500 dark:text-gray-400">
             Enter the information below to logout the user
           </div>
         </div>
 
-        <div className="p-6 flex items-center row-span-2">
+        <div className="row-span-2 flex items-center p-6">
           <Label className="sr-only">EMAIL</Label>
           <Input
             className="w-full"
@@ -40,7 +40,7 @@ const LogoutUserComp = () => {
             }}
           />
         </div>
-        <div className="p-6 flex items-center row-span-2">
+        <div className="row-span-2 flex items-center p-6">
           <Label className="sr-only">Admin password</Label>
           <Input
             className="w-full"
@@ -52,7 +52,7 @@ const LogoutUserComp = () => {
             }}
           />
         </div>
-        <div className="p-6 flex items-center justify-center row-span-2">
+        <div className="row-span-2 flex items-center justify-center p-6">
           <Button className="w-full">Logout</Button>
         </div>
       </div>

src/app/admin/user/page.tsx

@@ -3,7 +3,7 @@ import LogoutUserComp from './LogoutUser';
 
 const UserAdminPage = () => {
   return (
-    <div className="flex justify-center h-[100dvh] items-center">
+    <div className="flex h-[100dvh] items-center justify-center">
       <LogoutUserComp />
     </div>
   );