Refactor project structure and update configuration files

Author: markslorach

app/components/skeletons/country-list-skeleton.tsx

@@ -12,7 +12,7 @@ const CountryListSkeleton = () => {
         {[...Array(12)].map((_, index) => (
           <div
             key={index}
-            className="bg-gray-200 dark:bg-gray-700 space-y-7 rounded-lg shadow-sm animate-pulse p-5"
+            className="bg-gray-200 min-h-[336px] max-h-[336px] dark:bg-gray-700 space-y-7 rounded-lg shadow-sm animate-pulse p-4"
           >
             <div className="bg-gray-300 dark:bg-gray-600 aspect-video rounded-lg animate-pulse"></div>
             <div>
@@ -21,7 +21,7 @@ const CountryListSkeleton = () => {
                 {[...Array(3)].map((_, index) => (
                   <div
                     key={index}
-                    className="h-6 w-3/4 rounded-lg animate-pulse bg-gray-300 dark:bg-gray-600"
+                    className="h-5 w-3/4 rounded-lg animate-pulse bg-gray-300 dark:bg-gray-600"
                   ></div>
                 ))}
               </div>

app/components/user/add-to-favourites-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { useOptimistic } from "react";
 import AddToFavouritesButton from "./add-to-favourites-btn";
-import { addFavouriteCountryAction, removeFavouriteCountryAction } from "@/app/actions/actions";
+import { addFavouriteCountryAction, removeFavouriteCountryAction } from "@/server/actions/actions";
 
 type Props = {
   countryCode: string;

app/components/user/remove-from-favourites-form.tsx

@@ -1,7 +1,7 @@
 "use client";
 import { Country } from "@/app/_types/types";
-import { removeFavouriteCountryAction } from "@/app/actions/actions";
 import { Button } from "@/components/ui/button";
+import { removeFavouriteCountryAction } from "@/server/actions/actions";
 import { BookmarkIcon as BookmarkOutline } from "@heroicons/react/24/outline";
 import { BookmarkIcon as BookmarkSolid } from "@heroicons/react/24/solid";
 import { useState } from "react";

app/components/user/user-dropdown.tsx

@@ -9,7 +9,7 @@ import Link from "next/link";
 import { SignOutButton } from "../shared/sign-out-btn";
 
 import UserButton from "./user-btn";
-import { getUser } from "@/lib/user";
+import { getUser } from "@/server/lib/user";
 
 export default async function UserDropdown() {
   const user = await getUser();

app/countries-container.tsx

@@ -1,7 +1,7 @@
-import { getCountries } from "@/lib/countries";
+import { getCountries } from "@/server/lib/countries";
 import { alphabeticalOrder } from "@/utils/helpers";
 import CountryList from "./components/country-list";
-import { getFavouriteCountries } from "@/lib/user";
+import { getFavouriteCountries } from "@/server/lib/user";
 import { auth } from "@clerk/nextjs/server";
 
 export default async function CountryContainer() {

app/country/[cca3]/country-details.tsx

@@ -1,6 +1,6 @@
 import Link from "next/link";
 import { Button } from "@/components/ui/button";
-import { getCountry } from "@/lib/countries";
+import { getCountry } from "@/server/lib/countries";
 import { FavouriteCountry } from "@prisma/client";
 import { Country } from "@/app/_types/types";
 import BackButton from "@/app/components/shared/back-btn";

app/favourite-countries/page.tsx

@@ -1,5 +1,5 @@
-import { getCountry } from "@/lib/countries";
-import { getFavouriteCountries } from "@/lib/user";
+import { getCountry } from "@/server/lib/countries";
+import { getFavouriteCountries } from "@/server/lib/user";
 import { auth } from "@clerk/nextjs/server";
 import FavouriteCountriesContainer from "./favourite-countries-contrainer";
 

app/globals.css

@@ -12,4 +12,9 @@ dd {
 
 .cl-internal-1dauvpw {
     @apply hidden
-}
+}
+
+@layer base {
+  :root {
+  
+        --radius: 0.5rem}}

components.json

@@ -6,12 +6,16 @@
   "tailwind": {
     "config": "tailwind.config.ts",
     "css": "app/globals.css",
-    "baseColor": "slate",
+    "baseColor": "gray",
     "cssVariables": false,
     "prefix": ""
   },
   "aliases": {
     "components": "@/components",
-    "utils": "@/lib/utils"
-  }
+    "utils": "@/lib/utils",
+    "ui": "@/components/ui",
+    "lib": "@/lib",
+    "hooks": "@/hooks"
+  },
+  "iconLibrary": "lucide"
 }

components/ui/skeleton.tsx

@@ -0,0 +1,15 @@
+import { cn } from "@/lib/utils"
+
+function Skeleton({
+  className,
+  ...props
+}: React.HTMLAttributes<HTMLDivElement>) {
+  return (
+    <div
+      className={cn("animate-pulse rounded-md bg-gray-100 dark:bg-gray-800", className)}
+      {...props}
+    />
+  )
+}
+
+export { Skeleton }

lib/utils.ts

@@ -1,4 +1,4 @@
-import { type ClassValue, clsx } from "clsx"
+import { clsx, type ClassValue } from "clsx"
 import { twMerge } from "tailwind-merge"
 
 export function cn(...inputs: ClassValue[]) {

package-lock.json

@@ -16,7 +16,7 @@
     "@radix-ui/react-dropdown-menu": "^2.1.1",
     "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-slot": "^1.1.0",
-    "class-variance-authority": "^0.7.0",
+    "class-variance-authority": "^0.7.1",
     "clsx": "^2.1.1",
     "framer-motion": "^11.3.21",
     "lucide-react": "^0.424.0",
@@ -27,7 +27,7 @@
     "react": "^18",
     "react-dom": "^18",
     "sharp": "^0.33.5",
-    "tailwind-merge": "^2.4.0",
+    "tailwind-merge": "^2.6.0",
     "tailwindcss-animate": "^1.0.7"
   },
   "devDependencies": {

package.json

@@ -1,5 +1,5 @@
 "use server";
-import { addFavouriteCountry, removeFavouriteCountry } from "@/lib/user";
+import { addFavouriteCountry, removeFavouriteCountry } from "@/server/lib/user";
 import { revalidatePath } from "next/cache";
 
 export async function addFavouriteCountryAction(countryCode: string) {

app/actions/actions.ts server/actions/actions.ts

@@ -10,29 +10,43 @@ const config = {
   ],
   prefix: "",
   theme: {
-    container: {
-      center: true,
-      padding: "2rem",
-      screens: {
-        "2xl": "1400px",
-      },
-    },
-    extend: {
-      keyframes: {
-        "accordion-down": {
-          from: { height: "0" },
-          to: { height: "var(--radix-accordion-content-height)" },
-        },
-        "accordion-up": {
-          from: { height: "var(--radix-accordion-content-height)" },
-          to: { height: "0" },
-        },
-      },
-      animation: {
-        "accordion-down": "accordion-down 0.2s ease-out",
-        "accordion-up": "accordion-up 0.2s ease-out",
-      },
-    },
+  	container: {
+  		center: true,
+  		padding: '2rem',
+  		screens: {
+  			'2xl': '1400px'
+  		}
+  	},
+  	extend: {
+  		keyframes: {
+  			'accordion-down': {
+  				from: {
+  					height: '0'
+  				},
+  				to: {
+  					height: 'var(--radix-accordion-content-height)'
+  				}
+  			},
+  			'accordion-up': {
+  				from: {
+  					height: 'var(--radix-accordion-content-height)'
+  				},
+  				to: {
+  					height: '0'
+  				}
+  			}
+  		},
+  		animation: {
+  			'accordion-down': 'accordion-down 0.2s ease-out',
+  			'accordion-up': 'accordion-up 0.2s ease-out'
+  		},
+  		borderRadius: {
+  			lg: 'var(--radius)',
+  			md: 'calc(var(--radius) - 2px)',
+  			sm: 'calc(var(--radius) - 4px)'
+  		},
+  		colors: {}
+  	}
   },
   plugins: [require("tailwindcss-animate")],
 } satisfies Config