Price calculator -Livewire component create

app/Livewire/PriceCalculator.php

@@ -0,0 +1,31 @@
+<?php
+
+namespace App\Livewire;
+
+use Illuminate\View\View;
+use Livewire\Component;
+
+class PriceCalculator extends Component
+{
+    public $topic;
+    public $subject;
+    public $deadline;
+    public $wordCount;
+    public $isWords = true;
+    public $price = 0;
+
+    public function calculatePrice()
+    {
+        // Dummy price calculation logic
+        $ratePerWord = 0.10;
+        $ratePerPage = 5.00;
+        $this->price = $this->isWords
+            ? $this->wordCount * $ratePerWord
+            : $this->wordCount * $ratePerPage;
+    }
+
+    public function render(): View
+    {
+        return view('livewire.price-calculator');
+    }
+}

resources/views/dashboard.blade.php

@@ -1,4 +1,4 @@
-<div class="py-4">
+<div class="p-2 md:p-0 md:py-4">
     <x-slot name="header">
         <h2 class="text-gray-800 leading-tight">
             <i class="fas text-blue-500 fa-home"></i>
@@ -29,11 +29,13 @@ class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-
                     </div>
                 </div>
 
-                <div class="records text-black/80 p-2 mt-8">
-                    <span class="text-xl font-semibold">
-                        Recent Records
-                    </span>
-                </div>
+               <div class="flex flex-col md:flex-row gap-4 py-2 mt-12">
+                   <livewire:PriceCalculator />
+                   <div class="records text-black/80">
+                   </div>
+               </div>
+
+
             </div>
             <div class="md:w-1/3 md:absolute p-4 right-0 -top-8 bg-blue-500 md:h-[103vh]">
                 <div class="center mt-20">

resources/views/layouts/sidebar.blade.php

@@ -47,10 +47,10 @@
             </li>
         </ul>
 
-        <div class="flex bottom-8 md:bottom-20 absolute w-60 items-center justify-center p-2 md:w-full">
+        <div class="flex bottom-8 md:bottom-1 absolute w-60 items-center justify-center p-2 md:w-full">
             <form class="w-full" method="POST" action="{{ route('logout') }}">
                 @csrf
-                <button type="submit" class="btn text-red-600 btn-warning w-full">
+                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-semibold py-2 px-4 rounded-md w-full">
                     Logout
                     <i class="fas fa-lock"></i>
                 </button>

resources/views/livewire/price-calculator.blade.php

@@ -0,0 +1,40 @@
+<div class="bg-white p-6 relative text-black/80 rounded-lg shadow-lg">
+    <!-- About icon -->
+    <a href="#" class="absolute top-0 right-0 bg-blue-500 text-white p-2 rounded-bl-lg rounded-tr-lg hover:bg-blue-600">
+        <i class="fas h-6 w-6 center fa-info-circle"></i>
+    </a>
+    <h3 class="text-lg font-semibold mb-4 text-center">Calculate Order Price</h3>
+
+    <div class="mb-4">
+        <input type="text" wire:model="topic" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Topic">
+    </div>
+
+    <div class="mb-4">
+        <select wire:model="subject" class="w-full p-2 border border-gray-300 rounded-lg">
+            <option value="" disabled selected>Select Subject</option>
+            <option value="math">Math</option>
+            <option value="science">Science</option>
+            <option value="history">History</option>
+        </select>
+    </div>
+
+    <div class="mb-4">
+        <input type="date" wire:model="deadline" class="w-full p-2 border border-gray-300 rounded-lg" placeholder="Deadline">
+    </div>
+
+    <div class="mb-4 flex items-center">
+        <input type="number" wire:model="wordCount" class="flex-grow p-2 border border-gray-300 rounded-lg" placeholder="No of words">
+        <div class="ml-2 flex">
+            <button wire:click="$set('isWords', true)" class="px-4 py-2 border {{ $isWords ? 'bg-green-500 text-white border-green-500' : 'border-gray-300' }} rounded-l-lg">Words</button>
+            <button wire:click="$set('isWords', false)" class="px-4 py-2 border {{ !$isWords ? 'bg-green-500 text-white border-green-500' : 'border-gray-300' }} rounded-r-lg">Pages</button>
+        </div>
+    </div>
+
+    <div class="mb-4">
+        <p class="text-gray-700">Total Price: <span class="text-green-500">${{ number_format($price, 2) }}</span></p>
+    </div>
+
+    <button wire:click="calculatePrice" class="w-full py-2 bg-blue-500 text-white font-semibold rounded-lg">
+        Order Now
+    </button>
+</div>