add prettier for tailwindcss

package.json

@@ -39,6 +39,7 @@
     "file-saver": "^2.0.5",
     "lucide-react": "^0.414.0",
     "next-themes": "^0.3.0",
+    "prettier-plugin-tailwindcss": "^0.6.5",
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-dropzone": "^14.2.3",
@@ -69,5 +70,6 @@
     "typescript": "^5.5.4",
     "vite": "^5.3.4",
     "vite-plugin-pwa": "^0.20.0"
-  }
+  },
+  "packageManager": "[email protected]"
 }

prettier.config.js

@@ -0,0 +1,13 @@
+/** @type {import('prettier').Config & import('prettier-plugin-tailwindcss').PluginOptions} */
+const config = {
+  plugins: ["prettier-plugin-tailwindcss"],
+  arrowParens: "always",
+  printWidth: 80,
+  singleQuote: false,
+  jsxSingleQuote: false,
+  semi: true,
+  trailingComma: "none",
+  tabWidth: 2,
+};
+
+export default config;

src/components/dropzone.tsx

@@ -54,10 +54,10 @@ export default function UploadFile() {
 
   const renderDropzoneContent = useCallback(
     (hasDatabase: boolean) => (
-      <div className="flex items-center gap-2 justify-center h-full">
+      <div className="flex h-full items-center justify-center gap-2">
         <div
           {...getRootProps()}
-          className={`grow h-full border p-6 rounded cursor-pointer text-center flex flex-col items-center justify-center ${
+          className={`flex h-full grow cursor-pointer flex-col items-center justify-center rounded border p-6 text-center ${
             hasDatabase ? "py-0" : "py-32"
           }`}
         >

src/components/error.tsx

@@ -6,8 +6,8 @@ export default function ErrorMessage({
   children: React.ReactNode;
 }) {
   return (
-    <div className="flex items-center justify-center gap-5 font-semibold p-4 border rounded">
-      <AlertTriangle className="w-6 h-6" />
+    <div className="flex items-center justify-center gap-5 rounded border p-4 font-semibold">
+      <AlertTriangle className="h-6 w-6" />
       {children}
     </div>
   );

src/components/footer.tsx

@@ -5,16 +5,16 @@ export const REPO = "https://github.com/vwh/sqlite-viewer";
 
 export default function Footer() {
   return (
-    <footer className="flex items-center justify-between p-4 border rounded">
+    <footer className="flex items-center justify-between rounded border p-4">
       <div>
-        <p className="hidden sm:block text-xs">
+        <p className="hidden text-xs sm:block">
           No file will be uploaded to server. using JavaScript, sql.js
         </p>
-        <p className="block sm:hidden text-xs">No file uploads to server.</p>
+        <p className="block text-xs sm:hidden">No file uploads to server.</p>
         <a
           href={REPO}
           target="_blank"
-          className="text-sm text-link hover:underline flex gap-1 items-center"
+          className="flex items-center gap-1 text-sm text-link hover:underline"
           title="Star on GitHub"
         >
           <Github className="h-4 w-4" />

src/components/loading.tsx

@@ -2,8 +2,8 @@ import { Loader } from "lucide-react";
 
 export default function Loading({ children }: { children: React.ReactNode }) {
   return (
-    <div className="flex items-center justify-center gap-5 font-semibold p-4 border rounded">
-      <Loader className="w-6 h-6 animate-spin" />
+    <div className="flex items-center justify-center gap-5 rounded border p-4 font-semibold">
+      <Loader className="h-6 w-6 animate-spin" />
       <span className="ml-2 font-semibold">{children}</span>
     </div>
   );

src/components/logo.tsx

@@ -5,7 +5,7 @@ export default function Logo() {
   const logoSrc = isDark ? "/sqlite-dark.webp" : "/sqlite-light.webp";
 
   return (
-    <section className="flex justify-center border rounded py-3">
+    <section className="flex justify-center rounded border py-3">
       <div className="flex flex-col items-center gap-3">
         <img
           id="logo"

src/components/page-select.tsx

@@ -30,12 +30,12 @@ export default function PageSelect({
   };
 
   return (
-    <section className="fixed bottom-[8px] left-0 right-0 w-[270px] mx-auto z-10">
-      <div className="flex justify-between gap-2 bg-secondary p-[6px] border rounded">
+    <section className="fixed bottom-[8px] left-0 right-0 z-10 mx-auto w-[270px]">
+      <div className="flex justify-between gap-2 rounded border bg-secondary p-[6px]">
         <Button onClick={prevPage} disabled={currentPage === 1}>
           <ChevronLeft className="h-4 w-4" />
         </Button>
-        <span className="text-sm flex items-center justify-center">
+        <span className="flex items-center justify-center text-sm">
           Page {currentPage} of {totalPages}
         </span>
         <Button onClick={nextPage} disabled={currentPage >= totalPages}>

src/components/settings.tsx

@@ -94,7 +94,7 @@ export default function Settings() {
   const exportButtons = useMemo(
     () =>
       db && (
-        <div className="border rounded p-2 flex flex-col gap-1">
+        <div className="flex flex-col gap-1 rounded border p-2">
           {renderExportButton(() => downloadDatabase(db), "Export as SQLite")}
           {renderExportButton(
             () => exportTableAsCSV(db, parseInt(selectedTable)),
@@ -124,12 +124,12 @@ export default function Settings() {
               Personalize your site experience here.
             </DrawerDescription>
           </DrawerHeader>
-          <div className="p-4 pb-0 flex flex-col gap-4">
+          <div className="flex flex-col gap-4 p-4 pb-0">
             <div>
-              <p className="text-sm text-muted-foreground mb-1">
+              <p className="mb-1 text-sm text-muted-foreground">
                 Rows Per Page
               </p>
-              <div className="border rounded p-2 flex gap-1 justify-center items-center">
+              <div className="flex items-center justify-center gap-1 rounded border p-2">
                 <Input
                   value={selectedRowsPerPage || ""}
                   onChange={handleInputChange}
@@ -138,7 +138,7 @@ export default function Settings() {
                   type="number"
                   name="rowsPerPage"
                 />
-                <span className="text-sm text-muted-foreground h-full text-center">
+                <span className="h-full text-center text-sm text-muted-foreground">
                   OR
                 </span>
                 <Button
@@ -150,15 +150,15 @@ export default function Settings() {
                 </Button>
               </div>
               <Button
-                className="w-full mt-2"
+                className="mt-2 w-full"
                 onClick={handleSave}
                 variant="outline"
               >
                 <span>Save</span>
               </Button>
             </div>
             <div>
-              <p className="text-sm text-muted-foreground mb-1">
+              <p className="mb-1 text-sm text-muted-foreground">
                 Exports Settings
               </p>
               {exportButtons}

src/components/table-data.tsx

@@ -40,7 +40,7 @@ const TableHeadCell: React.FC<{ col: string; columnSchema: ColumnSchema }> =
     <TableHead>
       <HoverCard>
         <HoverCardTrigger asChild>
-          <span className="hover:underline cursor-pointer">
+          <span className="cursor-pointer hover:underline">
             <div className="flex gap-1">
               {col}
               <ColumnIcon columnSchema={columnSchema} />

src/components/table-select.tsx

@@ -31,7 +31,7 @@ export default function TableSelect() {
   );
 
   return (
-    <section className="flex justify-center items-center gap-2">
+    <section className="flex items-center justify-center gap-2">
       <Select value={selectedTable} onValueChange={setSelectedTable}>
         <SelectTrigger className="grow">
           <SelectValue placeholder="Select a table" />
@@ -45,10 +45,10 @@ export default function TableSelect() {
       </Select>
       <Badge
         title="Rows"
-        className="text-sm grow min-w-[100px] md:min-w-[200px] py-2"
+        className="min-w-[100px] grow py-2 text-sm md:min-w-[200px]"
         variant="outline"
       >
-        <span className="text-center w-full">{selectedTableCount}</span>
+        <span className="w-full text-center">{selectedTableCount}</span>
       </Badge>
     </section>
   );

src/components/table.tsx

@@ -63,7 +63,7 @@ export default function DBTable() {
 
   const renderQueryInput = useMemo(
     () => (
-      <div className="flex flex-col md:flex-row gap-2">
+      <div className="flex flex-col gap-2 md:flex-row">
         <Input
           type="text"
           value={customQuery}
@@ -106,7 +106,7 @@ export default function DBTable() {
     if (isQueryLoading) return <Loading>Loading {tableName}</Loading>;
     if (data.length > 0) {
       return (
-        <div className="border rounded">
+        <div className="rounded border">
           <DBTableComponent
             data={data}
             columns={columns}
@@ -121,11 +121,11 @@ export default function DBTable() {
 
   return (
     <div className="flex flex-col gap-3 pb-8">
-      <section className="flex flex-col gap-2 p-3 border rounded pb-2">
+      <section className="flex flex-col gap-2 rounded border p-3 pb-2">
         <TableSelect />
         {renderQueryInput}
         {queryError && (
-          <p className="text-xs text-red-500 capitalize text-center">
+          <p className="text-center text-xs capitalize text-red-500">
             {queryError}
           </p>
         )}

src/components/ui/alert-dialog.tsx

@@ -16,7 +16,7 @@ const AlertDialogOverlay = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <AlertDialogPrimitive.Overlay
     className={cn(
-      "fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
+      "fixed inset-0 z-50 bg-black/80 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0",
       className
     )}
     {...props}

src/components/ui/hover-card.tsx

@@ -21,7 +21,7 @@ const HoverCardContent = React.forwardRef<
       side={side}
       sideOffset={sideOffset}
       className={cn(
-        "z-50 w-64 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 text-balance break-words",
+        "z-50 w-64 text-balance break-words rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
         className
       )}
       {...props}

src/components/ui/table.tsx

@@ -93,19 +93,19 @@ const TableCell = React.forwardRef<HTMLTableCellElement, TableCellProps>(
     <td
       ref={ref}
       className={cn(
-        "p-4 align-middle [&:has([role=checkbox])]:pr-0 truncate max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap",
+        "max-w-[200px] overflow-hidden truncate text-ellipsis whitespace-nowrap p-4 align-middle [&:has([role=checkbox])]:pr-0",
         className
       )}
       {...props}
     >
       <HoverCard>
         <HoverCardTrigger asChild>
-          <span className="hover:underline cursor-pointer">{children}</span>
+          <span className="cursor-pointer hover:underline">{children}</span>
         </HoverCardTrigger>
         <HoverCardContent side="bottom" align="start">
           <div className="flex flex-col gap-1">
             {dataType === "BLOB" ? (
-              <span className="truncate max-w-[200px] overflow-hidden text-ellipsis whitespace-nowrap">
+              <span className="max-w-[200px] overflow-hidden truncate text-ellipsis whitespace-nowrap">
                 {children}
               </span>
             ) : (

src/main.tsx

@@ -8,7 +8,7 @@ import "./index.css";
 
 ReactDOM.createRoot(document.getElementById("root")!).render(
   <React.StrictMode>
-    <main className="container mx-auto p-4 h-screen flex flex-col gap-3">
+    <main className="container mx-auto flex h-screen flex-col gap-3 p-4">
       <App />
     </main>
     <Toaster />