From dbd37310a725556a109d16ba9285c346d74be2d5 Mon Sep 17 00:00:00 2001 From: taha Date: Mon, 10 Feb 2025 16:51:52 +0330 Subject: [PATCH 1/6] market darkmode --- .gitignore | 3 + src/app/market/page.tsx | 124 ++++++++++++++++++++++++++++++++++++++++ 2 files changed, 127 insertions(+) create mode 100644 src/app/market/page.tsx diff --git a/.gitignore b/.gitignore index 5ef6a52..e2764f9 100644 --- a/.gitignore +++ b/.gitignore @@ -39,3 +39,6 @@ yarn-error.log* # typescript *.tsbuildinfo next-env.d.ts + +# clerk configuration (can include secrets) +/.clerk/ diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx new file mode 100644 index 0000000..45dcafe --- /dev/null +++ b/src/app/market/page.tsx @@ -0,0 +1,124 @@ +"use client" +import { useEffect, useState, useRef } from 'react'; +import axios from 'axios'; +import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; +import { Header } from 'antd/es/layout/layout'; + +interface CryptoData { + id: string; + name: string; + symbol: string; + current_price: number; + market_cap: number; + total_volume: number; + price_change_percentage_24h: number; + image: string; +} + +const Home = () => { + const [cryptoData, setCryptoData] = useState([]); + const [searchTerm, setSearchTerm] = useState(''); + const [minPrice, setMinPrice] = useState(''); + const [maxPrice, setMaxPrice] = useState(''); + const [loading, setLoading] = useState(true); + const [sortOption, setSortOption] = useState('current_price'); // مرتب‌سازی بر اساس market cap به صورت پیش‌فرض + + const fetchCryptoData = async () => { + setLoading(true); + try { + const response = await axios.get('https://api.coingecko.com/api/v3/coins/markets', { + params: { + vs_currency: 'usd', + order: sortOption, // مرتب‌سازی بر اساس sortOption + per_page: 1000, + page: 1, + sparkline: false, + }, + }); + setCryptoData(response.data); + } catch (error) { + console.error('Error fetching data:', error); + } finally { + setLoading(false); + } + }; + + useEffect(() => { + fetchCryptoData(); + const interval = setInterval(fetchCryptoData, 30000); // هر 30 ثانیه داده‌ها به‌روز شوند + return () => clearInterval(interval); + }, [sortOption]); + + const formatPrice = (price: number): string => { + return price < 1 ? price.toFixed(8) : price.toFixed(2); + }; + + const filteredData = cryptoData.filter(crypto => { + const matchesSearchTerm = crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) || + crypto.symbol.toLowerCase().includes(searchTerm.toLowerCase()); + const matchesMinPrice = minPrice ? crypto.current_price >= parseFloat(minPrice) : true; + const matchesMaxPrice = maxPrice ? crypto.current_price <= parseFloat(maxPrice) : true; + return matchesSearchTerm && matchesMinPrice && matchesMaxPrice; + }); + + + return ( +
+ {/* جستجو */} +
+
+ setSearchTerm(e.target.value)} + placeholder="Search by name or symbol..." + className="w-full px-4 py-3 pl-12 rounded-xl + dark:bg-white/5 bg-white + dark:text-white text-gray-900 + dark:border-white/10 border-gray-200 border + focus:outline-none focus:ring-2 focus:ring-[#1890ff] + placeholder:dark:text-gray-500 placeholder:text-gray-400 + transition-all duration-200"/> + +
+
+ {/* نمایش جدول */} + + + + + + + + + + + + + {filteredData.length === 0 ? ( + + + + ) : ( + filteredData.map(crypto => ( + + + + + + + + + )) + )} + +
IconNamePriceMarket Cap24h Volume24h Change
No results found ☹️
{crypto.name} + {crypto.name} + {formatPrice(crypto.current_price)}${crypto.market_cap.toLocaleString()}${crypto.total_volume.toLocaleString()}$ + {crypto.price_change_percentage_24h.toFixed(2)}% +
+
+ ); +}; + +export default Home; From 6d0d48a59c20964ba134a8c39354c4e24e192ee4 Mon Sep 17 00:00:00 2001 From: taha Date: Mon, 10 Feb 2025 16:56:40 +0330 Subject: [PATCH 2/6] fix bog --- src/app/market/page.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx index 45dcafe..b7c5812 100644 --- a/src/app/market/page.tsx +++ b/src/app/market/page.tsx @@ -96,8 +96,8 @@ const Home = () => { {filteredData.length === 0 ? ( - - No results found ☹️ + + No results found ☹️ ) : ( filteredData.map(crypto => ( From a4a308a87f0d61a140f02d8998ef3a2736cbcb39 Mon Sep 17 00:00:00 2001 From: taha Date: Mon, 10 Feb 2025 19:24:04 +0330 Subject: [PATCH 3/6] design market --- src/app/market/page.tsx | 33 ++++++++++++++------------------- 1 file changed, 14 insertions(+), 19 deletions(-) diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx index b7c5812..571e90d 100644 --- a/src/app/market/page.tsx +++ b/src/app/market/page.tsx @@ -49,9 +49,6 @@ const Home = () => { return () => clearInterval(interval); }, [sortOption]); - const formatPrice = (price: number): string => { - return price < 1 ? price.toFixed(8) : price.toFixed(2); - }; const filteredData = cryptoData.filter(crypto => { const matchesSearchTerm = crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) || @@ -66,7 +63,7 @@ const Home = () => {
{/* جستجو */}
-
+
{ - - - - - - + + + + + + @@ -101,15 +98,13 @@ const Home = () => { ) : ( filteredData.map(crypto => ( - - - - - - - + + + + + + From 73690c9c753b74abfae4976299328722c9eec9bc Mon Sep 17 00:00:00 2001 From: taha Date: Mon, 10 Feb 2025 22:37:28 +0330 Subject: [PATCH 4/6] change design --- src/app/market/page.tsx | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx index 571e90d..47a30fe 100644 --- a/src/app/market/page.tsx +++ b/src/app/market/page.tsx @@ -81,14 +81,14 @@ const Home = () => { {/* نمایش جدول */}
IconNamePriceMarket Cap24h Volume24h ChangeIconNamePriceMarket Cap24h Volume24h Change
{crypto.name} - {crypto.name} - {formatPrice(crypto.current_price)}${crypto.market_cap.toLocaleString()}${crypto.total_volume.toLocaleString()}$ +
{crypto.name} {crypto.name} ${crypto.current_price}${crypto.market_cap.toLocaleString()}${crypto.total_volume.toLocaleString()} {crypto.price_change_percentage_24h.toFixed(2)}%
- + - - - - - - + + + + + + From 95cdc69d83a6e988254ad11b00b64155916353e1 Mon Sep 17 00:00:00 2001 From: taha Date: Tue, 11 Feb 2025 23:12:46 +0330 Subject: [PATCH 5/6] design --- src/app/market/page.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx index 47a30fe..da04991 100644 --- a/src/app/market/page.tsx +++ b/src/app/market/page.tsx @@ -80,7 +80,7 @@ const Home = () => { {/* نمایش جدول */} -
IconNamePriceMarket Cap24h Volume24h ChangeIconNamePriceMarket Cap24h Volume24h Change
+
@@ -117,3 +117,5 @@ const Home = () => { }; export default Home; + + From 2b1c02ad0a848f23929a807ef24ebe72eb56fc82 Mon Sep 17 00:00:00 2001 From: taha Date: Wed, 12 Feb 2025 17:19:15 +0330 Subject: [PATCH 6/6] loading --- src/app/market/page.tsx | 86 ++++++++++++++++++++++----------- src/app/market/style.module.css | 20 ++++++++ 2 files changed, 79 insertions(+), 27 deletions(-) create mode 100644 src/app/market/style.module.css diff --git a/src/app/market/page.tsx b/src/app/market/page.tsx index 47a30fe..e9e0b0d 100644 --- a/src/app/market/page.tsx +++ b/src/app/market/page.tsx @@ -2,7 +2,7 @@ import { useEffect, useState, useRef } from 'react'; import axios from 'axios'; import { MagnifyingGlassIcon } from '@heroicons/react/24/outline'; -import { Header } from 'antd/es/layout/layout'; +import style from './style.module.css'; interface CryptoData { id: string; @@ -16,20 +16,21 @@ interface CryptoData { } const Home = () => { - const [cryptoData, setCryptoData] = useState([]); + const [cryptoData, setCryptoData] = useState([]); const [searchTerm, setSearchTerm] = useState(''); const [minPrice, setMinPrice] = useState(''); const [maxPrice, setMaxPrice] = useState(''); const [loading, setLoading] = useState(true); - const [sortOption, setSortOption] = useState('current_price'); // مرتب‌سازی بر اساس market cap به صورت پیش‌فرض + const [sortOption, setSortOption] = useState(''); + const widgetRef = useRef(null); const fetchCryptoData = async () => { - setLoading(true); + setLoading(true); // شروع بارگذاری داده‌ها try { const response = await axios.get('https://api.coingecko.com/api/v3/coins/markets', { params: { vs_currency: 'usd', - order: sortOption, // مرتب‌سازی بر اساس sortOption + order: sortOption, per_page: 1000, page: 1, sparkline: false, @@ -39,25 +40,45 @@ const Home = () => { } catch (error) { console.error('Error fetching data:', error); } finally { - setLoading(false); + setLoading(false); // پایان بارگذاری داده‌ها } }; useEffect(() => { fetchCryptoData(); - const interval = setInterval(fetchCryptoData, 30000); // هر 30 ثانیه داده‌ها به‌روز شوند - return () => clearInterval(interval); + const interval = setInterval(fetchCryptoData, 30000); // هر ۵ ثانیه به‌روز شود + + return () => clearInterval(interval); // پاک کردن interval هنگام unmount }, [sortOption]); + const formatPrice = (price: number): string => { + return price < 1 ? price.toFixed(8) : price.toFixed(2); + }; const filteredData = cryptoData.filter(crypto => { const matchesSearchTerm = crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) || crypto.symbol.toLowerCase().includes(searchTerm.toLowerCase()); const matchesMinPrice = minPrice ? crypto.current_price >= parseFloat(minPrice) : true; const matchesMaxPrice = maxPrice ? crypto.current_price <= parseFloat(maxPrice) : true; + return matchesSearchTerm && matchesMinPrice && matchesMaxPrice; }); + // useEffect(() => { + // fetchCryptoData(); + // const interval = setInterval(fetchCryptoData, 30000); // هر 30 ثانیه داده‌ها به‌روز شوند + // return () => clearInterval(interval); + // }, [sortOption]); + + + // const filteredData = cryptoData.filter(crypto => { + // const matchesSearchTerm = crypto.name.toLowerCase().includes(searchTerm.toLowerCase()) || + // crypto.symbol.toLowerCase().includes(searchTerm.toLowerCase()); + // const matchesMinPrice = minPrice ? crypto.current_price >= parseFloat(minPrice) : true; + // const matchesMaxPrice = maxPrice ? crypto.current_price <= parseFloat(maxPrice) : true; + // return matchesSearchTerm && matchesMinPrice && matchesMaxPrice; + // }); + return (
@@ -91,27 +112,38 @@ const Home = () => {
- - {filteredData.length === 0 ? ( - - + {loading ? ( + + + - ) : ( - filteredData.map(crypto => ( - - - - - - - - - )) - )} - + + ) : ( + + { + filteredData.length === 0 ? ( + + + + ) : ( + filteredData.map(crypto => ( + + + + + + + + + )) + ) + } + + )}
Icon24h Change
No results found ☹️

loading
{crypto.name} {crypto.name} ${crypto.current_price}${crypto.market_cap.toLocaleString()}${crypto.total_volume.toLocaleString()} - {crypto.price_change_percentage_24h.toFixed(2)}% -
No results found ☹️
{crypto.name} {crypto.name} ${crypto.current_price}${crypto.market_cap.toLocaleString()}${crypto.total_volume.toLocaleString()} + {crypto.price_change_percentage_24h.toFixed(2)}% +
+
); }; diff --git a/src/app/market/style.module.css b/src/app/market/style.module.css new file mode 100644 index 0000000..1d66260 --- /dev/null +++ b/src/app/market/style.module.css @@ -0,0 +1,20 @@ +.loader { + width: 24px; + height: 24px; + border: 5px solid #FFF; + border-bottom-color: transparent; + border-radius: 50%; + display: inline-block; + box-sizing: border-box; + animation: rotation 1s linear infinite; + } + + @keyframes rotation { + 0% { + transform: rotate(0deg); + } + 100% { + transform: rotate(360deg); + } + } + \ No newline at end of file