feat(c new component): add new component

BREAKING CHANGE: Fixed the Article Card

fix #41

public/.env

@@ -0,0 +1,7 @@
+NEXT_PUBLIC_FIREBASE_APIKEY="AIzaSyAawWqqd56S9jaiZgGb909EWJiaGPpNH9I"
+NEXT_PUBLIC_FIREBASE_AUTHDOMAIN="recoded-capstone-39843.firebaseapp.com"
+NEXT_PUBLIC_FIREBASE_PROJECTID="recoded-capstone-39843"
+NEXT_PUBLIC_FIREBASE_STORAGEBUCKET="recoded-capstone-39843.appspot.com"
+NEXT_PUBLIC_FIREBASE_MESSAGINGSENDERID="964676619740"
+NEXT_PUBLIC_FIREBASE_APPID="1:964676619740:web:0a34622e06b361e9565319"
+NEXT_PUBLIC_FIREBASE_MEASUREMENTID="G-BEL1FTRGY3"

src/components/ArticleCard.jsx

@@ -0,0 +1,24 @@
+import React from "react";
+import Image from "next/image";
+
+const ArticleCard = ({ title, location, date, content, imageUrl }) => {
+    return (
+        <div className='max-w-xs rounded overflow-hidden shadow-lg article-card'>
+            <Image
+                width={500}
+                height={500}
+                src='next.svg'
+                alt='avatar'
+                className='w-full'
+            />
+            <div className='px-6 py-4'>
+                <h2 className='font-bold text-xl mb-2'>title</h2>
+                <p className='text-sm'>location</p>
+                <p className='text-sm text-gray-600'>date</p>
+                <p className='text-base text-gray-700 mt-2'>content</p>
+            </div>
+        </div>
+    );
+};
+
+export default ArticleCard;