nshop-front-m/src/app/(public)/paymentresult/_components/SuccessPageSkeleton.tsx

export default function SuccessPageSkeleton() { 
    return (
        <div className="w-full animate-pulse px-0">

            <div className="w-full">
                <div className="box-border px-4 w-full">
                    <div className="w-12 h-12 mx-auto mt-9 bg-gray-300"></div>
                    <p className="text-ly-16 text-center mt-6">
                        <span className="text-gray-300 bg-gray-300">Your Order Has Been Received</span>
                    </p>
                    <p className="text-ly-16 mt-4 flex justify-center">
                        <span className="px-3.75 leading-ly-28 text-gray-300 bg-gray-300">Order #600000000</span>
                    </p>
                    <p className="text-ly-12 text-center mt-4 leading-ly-22">
                        <span className="text-gray-300 bg-gray-300">Hello, lala</span>
                    </p>
                    <p className="text-ly-12 text-center leading-ly-22">
                        <span className="text-gray-300 bg-gray-300">Thank you so much for your order!</span>
                    </p>
                    <p className="text-ly-12 text-center leading-ly-22">
                        <span className="text-gray-300 bg-gray-300">We’ll get started on your order very soon!</span>
                    </p>
                    <p className="text-ly-12 text-center leading-ly-22">
                        <span className="text-gray-300 bg-gray-300">You’ll receive an order confirmation email with details of your order in an hour, please be sure to check your email and confirm your order, that is very important for us to process your order.</span>
                    </p>
                    <div className="mt-6 flex justify-center items-center h-12 border-1 rounded-3xl text-ly-14">
                        <span className="text-gray-300 bg-gray-300">Continue Shopping</span>
                    </div>
                </div>
                <div className="box-border px-4 w-full mt-6">
                    <div className="relative w-full bg-ly-lightgray box-border p-3">
                        <button className="absolute top-3 right-3 w-6 h-6 bg-gray-300"></button>
                        <p className="text-ly-13"><span className="text-gray-300 bg-gray-300">Faqs</span></p>
                        <p className="text-ly-12 text-[#a6a6a6] mt-2">
                            <span className="text-gray-300 bg-gray-300">Pls contact customer service if need any help</span>
                        </p>
                    </div>
                </div>
                <div className="box-border px-4 w-full mt-6">
                    <h4 className="text-ly-24 font-medium">
                        <span className="text-gray-300 bg-gray-300">Order Information</span>
                    </h4>
                    <div className="mt-6 flex justify-between">
                        <div className="text-ly-12 flex-none text-gray-300 bg-gray-300">Ship to:</div>
                        <div className="w-40.5 text-ly-12 leading-ly-20 flex-none text-gray-300 bg-gray-300">
                            Alessandro  6263378809
                        </div>
                    </div>
                    <div className="mt-6 flex justify-between">
                        <div className="text-ly-12 flex-none text-gray-300 bg-gray-300">Order number:</div>
                        <div className="w-40.5 text-ly-12 leading-ly-20 flex-none text-gray-300 bg-gray-300">
                            600465290
                        </div>
                    </div>
                    <div className="mt-6 flex justify-between">
                        <div className="text-ly-12 flex-none text-gray-300 bg-gray-300">Status:</div>
                        <div className="w-40.5 text-ly-12 leading-ly-20 flex-none text-gray-300 bg-gray-300">
                            Processing
                        </div>
                    </div>
                    <div className="mt-6 flex justify-between">
                        <div className="text-ly-12 flex-none text-gray-300 bg-gray-300">Order date:</div>
                        <div className="w-40.5 text-ly-12 leading-ly-20 flex-none text-gray-300 bg-gray-300">
                            September 24,2020
                        </div>
                    </div>
                    <div className="mt-6 flex justify-between">
                        <div className="text-ly-12 flex-none text-gray-300 bg-gray-300">Shipping method:</div>
                        <div className="w-40.5 text-ly-12 leading-ly-20 flex-none text-gray-300 bg-gray-300">
                            Same day delivery
                        </div>
                    </div>
                    <div className="mt-6 flex justify-between">
                        <div className="text-ly-12 flex-none text-gray-300 bg-gray-300">Payment method:</div>
                        <div className="w-40.5 text-ly-12 leading-ly-20 flex-none text-gray-300 bg-gray-300">
                            Paypal-express
                        </div>
                    </div>

                </div>

                {/* <div className="box-border px-4 w-full mt-6">
                    <div className="w-full flex gap-2 pb-4 border-b-1 border-[#f0f0f0] last:border-0 last:pb-0">
                        <div className="relative w-33 h-44 flex-none">
                            <Image fill src="https://cdn.alipearlhair.com/media/catalog/product/2/_/2_104_20.jpg" alt="logo" />
                        </div>
                        <div className="flex-none w-50.75 flex flex-col justify-between">
                            <div>
                                <p className="text-ly-12 leading-ly-20 line-clamp-2">
                                    Deep Wave Wig 100% Human Hair Deep Wave Wig 100% Human Hair  100% Human Hair
                                </p>
                                <p className="mt-2 text-ly-12 leading-ly-20 text-ly-placeholder">14/4*4 HD Lace/150%</p>
                            </div>
                            <div className="flex justify-between">
                                <p className="text-ly-14 leading-ly-20 font-bold">$10.00</p>
                                <p className="text-ly-12 leading-ly-20">x 1</p>
                            </div>
                        </div>
                    </div>
                </div> */}

                {/* <div className="box-border px-4 w-full mt-6 pt-6 border-t-1 border-black">
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Subtotal</p>
                        <p className="text-ly-12 leading-ly-20">0.00</p>
                    </div>
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">Shipping Method</p>
                        <p className="text-ly-12 leading-ly-20">0.00</p>
                    </div>
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-12 leading-ly-20">You Earn</p>
                        <p className="text-ly-12 leading-ly-20">600 Reward Points</p>
                    </div>
                    <div className="flex justify-between mt-3 first:mt-0">
                        <p className="text-ly-16 leading-ly-24">Total</p>
                        <p className="text-ly-16 leading-ly-24 font-bold">0.00</p>
                    </div>
                </div> */}
            </div>
        </div>
    );
}