blogs and single blog

src/app/blogs/[id]/page.tsx

@@ -0,0 +1,130 @@
+import Image from 'next/image'
+import { Calendar, Eye, User } from 'iconsax-react'
+import LastPost from '../components/LastPost'
+import { NextPage } from 'next'
+import withLayout from '@/hoc/withLayout'
+
+const BlogDetail: NextPage = () => {
+    return (
+        <div className="max-w-7xl mx-auto px-4 py-8">
+            {/* Breadcrumb */}
+            <div className="text-sm text-gray-500 mb-6">
+                فروشگاه سندس طلا / راهنما ها / تست اقلام و قطعات / گلکسی بوک
+            </div>
+
+            <div className="flex gap-8">
+                {/* Main Content */}
+                <div className="flex-1">
+                    {/* Blog Header */}
+                    <div className="mb-8">
+                        <div className="bg-orange-100 text-orange-600 px-3 py-1 rounded text-sm inline-block mb-4">
+                            اخبار
+                        </div>
+
+                        <h1 className="text-2xl font-bold text-gray-900 mb-4 leading-relaxed">
+                            مشخصات گلکسی بوک 3 پرو و اولترا پیش از رونمایی فاش شد
+                        </h1>
+
+                        <div className="flex items-center gap-6 text-gray-500 text-sm">
+                            <div className="flex items-center gap-2">
+                                <User size={16} color="#9CA3AF" />
+                                <span>نویسنده: حمید ضرغامی</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Calendar size={16} color="#9CA3AF" />
+                                <span>چهارشنبه 15 آذر 1401 ساعت 15:30</span>
+                            </div>
+                            <div className="flex items-center gap-2">
+                                <Eye size={16} color="#9CA3AF" />
+                                <span>1,234 بازدید</span>
+                            </div>
+                        </div>
+                    </div>
+
+                    {/* Featured Image */}
+                    <div className="mb-8">
+                        <Image
+                            src="https://images.unsplash.com/photo-1496181133206-80ce9b88a853?w=1200&h=600&fit=crop"
+                            alt="Samsung Galaxy Book3 Ultra"
+                            width={1200}
+                            height={600}
+                            className="w-full h-[400px] object-cover rounded-lg"
+                        />
+                    </div>
+
+                    {/* Blog Content */}
+                    <div className="prose prose-lg max-w-none text-gray-800 leading-8">
+                        <p className="text-lg leading-8 mb-6">
+                            گلکسی بوک 3 اولترا قوی‌ترین عضو این خانواده خواهد بود که با پردازنده نسل سیزدهم اینتل Core i9-13900H، حداکثر 32 گیگابایت رم LPDDR5 و 1 ترابایت حافظه داخلی NVMe PCIe Gen 4 از آن می‌رسد. این دستگاه همچنین می‌تواند به حداکثر گرافیک RTX 4070 اویدیا مجهز شود.
+                        </p>
+
+                        <h2 className="text-xl font-bold mt-8 mb-4">گلکسی بوک 3 پرو</h2>
+
+                        <p className="mb-6 leading-8">
+                            گلکسی بوک 3 پرو در دو اندازه 14 و 16 اینچی عرضه می‌شود که هر دو از نوع اموled با روزنمایی 3K خواهند بود. این لپ‌تاپ قرار است از پردازنده نسل سیزدهم اینتل Core i7-1360P و Core i5-1340P برخوردار شود؛ به‌همراه حداکثر 1 ترابایت حافظه DDR5 رم و 16 گیگابایت استفاده کند 16 گیگابایت رم.
+                        </p>
+
+                        <div className="bg-gray-50 p-6 rounded-lg mb-6">
+                            <h3 className="font-bold text-lg mb-4">مشخصات فنی کلیدی:</h3>
+                            <ul className="space-y-2">
+                                <li>• پردازنده: Intel Core i9-13900H (نسل سیزدهم)</li>
+                                <li>• رم: تا 32 گیگابایت LPDDR5</li>
+                                <li>• حافظه: 1 ترابایت NVMe PCIe Gen 4</li>
+                                <li>• کارت گرافیک: RTX 4070</li>
+                                <li>• صفحه نمایش: OLED با کیفیت 3K</li>
+                                <li>• سیستم عامل: Windows 11</li>
+                            </ul>
+                        </div>
+
+                        <p className="mb-6 leading-8">
+                            این لپ‌تاپ برای کاربران حرفه‌ای طراحی شده که نیاز به قدرت پردازشی بالا برای کارهای گرافیکی، ویرایش ویدئو و بازی دارند. طراحی زیبا و ساخت با کیفیت سامسونگ، آن را به گزینه‌ای جذاب برای کسانی تبدیل می‌کند که به دنبال ترکیب عملکرد و زیبایی هستند.
+                        </p>
+
+                        <h2 className="text-xl font-bold mt-8 mb-4">نتیجه گیری</h2>
+
+                        <p className="mb-6 leading-8">
+                            سامسونگ با ارائه گلکسی بوک 3 سری، قصد دارد جایگاه خود را در بازار لپ‌تاپ‌های پریمیوم تقویت کند. این محصولات با ترکیب سخت‌افزار قدرتمند و طراحی شیک، می‌توانند رقیبی جدی برای سایر برندهای معتبر باشند.
+                        </p>
+                    </div>
+
+                    {/* Tags */}
+                    <div className="mt-8 pt-6 border-t border-gray-200">
+                        <div className="flex items-center gap-2 flex-wrap">
+                            <span className="text-gray-600 font-medium">برچسب‌ها:</span>
+                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">سامسونگ</span>
+                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">گلکسی بوک</span>
+                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">لپ‌تاپ</span>
+                            <span className="bg-blue-100 text-blue-600 px-3 py-1 rounded-full text-sm">OLED</span>
+                        </div>
+                    </div>
+
+                    {/* Share Section */}
+                    <div className="mt-6 pt-6 border-t border-gray-200">
+                        <div className="flex items-center justify-between">
+                            <div className="flex items-center gap-4">
+                                <span className="text-gray-600 font-medium">اشتراک‌گذاری:</span>
+                                <button className="flex items-center gap-2 bg-blue-600 text-white px-4 py-2 rounded-lg hover:bg-blue-700 transition-colors">
+                                    <span>تلگرام</span>
+                                </button>
+                                <button className="flex items-center gap-2 bg-green-600 text-white px-4 py-2 rounded-lg hover:bg-green-700 transition-colors">
+                                    <span>واتساپ</span>
+                                </button>
+                            </div>
+                            <button className="flex items-center gap-2 text-gray-600 hover:text-red-500 transition-colors">
+                                <span>♥</span>
+                                <span>پسندیدن</span>
+                            </button>
+                        </div>
+                    </div>
+                </div>
+
+                {/* Sidebar */}
+                <div className="w-80 space-y-8">
+                    <LastPost />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(BlogDetail)

src/app/blogs/components/BlogItem.tsx

@@ -0,0 +1,37 @@
+import { PRIMARY_COLOR } from '@/config/const'
+import { ArrowLeft } from 'iconsax-react'
+import Image from 'next/image'
+import React from 'react'
+
+const BlogItem = () => {
+    return (
+        <div className='flex-1 flex gap-6'>
+            <Image
+                width={200}
+                height={160}
+                src={'https://picsum.photos/200/160'}
+                className='max-w-[200px] max-h-[160px] object-contain'
+                alt='blog'
+            />
+
+            <div>
+                <h6 className='font-bold'>
+                    سامسونگ اولین لپ‌تاپ OLED یکپارچه را معرفی می‌کند
+                </h6>
+
+                <p className='mt-4 text-sm line-clamp-2 text-[#7F7F7F] leading-7'>
+                    لپ تاپ گلکسی بوک 3 سامسونگ دارای یک پنل OLED خواهد بود که در آن از فناوری سلولی استفاده می‌شود و حسگرها مستقیماً در نمایشگر قرار می‌گیرند تا صفحه لمسی نازک‌تر و سبک‌تری داشته باشد.
+                </p>
+
+                <div className='flex mt-4 text-primary gap-1.5 items-center text-sm cursor-pointer'>
+                    <div className='text-sm'>
+                        ادامه مطلب
+                    </div>
+                    <ArrowLeft size={18} color={PRIMARY_COLOR} />
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default BlogItem

src/app/blogs/components/Categories.tsx

@@ -0,0 +1,28 @@
+import { FC } from 'react'
+
+const Categories: FC = () => {
+    return (
+        <div className='max-w-[292px] w-full'>
+            <div className='h-20 bg-primary rounded-[10px] flex items-center px-4 text-white text-lg'>
+                دسته بندی مطالب
+            </div>
+
+            <div className='flex flex-col gap-3 mt-4'>
+                <div className='h-14 bg-[#F8F8F8] rounded-[10px] px-4 flex items-center justify-between'>
+                    <div className='font-medium text-[#8C8C8C]'>موبایل</div>
+                    <div className='size-3 rounded-full bg-[#D9D9D9]'></div>
+                </div>
+                <div className='h-14 bg-[#F8F8F8] rounded-[10px] px-4 flex items-center justify-between'>
+                    <div className='font-medium text-[#8C8C8C]'>موبایل</div>
+                    <div className='size-3 rounded-full bg-[#D9D9D9]'></div>
+                </div>
+                <div className='h-14 bg-[#F8F8F8] rounded-[10px] px-4 flex items-center justify-between'>
+                    <div className='font-medium text-[#8C8C8C]'>موبایل</div>
+                    <div className='size-3 rounded-full bg-[#D9D9D9]'></div>
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Categories

src/app/blogs/components/LastPost.tsx

@@ -0,0 +1,17 @@
+import { FC } from 'react'
+import MiniBlogItem from './MiniBlogItem'
+
+const LastPost: FC = () => {
+    return (
+        <div>
+            <div className='font-bold text-lg'>
+                آخرین پست ها و مطالب
+            </div>
+
+            <MiniBlogItem />
+            <MiniBlogItem />
+        </div>
+    )
+}
+
+export default LastPost

src/app/blogs/components/MiniBlogItem.tsx

@@ -0,0 +1,28 @@
+import Image from 'next/image'
+import React from 'react'
+
+const MiniBlogItem = () => {
+    return (
+        <div className='flex gap-4 mt-6'>
+            <Image
+                width={123}
+                height={123}
+                src={'https://picsum.photos/123/123'}
+                alt='last post'
+                className='max-w-[100px] max-h-[100px] object-contain'
+            />
+
+            <div>
+                <h6 className='text-sm font-bold'>
+                    رندرهای گلکسی M54 5G
+                </h6>
+
+                <p className='mt-3 text-xs text-[#7F7F7F]'>
+                    طبق رندرها، گلکسی M54 5G فاقد ماژول دوربین است و سنسورهای دوربین هر....
+                </p>
+            </div>
+        </div>
+    )
+}
+
+export default MiniBlogItem

src/app/blogs/page.tsx

@@ -0,0 +1,24 @@
+import { NextPage } from 'next'
+import Categories from './components/Categories'
+import withLayout from '@/hoc/withLayout'
+import BlogItem from './components/BlogItem'
+import LastPost from './components/LastPost'
+
+const BlogsPage: NextPage = () => {
+    return (
+        <div className='flex gap-24 p-10'>
+            <Categories />
+            <div className='flex-1 flex flex-col gap-6'>
+                <BlogItem />
+                <BlogItem />
+                <BlogItem />
+                <BlogItem />
+            </div>
+            <div className='max-w-[340px] w-full'>
+                <LastPost />
+            </div>
+        </div>
+    )
+}
+
+export default withLayout(BlogsPage)

src/config/const.ts

@@ -2,3 +2,5 @@ export const TOKEN_NAME = "sh_token";
 export const REFRESH_TOKEN_NAME = "sh_refresh_token";
 // export const BASE_URL = "https://api.shinan.ir";
 export const BASE_URL = "https://api-sondos.run.danakcorp.com";
+
+export const PRIMARY_COLOR = "#015699";