feat: use tailwind

front/app/_orgs/[orgslug]/(withmenu)/courses/page.tsx

@@ -48,8 +48,7 @@ const CoursesIndexPage = (params: any) => {
           dialogTitle="Create Course"
           dialogDescription="Create a new course"
           dialogTrigger={
-            <button> Add Course +
-            </button>
+            <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 font text-sm font-bold text-white drop-shadow-lg">Add Course + </button>
           }
         />
       </Title>
@@ -57,23 +56,25 @@ const CoursesIndexPage = (params: any) => {
       {!courses ? (
         <div>Loading...</div>
       ) : (
-        <CourseWrapper>
+        <CourseWrapper className="flex space-x-5">
           {courses.map((course: any) => (
             <div key={course.course_id}>
-              <button style={{ backgroundColor: "red", border: "none" }} onClick={() => deleteCourses(course.course_id)}>
+              <div className="flex space-x-2 py-2">
+                <button className="rounded-md text-sm px-3 font-bold text-red-800 bg-red-200 w-16 flex justify-center items-center" onClick={() => deleteCourses(course.course_id)}>
                   Delete <Trash size={10}></Trash>
                 </button>
-              <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
                 <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id) + "/edit")}>
-                  <button>
+                  <button className="rounded-md text-sm px-3 font-bold text-orange-800 bg-orange-200 w-16 flex justify-center items-center">
                     Edit <Edit2 size={10}></Edit2>
                   </button>
                 </Link>
-                <CourseThumbnail>
-                  <img src={`${getBackendUrl()}content/uploads/img/${course.thumbnail}`} alt="" />
+              </div>
+              <Link href={getUriWithOrg(orgslug, "/course/" + removeCoursePrefix(course.course_id))}>
+              <CourseThumbnail className="inset-0 ring-1 ring-inset ring-black/10 rounded-lg shadow-xl relative w-[249px] h-[131px] bg-cover" style={{backgroundImage : `url(${getBackendUrl()}content/uploads/img/${course.thumbnail})`}}>
+              
               </CourseThumbnail>
-                <h2>{course.name}</h2>
               </Link>
+              <h2>{course.name}</h2>
             </div>
           ))}
         </CourseWrapper>
@@ -86,21 +87,15 @@ export default CoursesIndexPage;
 
 const CourseThumbnail = styled.div`
   display: flex;
+
   img {
     width: 249px;
     height: 131px;
 
-    background: url(), #d9d9d9;
-    border: 1px solid rgba(255, 255, 255, 0.19);
-    box-shadow: 0px 13px 33px -13px rgba(0, 0, 0, 0.42);
-    border-radius: 7px;
   }
 `;
 
 const CourseWrapper = styled.div`
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: space-between;
   margin: 0 auto;
   max-width: 1500px;
   div {
@@ -114,18 +109,5 @@ const CourseWrapper = styled.div`
       height: 50px;
       color: #424242;
     }
-    button {
-      margin: 4px 0;
-      border: none;
-      border-radius: 7px;
-      background: #000000;
-      opacity: 0.4;
-      font-family: "DM Sans", sans-serif;
-
-      color: #ffffff;
-      font-size: 12px;
-      font-weight: 600;
-      cursor: pointer;
-    }
   }
 `;

front/app/_orgs/[orgslug]/page.tsx

@@ -11,8 +11,8 @@ const OrgHomePage = (params: any) => {
   return (
     <div>
       <Title>Welcome {orgslug} 👋🏻</Title>
-      <Link href={getUriWithOrg(orgslug,"/courses")}>
-        <button>See Courses </button>
+      <Link href={getUriWithOrg(orgslug, "/courses")}>
+        <button className="rounded-md bg-black antialiased ring-offset-purple-800 p-2 px-5 font text-sm font-bold text-white drop-shadow-lg">See Courses </button>
       </Link>
     </div>
   );

front/package.json

@@ -50,9 +50,11 @@
     "@types/react-katex": "^3.0.0",
     "@types/styled-components": "^5.1.26",
     "@types/uuid": "^9.0.0",
-    "autoprefixer": "^10.4.12",
+    "autoprefixer": "^10.4.14",
     "eslint": "8.23.1",
     "eslint-config-next": "^13.0.6",
+    "postcss": "^8.4.23",
+    "tailwindcss": "^3.3.2",
     "typescript": "4.8.3"
   }
 }

front/postcss.config.js

@@ -0,0 +1,6 @@
+module.exports = {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

front/styles/globals.css

@@ -1,6 +1,10 @@
 
 @import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,700;1,400;1,500&display=swap');
 
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
 html,
 body {
   padding: 0;

front/tailwind.config.js

@@ -0,0 +1,13 @@
+/** @type {import('tailwindcss').Config} */
+module.exports = {
+  content: [
+    './app/**/*.{js,jsx,ts,tsx}',
+    './components/**/*.{js,jsx,ts,tsx}',
+
+  ],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+}
+