fix: resolve remaining threads in pr request

messages/no.json

@@ -160,7 +160,7 @@
   },
   "rules": {
     "title": "Regler",
-    "forEveryone": "For alle ",
+    "forEveryone": "For alle",
     "internal": "Interne regler"
   }
 }

src/app/[locale]/(default)/rules/(main)/layout.tsx

@@ -1,17 +1,17 @@
-import { useTranslations } from 'next-intl';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 type RulesLayoutProps = {
   children: React.ReactNode;
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 };
 
-export default function RulesLayout({
+export default async function RulesLayout({
   children,
-  params: { locale },
+  params,
 }: RulesLayoutProps) {
-  unstable_setRequestLocale(locale);
-  const t = useTranslations('rules');
+  const { locale } = await params;
+  setRequestLocale(locale);
+  const t = await getTranslations('rules');
   return (
     <>
       <h1 className='text-center'>{t('title')}</h1>

src/app/[locale]/(default)/rules/(main)/loading.tsx

@@ -1,9 +1,5 @@
 import { RuleCardListSkeleton } from '@/components/rules/RuleCardListSkeleton';
 
 export default function RulesSkeleton() {
-  return (
-    <>
-      <RuleCardListSkeleton />
-    </>
-  );
+  return <RuleCardListSkeleton />;
 }

src/app/[locale]/(default)/rules/(main)/page.tsx

@@ -1,28 +1,29 @@
 import { RuleCardList } from '@/components/rules/RuleCardList';
 import { rulesMockdata } from '@/mock-data/rules';
-import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
-import { Suspense } from 'react';
+import { getTranslations, setRequestLocale } from 'next-intl/server';
 
 export async function generateMetadata({
-  params: { locale },
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
+  const { locale } = await params;
+
   const t = await getTranslations({ locale, namespace: 'layout' });
+
   return {
     title: t('rules'),
   };
 }
 
-export default function RulesPage({
-  params: { locale },
+export default async function RulesPage({
+  params,
 }: {
-  params: { locale: string };
+  params: Promise<{ locale: string }>;
 }) {
-  unstable_setRequestLocale(locale);
-  return (
-    <>
-      <RuleCardList className='p4' rules={rulesMockdata} />
-    </>
-  );
+  const { locale } = await params;
+
+  setRequestLocale(locale);
+
+  return <RuleCardList rules={rulesMockdata} />;
 }

src/app/[locale]/(default)/rules/[subset]/page.tsx

@@ -1,13 +1,16 @@
 import { rulesMockdata } from '@/mock-data/rules';
-import { unstable_setRequestLocale } from 'next-intl/server';
+import { setRequestLocale } from 'next-intl/server';
 import { notFound } from 'next/navigation';
 
-export default function RuleSubSetPage({
-  params: { subset },
-}: { params: { subset: string } }) {
-  unstable_setRequestLocale(subset);
+export default async function RuleSubSetPage({
+  params,
+}: {
+  params: Promise<{ locale: string }>;
+}) {
+  const { locale } = await params;
+  setRequestLocale(locale);
   const page = rulesMockdata.find(
-    (rule) => rule.id === Number.parseInt(subset),
+    (rule) => rule.id === Number.parseInt(locale),
   );
   if (!page) return notFound();
   return <h1 className='text-center'>{page.title}</h1>;

src/components/rules/RuleCardList.tsx

@@ -19,14 +19,9 @@ function RuleCardList({ rules }: RuleCardListProps) {
   const isMember = true;
 
   return (
-    <div className='flex shrink flex-wrap justify-center md:flex-nowrap md:space-x-5'>
-      <div
-        className={cx(
-          'xs:w-full sm:w-full',
-          isMember ? ' md:w-1/2' : 'md:full mt-5',
-        )}
-      >
-        <h2 className={cx(isMember ? 'border-b-0 p-4 text-center' : 'hidden')}>
+    <div className='flex shrink flex-wrap justify-center p-4 md:flex-nowrap md:space-x-5'>
+      <div className={isMember ? ' md:w-1/2' : 'md:full mt-5'}>
+        <h2 className={isMember ? 'border-b-0 p-4 text-center' : 'hidden'}>
           {t('forEveryone')}
         </h2>
         {notInternal.map((rule) => (
@@ -40,7 +35,7 @@ function RuleCardList({ rules }: RuleCardListProps) {
           />
         ))}
       </div>
-      <div className={cx(isMember ? 'w-full md:w-1/2' : 'hidden')}>
+      <div className={isMember ? 'w-full md:w-1/2' : 'hidden'}>
         <h2 className='border-b-0 p-4 text-center'>{t('internal')}</h2>
         {internal.map((rule) => (
           <RuleCard