Updata--เพิ่มปุ่มหมวดหมู่หน้ารายการอุปกรณ์

src/app/pages/equipment/equipment.component.html

@@ -4,7 +4,7 @@
             <div class="card">
                 <div class="card-body">
                     <div>
-                        <h4 class="nav justify-content-center ">รายการอุปกรณ์ที่ยืมได้</h4>
+                        <h4 class="nav justify-content-center ">รายการ</h4>
                     </div>
                 </div>
             </div>
@@ -14,37 +14,50 @@
     <div class="row">
         <div class="col-sm-12">
             <div class="card">
-                <div class="card" style="width: 18rem;">
-                    <div class="card-body">
-                        <img src="assets\img\mo1.jpg" class="card-img-top" alt="...">
-                        <div class="card-body">
-                            <h5 class="card-title">จอคอมพิวเตอร์</h5>
-                            <p class="card-text">รหัสอุปกรณ์ : 0001</p>
+                <div class="card-body">
+                    <div ngbDropdown class="d-inline-block">
+                        <button class="btn btn-outline-primary" id="dropdownBasic1" ngbDropdownToggle>หมวดหมู่</button>
+                        <div ngbDropdownMenu aria-labelledby="dropdownBasic1">
+                            <button ngbDropdownItem>ยืมอุปกรณ์</button>
+                            <button ngbDropdownItem>ยืมรถ</button>
+                            <button ngbDropdownItem>จองห้อง</button>
                         </div>
-                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                            <button class="btn btn-primary me-md-2" type="button">ยืนยัน</button>
-                            <button class="btn btn-primary" type="button">ยกเลิก</button>
+                    </div>
+                </div>
+                <div class="col-sm-6">
+                    <div class="card" style="width: 50rem;">
+                        <div class="mx-auto" style="width: 200px;">
+                            <img src="assets\img\mo1.jpg" class="nav justify-content-center" alt="...">
                         </div>
-
-                        <div class="row">
-                            <div class="col-sm-6">
-                                <div class="card" style="width: 18rem;">
-                                    <div class="card-body">
-                                        <img src="assets\img\notebook.jpg" class="card-img-top" alt="...">
-                                        <div class="card-body">
-                                            <h5 class="card-title">โน๊ตบุ๊ค</h5>
-                                            <p class="card-text">รหัสอุปกรณ์ : 0002</p>
-                                        </div>
-                                        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
-                                            <button class="btn btn-primary me-md-2" type="button">ยืนยัน</button>
-                                            <button class="btn btn-primary" type="button">ยกเลิก</button>
-                                        </div>
-                                    </div>
-                                </div>
-                            </div>
+                    </div>
+                    <nav aria-label="Page navigation example">
+                        <ul class="pagination justify-content-end">
+                            <li class="page-item disabled">
+                                <a class="page-link" href="#" tabindex="-1" aria-disabled="true">Back</a>
+                            </li>
+                            <li class="page-item"><a class="page-link" href="#">1</a></li>
+                            <li class="page-item"><a class="page-link" href="#">2</a></li>
+                            <li class="page-item"><a class="page-link" href="#">3</a></li>
+                            <li class="page-item"><a class="page-link" href="#">4</a></li>
+                            <li class="page-item"><a class="page-link" href="#">5</a></li>
+                            <li class="page-item">
+                                <a class="page-link" href="#">Next</a>
+                            </li>
+                        </ul>
+                    </nav>
+                </div>
+                <div class="col-sm-6">
+                    <div class=" card-body">
+                        <div class=" nav justify-content-center">
+                            <h4 class=" title">รายละเอียดอุปกรณ์</h4>
                         </div>
+                        <p class="card-text">....</p>
                     </div>
                 </div>
+                <div class="d-grid gap-2 a-md-flex justify-content-md-end">
+                    <button class="btn btn-primary" type="button">ยืม</button>
+                    <button class="btn btn-primary" type="button">ยกเลิก</button>
+                </div>
             </div>
         </div>
     </div>