refactor: updated news component names

src/app/[locale]/(dashboard)/news/page.tsx

@@ -4,8 +4,8 @@ import { getTranslations, unstable_setRequestLocale } from 'next-intl/server';
 
 import { Link } from '@/lib/navigation';
 
-import { NewsCardGridSuspense } from '@/components/news/NewsCardGridSuspense';
-import { NewsItemGridSuspense } from '@/components/news/NewsItemGridSuspense';
+import { CardGridSuspense } from '@/components/news/CardGridSuspense';
+import { ItemGridSuspense } from '@/components/news/ItemGridSuspense';
 import { Button } from '@/components/ui/Button';
 import { Separator } from '@/components/ui/Separator';
 
@@ -204,14 +204,14 @@ export default function News({
           </Link>
         </Button>
       </div>
-      <NewsCardGridSuspense
+      <CardGridSuspense
         newsData={mockData}
         t={{
           internalArticle: t('internalArticle'),
         }}
       />
       <Separator className='my-6' />
-      <NewsItemGridSuspense
+      <ItemGridSuspense
         newsData={mockData}
         t={{
           morePages: useTranslations('ui')('morePages'),

src/components/news/NewsCard.tsx → src/components/news/ArticleCard.tsx

@@ -12,7 +12,7 @@ import {
   CardTitle,
 } from '@/components/ui/Card';
 
-type NewsCardProps = {
+type ArticleCardProps = {
   className?: string;
   id: number;
   internal: boolean;
@@ -24,15 +24,15 @@ type NewsCardProps = {
   };
 };
 
-function NewsCard({
+function ArticleCard({
   className,
   id,
   internal,
   title,
   date,
   photoUrl,
   t,
-}: NewsCardProps) {
+}: ArticleCardProps) {
   return (
     <Button
       className={cx('group whitespace-normal font-normal', className)}
@@ -68,4 +68,4 @@ function NewsCard({
   );
 }
 
-export { NewsCard };
+export { ArticleCard };

src/components/news/NewsItem.tsx → src/components/news/ArticleItem.tsx

@@ -6,7 +6,7 @@ import { cx } from '@/lib/utils';
 import { InternalBadge } from '@/components/news/InternalBadge';
 import { Button } from '@/components/ui/Button';
 
-type NewsCardProps = {
+type ArticleItemProps = {
   className?: string;
   id: number;
   internal: boolean;
@@ -18,15 +18,15 @@ type NewsCardProps = {
   };
 };
 
-function NewsItem({
+function ArticleItem({
   className,
   id,
   internal,
   title,
   date,
   photoUrl,
   t,
-}: NewsCardProps) {
+}: ArticleItemProps) {
   return (
     <Button
       className={cx('group block whitespace-normal font-normal', className)}
@@ -64,4 +64,4 @@ function NewsItem({
   );
 }
 
-export { NewsItem };
+export { ArticleItem };

src/components/news/NewsItemSkeleton.tsx → src/components/news/ArticleItemSkeleton.tsx

@@ -1,6 +1,6 @@
 import { Skeleton } from '@/components/ui/Skeleton';
 
-function NewsItemSkeleton() {
+function ArticleItemSkeleton() {
   return (
     <div className='flex gap-4 overflow-hidden rounded-lg'>
       <div className='relative h-28 w-28 flex-shrink-0'>
@@ -14,4 +14,4 @@ function NewsItemSkeleton() {
   );
 }
 
-export { NewsItemSkeleton };
+export { ArticleItemSkeleton };

src/components/news/NewsCardGrid.tsx → src/components/news/CardGrid.tsx

@@ -1,8 +1,8 @@
 import { cx } from '@/lib/utils';
 
-import { NewsCard } from '@/components/news/NewsCard';
+import { ArticleCard } from '@/components/news/ArticleCard';
 
-type NewsCardGridProps = {
+type CardGridProps = {
   newsData: {
     id: number;
     internal: boolean;
@@ -15,11 +15,11 @@ type NewsCardGridProps = {
   };
 };
 
-function NewsCardGrid({ newsData, t }: NewsCardGridProps) {
+function CardGrid({ newsData, t }: CardGridProps) {
   return (
     <div className='grid h-192 grid-rows-4 gap-4 xs:h-96 xs:grid-cols-3 xs:grid-rows-2 md:grid-cols-4 lg:h-112'>
       {newsData.slice(0, 4).map((data, index) => (
-        <NewsCard
+        <ArticleCard
           className={cx(
             index === 0 && 'row-span-1 xs:col-span-2 md:row-span-2',
             index === 1 && 'col-span-1 row-span-1 md:col-span-2',
@@ -40,4 +40,4 @@ function NewsCardGrid({ newsData, t }: NewsCardGridProps) {
   );
 }
 
-export { NewsCardGrid, type NewsCardGridProps };
+export { CardGrid, type CardGridProps };

src/components/news/NewsCardGridSuspense.tsx → src/components/news/CardGridSuspense.tsx

@@ -2,13 +2,10 @@ import * as React from 'react';
 
 import { cx } from '@/lib/utils';
 
-import {
-  NewsCardGrid,
-  type NewsCardGridProps,
-} from '@/components/news/NewsCardGrid';
+import { CardGrid, type CardGridProps } from '@/components/news/CardGrid';
 import { Skeleton } from '@/components/ui/Skeleton';
 
-function NewsCardGridSuspense({ ...props }: NewsCardGridProps) {
+function CardGridSuspense({ ...props }: CardGridProps) {
   return (
     <React.Suspense
       fallback={
@@ -27,9 +24,9 @@ function NewsCardGridSuspense({ ...props }: NewsCardGridProps) {
         </div>
       }
     >
-      <NewsCardGrid {...props} />
+      <CardGrid {...props} />
     </React.Suspense>
   );
 }
 
-export { NewsCardGridSuspense };
+export { CardGridSuspense };

src/components/news/NewsItemGrid.tsx → src/components/news/ItemGrid.tsx

@@ -3,9 +3,9 @@
 import { parseAsInteger, useQueryState } from 'nuqs';
 
 import { PaginationCarousel } from '@/components/layout/PaginationCarousel';
-import { NewsItem } from '@/components/news/NewsItem';
+import { ArticleItem } from '@/components/news/ArticleItem';
 
-type NewsItemGridProps = {
+type ItemGridProps = {
   newsData: {
     id: number;
     internal: boolean;
@@ -24,7 +24,7 @@ type NewsItemGridProps = {
   };
 };
 
-function NewsItemGrid({ newsData, t }: NewsItemGridProps) {
+function ItemGrid({ newsData, t }: ItemGridProps) {
   const itemsDisplayedAsCards = 4;
   const itemsPerPage = 6;
   const [page, setPage] = useQueryState(t.page, parseAsInteger.withDefault(1));
@@ -41,7 +41,7 @@ function NewsItemGrid({ newsData, t }: NewsItemGridProps) {
     <>
       <div className='grid min-h-[752px] grid-cols-1 gap-4 sm:min-h-[368px] sm:grid-cols-2 lg:min-h-[240px] lg:grid-cols-3'>
         {currentData.map((data) => (
-          <NewsItem
+          <ArticleItem
             key={data.id}
             id={data.id}
             internal={data.internal}
@@ -65,4 +65,4 @@ function NewsItemGrid({ newsData, t }: NewsItemGridProps) {
   );
 }
 
-export { NewsItemGrid, type NewsItemGridProps };
+export { ItemGrid, type ItemGridProps };

src/components/news/NewsItemGridSuspense.tsx → src/components/news/ItemGridSuspense.tsx

@@ -1,29 +1,26 @@
 import * as React from 'react';
 
 import { PaginationCarouselSkeleton } from '@/components/layout/PaginationCarouselSkeleton';
-import {
-  NewsItemGrid,
-  type NewsItemGridProps,
-} from '@/components/news/NewsItemGrid';
-import { NewsItemSkeleton } from '@/components/news/NewsItemSkeleton';
+import { ArticleItemSkeleton } from '@/components/news/ArticleItemSkeleton';
+import { ItemGrid, type ItemGridProps } from '@/components/news/ItemGrid';
 
-function NewsItemGridSuspense({ ...props }: NewsItemGridProps) {
+function ItemGridSuspense({ ...props }: ItemGridProps) {
   return (
     <React.Suspense
       fallback={
         <>
           <div className='grid min-h-[752px] grid-cols-1 gap-4 sm:min-h-[368px] sm:grid-cols-2 lg:min-h-[240px] lg:grid-cols-3'>
             {Array.from({ length: 6 }).map((_, index) => (
-              <NewsItemSkeleton key={index} />
+              <ArticleItemSkeleton key={index} />
             ))}
           </div>
           <PaginationCarouselSkeleton className='my-6' t={props.t} />
         </>
       }
     >
-      <NewsItemGrid {...props} />
+      <ItemGrid {...props} />
     </React.Suspense>
   );
 }
 
-export { NewsItemGridSuspense };
+export { ItemGridSuspense };