feat: add prettier tailwind plugin

reline-digital · Mar 21, 2024 · b08624f · b08624f
1 parent cb52c2c
commit b08624f
Show file tree

Hide file tree

Showing 11 changed files with 147 additions and 28 deletions.
diff --git a/apps/frontend/.prettierrc b/apps/frontend/.prettierrc
@@ -0,0 +1,6 @@
+{
+    "plugins": ["prettier-plugin-tailwindcss"],
+    "trailingComma": "es5",
+    "semi": false,
+    "singleQuote": true
+}
diff --git a/apps/frontend/package.json b/apps/frontend/package.json
@@ -26,6 +26,8 @@
     "@types/react-dom": "^18.2.18",
     "autoprefixer": "^10.4.18",
     "postcss": "^8.4.35",
+    "prettier": "^3.2.5",
+    "prettier-plugin-tailwindcss": "^0.5.12",
     "tailwindcss": "^3.4.1",
     "typescript": "^5.3.3"
   }

diff --git a/apps/frontend/public/assets/images/bg-header.svg b/apps/frontend/public/assets/images/bg-header.svg
diff --git a/apps/frontend/public/assets/images/company-logo.svg b/apps/frontend/public/assets/images/company-logo.svg
diff --git a/apps/frontend/public/favicon/favicon-32x32.png b/apps/frontend/public/favicon/favicon-32x32.png
diff --git a/apps/frontend/src/app/layout.tsx b/apps/frontend/src/app/layout.tsx
@@ -6,14 +6,21 @@ const league_spartan = League_Spartan({
   display: 'swap',
 })
 
+export const metadata = {
+  title: 'Job Board | All Jobs',
+}
+
 export default function RootLayout({
   children,
 }: {
   children: React.ReactNode
 }): JSX.Element {
   return (
-    <html className={league_spartan.className} lang='en'>
-      <body>{children}</body>
+    <html className={league_spartan.className} lang="en">
+      <head>
+        <link rel="icon" sizes="32x32" href="/favicon/favicon-32x32.png" />
+      </head>
+      <body className="bg-accent">{children}</body>
     </html>
   )
 }
diff --git a/apps/frontend/src/app/page.tsx b/apps/frontend/src/app/page.tsx
@@ -1,11 +1,12 @@
-export const metadata = {
-  title: 'Store | Kitchen Sink',
-}
+import { Card } from '@/components/Card'
 
 export default function Store(): JSX.Element {
   return (
-    <div>
-      <h1 className=' text-primary'>Hello, World!</h1>
-    </div>
+    <>
+      <header className="mb-10 bg-primary bg-[url('/assets/images/bg-header.svg')] bg-cover py-14"></header>
+      <main className="mx-auto max-w-[90%] md:container">
+        <Card />
+      </main>
+    </>
   )
 }
diff --git a/apps/frontend/src/components/Card.tsx b/apps/frontend/src/components/Card.tsx
@@ -0,0 +1,22 @@
+import Image from 'next/image'
+import React from 'react'
+
+export function Card() {
+  return (
+    <div className="flex justify-between rounded bg-tertiary p-4 shadow-lg outline">
+      <div className="flex">
+        <Image
+          src="/assets/images/company-logo.svg"
+          alt="logo"
+          className="h-auto w-auto"
+          width={40}
+          height={40}
+        />
+        <div>header content</div>
+      </div>
+      <div>
+        <span>tags</span>
+      </div>
+    </div>
+  )
+}
diff --git a/apps/frontend/tsconfig.json b/apps/frontend/tsconfig.json
@@ -5,9 +5,12 @@
     "outDir": "dist",
     "plugins": [
       {
-        "name": "next"
-      }
-    ]
+        "name": "next",
+      },
+    ],
+    "paths": {
+      "@/*": ["./src/*"],
+    },
   },
-  "include": ["src", "next-env.d.ts", ".next/types/**/*.ts"]
+  "include": ["src", "next-env.d.ts", ".next/types/**/*.ts"],
 }
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/config-eslint/next.js b/packages/config-eslint/next.js
@@ -1,6 +1,6 @@
-const { resolve } = require("node:path");
+const { resolve } = require('node:path')
 
-const project = resolve(process.cwd(), "tsconfig.json");
+const project = resolve(process.cwd(), 'tsconfig.json')
 
 /*
  * This is a custom ESLint configuration for use with
@@ -13,12 +13,12 @@ const project = resolve(process.cwd(), "tsconfig.json");
 
 module.exports = {
   extends: [
-    "@vercel/style-guide/eslint/node",
-    "@vercel/style-guide/eslint/typescript",
-    "@vercel/style-guide/eslint/browser",
-    "@vercel/style-guide/eslint/react",
-    "@vercel/style-guide/eslint/next",
-    "eslint-config-turbo",
+    '@vercel/style-guide/eslint/node',
+    '@vercel/style-guide/eslint/typescript',
+    '@vercel/style-guide/eslint/browser',
+    '@vercel/style-guide/eslint/react',
+    '@vercel/style-guide/eslint/next',
+    'eslint-config-turbo',
   ].map(require.resolve),
   parserOptions: {
     project,
@@ -27,17 +27,18 @@ module.exports = {
     React: true,
     JSX: true,
   },
-  plugins: ["only-warn"],
+  plugins: ['only-warn'],
   settings: {
-    "import/resolver": {
+    'import/resolver': {
       typescript: {
         project,
       },
     },
   },
-  ignorePatterns: ["node_modules/", "dist/"],
+  ignorePatterns: ['node_modules/', 'dist/'],
   // add rules configurations here
   rules: {
-    "import/no-default-export": "off",
+    'import/no-default-export': 'off',
+    allowSnakeCase: true,
   },
-};
+}