init project

src/views/record/index.tsx

@@ -0,0 +1,99 @@
+import PageLayout from '@/components/layout'
+import {Link} from 'react-router-dom'
+import type {RecordButtonType} from "@/types";
+import {useState} from "react";
+import {cn} from "@/lib";
+
+function RecordPage() {
+
+    const mockData = [
+        {
+            date: '2025-03-04  10:20',
+            name: ' Bonus',
+            content: 'Daily Rebate 50',
+            status: 'Issued',
+            points: '800'
+        },
+        {
+            date: '2025-03-04  10:20',
+            name: ' Bonus',
+            content: 'Daily Rebate 50',
+            status: 'Issued',
+            points: '800'
+        },
+        {
+            date: '2025-03-04  10:20',
+            name: ' Bonus',
+            content: 'Daily Rebate 50',
+            status: 'Issued',
+            points: '800'
+        },
+        {
+            date: '2025-03-04  10:20',
+            name: ' Bonus',
+            content: 'Daily Rebate 50',
+            status: 'Issued',
+            points: '800'
+        }
+    ]
+
+    const [btnType, setBtnType] = useState<RecordButtonType>('record')
+
+
+    return (
+        <PageLayout contentClassName="min-h-screen">
+            <Link
+                to="/"
+                className={'relative text-[#F56E10] flex h-[40px] w-full items-center justify-center bg-[#08070E]/70'}
+            >
+                <div className={'absolute left-[16px]'}> &lt; </div>
+                <div>Record</div>
+            </Link>
+
+            <div className={'w-[60%] mx-auto'}>
+                <div>
+                    <div className={'flex gap-[10px] my-[15px]'}>
+                        <div
+                            className={cn('cursor-pointer text-[#B2ADAA] border-1 border-[#B2ADAA] rounded-[10px] p-[5px]', {
+                                'text-[#ffffff] bg-[#FA6A00]': btnType === 'order',
+                            })}
+                            onClick={() => setBtnType('order')}
+                        >My Orders
+                        </div>
+                        <div
+                            className={cn('cursor-pointer text-[#B2ADAA] border-1 border-[#B2ADAA] rounded-[10px] p-[5px]', {
+                                'text-[#ffffff] bg-[#FA6A00] border-[#FA6A00]': btnType === 'record',
+                            })}
+                            onClick={() => setBtnType('record')}
+                        >Points Record
+                        </div>
+                    </div>
+                    <hr className={'text-[#A4A4A4] border-[1px]'}></hr>
+                </div>
+                <div className={'flex flex-col mt-[10px]'}>
+                    {
+                        mockData.map((item, index) => (
+                            <div key={index} className={'flex flex-col my-[10px]'}>
+                                <div
+                                    className={'bg-linear-to-r from-[#F96C02] to-[#FE9F00] rounded-t-[10px] py-[5px] px-[10px]'}>{item.date} - {item.name}  </div>
+                                <div
+                                    className={'liquid-glass-bg !rounded-t-none px-[10px] py-[10px] pr-[20px] flex items-center justify-between'}>
+                                    <div className={'flex flex-col'}>
+                                        <div>{item.content}</div>
+                                        <div className={'text-[#FA6A00]'}>Check the Detail</div>
+                                    </div>
+                                    <div className={'flex flex-col items-end'}>
+                                        <div>{item.status}</div>
+                                        <div>{item.points}</div>
+                                    </div>
+                                </div>
+                            </div>
+                        ))
+                    }
+                </div>
+            </div>
+        </PageLayout>
+    )
+}
+
+export default RecordPage;