Merge pull request #3 from quynh-linh/linhdev

Update code

.prettierrc

@@ -12,8 +12,8 @@
     "requirePragma": false,
     "semi": true,
     "singleQuote": true,
-    "tabWidth": 4,
+    "tabWidth": 2,
     "trailingComma": "all",
     "useTabs": false,
     "vueIndentScriptAndStyle": false
-}
+}

package.json

@@ -21,6 +21,7 @@
         "axios": "^1.7.2",
         "buffer": "^6.0.3",
         "classnames": "^2.5.1",
+        "clsx": "^2.1.1",
         "framer-motion": "^11.2.10",
         "intersection-observer": "^0.12.2",
         "keen-slider": "^6.8.6",
@@ -39,13 +40,16 @@
         "tippy.js": "^6.3.7"
     },
     "devDependencies": {
+        "@eslint/js": "^9.9.1",
+        "@types/eslint__js": "^8.42.3",
         "@types/node": "^20",
         "@types/react": "^18",
         "@types/react-dom": "^18",
-        "eslint": "^8",
+        "eslint": "^8.57.0",
         "eslint-config-next": "14.2.3",
         "postcss": "^8",
         "tailwindcss": "^3.4.1",
-        "typescript": "^5"
+        "typescript": "^5.5.4",
+        "typescript-eslint": "^8.2.0"
     }
 }

src/app/(page)/albums/page.tsx

@@ -3,7 +3,6 @@ import styles from '@/components/Albums/Albums.module.scss';
 import SlideMultipleItems from '@/components/Albums/Slider/Slider';
 import HeartLoader from '@/components/Loader/HeartLoader';
 import Timeline from '@/components/Timeline/Timeline';
-import { get } from '@/libs/axiosConfig';
 import { fetchDataMoments } from '@/libs/fetchData';
 import { useAppDispatch } from '@/libs/hook';
 import { findAllListImageByYears } from '@/redux/features/cloudinarySlice';

src/app/(page)/page.tsx

@@ -4,9 +4,8 @@ import classNames from 'classnames/bind';
 import styles from '@/components/Home/home.module.scss';
 import images from '@/assets/images';
 import Image from 'next/image';
-import { useEffect, useRef, useState } from 'react';
+import { useEffect, useState } from 'react';
 import { calculateTimeDifference } from '@/utils/calculateTimeDifference';
-import useIsInViewport from '@/hooks/useIsInViewport';
 import Title from '@/components/Text/Title';
 import ImageBanner from '@/components/Image/ImageBanner';
 import Albums from '@/components/Home/HomeAlbums/HomeAlbums';

src/components/ui/HtmlParser/HtmlParser.tsx

@@ -0,0 +1,26 @@
+'use client';
+
+import clsx from 'clsx';
+import React from 'react';
+
+interface HtmlParserProps extends React.HTMLAttributes<HTMLDivElement> {
+  className?: string;
+  data?: string;
+}
+
+export default function HtmlParser({ className, data, ...props }: HtmlParserProps) {
+  if (!data) return <></>;
+
+  return (
+    <div
+      className={clsx(
+        'prose-a:text-[#1381BE] prose-a:font-normal prose-a:no-underline prose-ul:list-disc prose-ul:text-justify',
+        className,
+      )}
+      {...props}
+      dangerouslySetInnerHTML={{
+        __html: data,
+      }}
+    />
+  );
+}

src/components/ui/Image/Image.tsx

@@ -0,0 +1,17 @@
+import ImageNext, { ImageProps as NextImageProps } from 'next/image';
+import React, { forwardRef } from 'react';
+
+// Extend the props from next/image and add any additional custom props if necessary
+interface ImageProps extends Omit<NextImageProps, 'ref'> {
+  src: string; // Ensure that `src` is a required string
+}
+
+// Create the component using forwardRef
+const Image = forwardRef<HTMLElement, ImageProps>(({ src, ...props }, ref) => {
+  return <ImageNext src={src} {...props} ref={ref as any} />;
+});
+
+// Set the display name for better debugging
+Image.displayName = 'Image';
+
+export default Image;

src/components/ui/Image/index.tsx

@@ -0,0 +1 @@
+export { default as Image } from './Image';

src/components/ui/ImageReponsive/index.tsx

@@ -0,0 +1,50 @@
+'use client';
+
+import clsx from 'clsx';
+import Image from '../Image/Image';
+
+interface ImageResponsiveProps {
+  desktop?: string;
+  mobile?: string;
+  className?: string;
+  classNameMobile?: string;
+  priority?: boolean;
+  [key: string]: any; // Additional props
+}
+
+export default function ImageResponsive({
+  desktop,
+  mobile,
+  className,
+  classNameMobile,
+  priority,
+  ...props
+}: ImageResponsiveProps) {
+  if (!desktop && !mobile) return <></>;
+
+  return (
+    <div>
+      {mobile || desktop ? (
+        <Image
+          className={clsx(classNameMobile, `!block lg:!hidden w-full h-full object-cover`)}
+          src={(mobile || desktop) || ''}
+          alt='Image'
+          fill
+          priority={priority}
+          {...props}
+        />
+      ) : null}
+
+      {desktop ? (
+        <Image
+          className={clsx(className, desktop && '!hidden lg:!block w-full h-full object-cover')}
+          src={desktop}
+          alt='Image'
+          fill
+          priority={priority}
+          {...props}
+        />
+      ) : null}
+    </div>
+  );
+}