update/responsive home page and members page

src/app/(main)/(home)/components/news-content/NewsContent.tsx → src/app/(main)/(home)/components/card-news/index.tsx

@@ -3,16 +3,16 @@ import BASE_URL from '@/links'
 import dayjs from 'dayjs';
 import AppEditorContent from '@/components/shared/editor-content';
 
-function NewsContent({ news }: { news: NewsAdminItem }) {
+function CardNews({ news }: { news: NewsAdminItem }) {
   return (
     <a
       href={`${news.id}`}
-      className='flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3'
+      className='flex flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3'
     >
       <img
         src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
         alt={news.title}
-        className='w-full sm:w-[120px] h-20 object-cover rounded-sm'
+        className='w-[120px] h-20 object-cover rounded-sm'
       />
       <div className='flex-1'>
         <p className='text-[#0056b3] font-bold text-sm line-clamp-2'>
@@ -27,4 +27,4 @@ function NewsContent({ news }: { news: NewsAdminItem }) {
   );
 }
 
-export default NewsContent;
+export default CardNews;
\ No newline at end of file

src/app/(main)/(home)/components/news-content/index.tsx

-export { default } from './NewsContent';
\ No newline at end of file

src/app/(main)/hoi-vien/components/card-news/index.tsx

-
-import { NewsItem } from '@app/dai-dien-gioi-chu/lib/types/NewsPage.type';
-import Links from '@links/index'
+import { NewsAdminItem } from '@/api/types/news'
+import BASE_URL from '@/links'
 import dayjs from 'dayjs';
+import AppEditorContent from '@/components/shared/editor-content';
 import parse from 'html-react-parser'
-function NewsContent({ news }: { news: NewsItem }) {
 
+function CardNews({ news }: { news: NewsAdminItem }) {
   return (
     <a
-      href={`/tin-tuc/${news.id}`}
-      className="flex flex-col hover:no-underline sm:flex-row gap-2 mb-6 bg-white rounded-lg shadow-sm p-4 border items-start min-w-0"
+      href={`${news.id}`}
+      className="flex flex-col sm:flex-row gap-3 mb-3 border border-gray-200 bg-white rounded-md p-3 hover:shadow-md transition"
     >
       <img
-        src={`${Links.imageEndpoint}${news.thumbnail}`}
+        src={`${BASE_URL.imageEndpoint}${news.thumbnail}`}
         alt={news.title}
-        className="w-full sm:w-56 md:w-64 h-40 md:h-36 object-cover shrink-0"
+        className="w-full sm:w-40 h-40 sm:h-28 object-cover rounded-md"
       />
 
-      <div className="flex-1 min-w-0 pl-0 sm:pl-4">
-        <p className="text-primary font-semibold text-base md:text-lg hover:underline line-clamp-2 wrap-break-word hover:no-underline">
+      <div className="flex-1">
+        <p className="text-[#0056b3] font-bold text-sm sm:text-base line-clamp-2">
           {news.title}
         </p>
-
-        <div className="text-sm my-2 text-[#00AED5]">{dayjs(news.release_at).format('DD/MM/YYYY')}</div>
-
-        <div className="text-sm text-[#777] line-clamp-3">
-          <div className="text-sm prose tiptap">{parse(news.description)}</div>
+        <p className="text-gray-500 text-xs sm:text-sm my-1">
+          {dayjs(news.release_at).format('DD/MM/YYYY')}
+        </p>
+        <div className="text-xs sm:text-sm text-[#777] line-clamp-3 prose tiptap">
+          {parse(news.description)}
         </div>
       </div>
     </a>
-  )
+  );
 }
 
-export default NewsContent;
+export default CardNews;
\ No newline at end of file

src/app/(main)/hoi-vien/components/list-category/index.tsx

 "use client"
 
 import Link from "next/link"
-import { usePathname } from "next/navigation"
+import { usePathname, useRouter } from "next/navigation"
 import React from "react"
 
 type Category = {
@@ -18,17 +18,23 @@ const CATEGORIES: Category[] = [
 
 const ListCategory: React.FC = () => {
   const pathname = usePathname() || ""
+  const router = useRouter()
 
   const isActive = (href: string) => {
     if (href === "/hoi-vien") return pathname === "/hoi-vien"
     return pathname === href
   }
 
+  const handleChange = (e: React.ChangeEvent<HTMLSelectElement>) => {
+    router.push(e.target.value)
+  }
+
   return (
     <div className="border-t border-gray-200 bg-white p-2.5">
       <div className="max-w-7xl mx-auto">
         <nav aria-label="Danh mục" className="py-3">
-          <ul className="flex items-center">
+          {/* --- Desktop view --- */}
+          <ul className="hidden sm:flex items-center">
             {CATEGORIES.map((c) => {
               const active = isActive(c.href)
               return (
@@ -38,8 +44,8 @@ const ListCategory: React.FC = () => {
                     className={
                       "text-sm font-bold py-3.5 px-5 transition-colors duration-150 " +
                       (active
-                        ? "text-yellow-500 font-semibold decoration-yellow-300 "
-                        : "text-gray-600 hover:text-yellow-500 ")
+                        ? "text-yellow-500 font-semibold decoration-yellow-300"
+                        : "text-gray-600 hover:text-yellow-500")
                     }
                   >
                     {c.title}
@@ -48,10 +54,25 @@ const ListCategory: React.FC = () => {
               )
             })}
           </ul>
+
+          {/* --- Mobile view (Dropdown) --- */}
+          <div className="sm:hidden">
+            <select
+              value={pathname}
+              onChange={handleChange}
+              className="w-full border border-gray-300 rounded-md px-3 py-2 text-sm text-gray-700 focus:outline-none focus:ring-2 focus:ring-yellow-400"
+            >
+              {CATEGORIES.map((c) => (
+                <option key={c.href} value={c.href}>
+                  {c.title}
+                </option>
+              ))}
+            </select>
+          </div>
         </nav>
       </div>
     </div>
   )
 }
 
-export default ListCategory
+export default ListCategory
\ No newline at end of file

src/app/(main)/hoi-vien/ket-noi-hoi-vien/page.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import ListCategory from "./../components/list-category";
 import ListFilter from "./../components/list-filter";
-import NewsContent from "./../components/card-news";
+import CardNews from "./../components/card-news";
 import { Pagination } from '@components/base/pagination'
 import Image from "next/image";
 import { useGetNews } from '@api/endpoints/news'
@@ -27,7 +27,7 @@ export default function Page() {
 					<main className="lg:col-span-2 bg-background">
 						<div className='pb-5 overflow-hidden'>
 							{allData?.responseData.rows.map((news) => (
-								<NewsContent key={news.id} news={news} />
+								<CardNews key={news.id} news={news} />
 							))}
 
 							<div className='w-full flex justify-center mt-4'>

src/app/(main)/hoi-vien/tin-hoi-vien/page.tsx

@@ -2,7 +2,7 @@
 import React, { useState } from "react";
 import ListCategory from "./../components/list-category";
 import ListFilter from "./../components/list-filter";
-import NewsContent from "./../components/card-news";
+import CardNews from "./../components/card-news";
 import { Pagination } from '@components/base/pagination'
 import Image from "next/image";
 import { useGetNews } from '@api/endpoints/news'
@@ -27,7 +27,7 @@ export default function Page() {
 					<main className="lg:col-span-2 bg-background">
 						<div className='pb-5 overflow-hidden'>
 							{allData?.responseData.rows.map((news) => (
-								<NewsContent key={news.id} news={news} />
+								<CardNews key={news.id} news={news} />
 							))}
 
 							<div className='w-full flex justify-center mt-4'>