blog card image display adjusted

src/components/Cards/ResourceBlogCard.jsx

@@ -23,17 +23,19 @@ export default function ProductCardStyleTwo({
   
   return (
     <div
-      className={`card-style-two w-full h-[336px] p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
+      className={`card-style-two w-full p-[20px] bg-white dark:bg-dark-white   rounded-2xl section-shadow ${
         className || ""
       }`}
     >
       <div className="flex flex-col justify-between w-full h-full">
         <div className="thumbnail-area w-full">
           <div
-            className="w-full h-[236px] p-6  rounded-xl overflow-hidden"
+            className="w-full h-[140px] p-6  rounded-lg overflow-hidden"
             style={{
               // background: `url(${`https://blog.wrenchboard.com/wp-content/uploads/${datas.meta_value}`}) 0% 0% / cover no-repeat`,
-            background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              // background: `url(${`${bg}${datas.meta_value}`}) 0% 0% / cover no-repeat`,
+              background: `url(${`${bg}${datas.meta_value}`}) no-repeat`,
+              backgroundSize: '100%',
             }}
           >
             <div className="product-two-options flex justify-between mb-5 relative">
@@ -50,7 +52,7 @@ export default function ProductCardStyleTwo({
         </div>
         <div className="details-area">
           {/* title */}
-          <Link to={`/blog-page?blog_id=${datas.ID}`} className="mb-2.5" rel="noreferrer">
+          <Link to={`/blog-page?blog_id=${datas.ID}`} className="py-2 mb-2.5" rel="noreferrer">
             <h1 className="font-bold text-xl tracking-wide line-clamp-1 text-dark-gray dark:text-white capitalize">
               {datas.post_title || "dummy title..."}
             </h1>

src/components/MyWallet/walletvirtual/VirtualAddCardPopout.jsx

@@ -14,8 +14,8 @@ const validationSchema = Yup.object().shape({
   country: Yup.string()
     .required("Required"),
   phone_number: Yup.string()
-    .min(9, "Min 9 characters")
+    .min(9, "Invalid")
-    .max(11, "Max 11 characters")
+    .max(11, "Invalid")
     .required("Required"),
   // birthYear: Yup.string()
   //   .required("Required"),
@@ -177,8 +177,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
         onSubmit={handleSubmit}
       >
         {(props) => (
-          <Form className="w-full overflow-y-auto">
+          <div className="logout-modal-wrapper mx-auto w-[90%] md:w-[768px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl overflow-y-auto">
-            <div className="logout-modal-wrapper mx-auto w-[90%] lg:w-[900px] h-auto bg-white dark:bg-dark-white lg:rounded-2xl">
+            <Form className="w-full">
               <div className="modal-header-con">
                 <h1 className="modal-title">
                   {walletItem?.description}
@@ -209,12 +209,15 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                   </svg>
                 </button>
               </div>
-              <div className="p-4 w-full grid lg:grid-cols-2 gap-4">
+              <div className='p-4 w-full flex flex-col h-auto md:h-[28rem]'>
+                <div className='pb-4'>
+                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
+                </div>
+                <div className="grid md:grid-cols-2 gap-4">
                   {/* left part */}
                   <div className='w-full flex flex-col gap-4'>
-                  <h1 className='text-lg md:text-xl flex gap-1'><span className='font-bold'>Name:</span>{userDetails.lastname} {userDetails.firstname}</h1>
+                    <div className="field w-full grid md:grid-cols-5 gap-4">
-                  <div className="field w-full grid md:grid-cols-3 gap-4">
+                        <div className="md:col-span-2 field w-full">
-                      <div className="md:col-span-1 field w-full">
                           <label
                             htmlFor="country"
                             className="job-label job-label-flex"
@@ -256,7 +259,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                             }
                           </select>
                         </div>
-                      <div className='md:col-span-2'>
+                        <div className='md:col-span-3'>
                           <InputCom
                           fieldClass="px-6"
                           label="Phone Number"
@@ -312,9 +315,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                         error={(props.errors.lastname && props.touched.lastname) && props.errors.lastname}
                       />
                     </div>
-                  <div className="field w-full flex flex-col gap-4">
+
-                      <p className='hidden job-label'>Date of Birth</p>
+                    {/* hidden section */}
-                      <div className='hidden xxs:grid-cols-3 gap-4'>
+                    <div className="hidden field w-full flex-col gap-4">
+                        <p className='job-label'>Date of Birth</p>
+                        <div className='xxs:grid-cols-3 gap-4'>
                           <div className="field w-full">
                             <label
                               htmlFor="birthDay"
@@ -409,11 +414,15 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                             </select>
                           </div>
                         </div>
-                      <div className=''>
+                    </div>
+
+                    <div className="field w-full grid md:grid-cols-3 gap-4">
+                      <p className='hidden md:flex w-full md:col-span-1 job-label items-center'>Date of Birth</p>
+                      <div className='w-full md:col-span-2 '>
                         <InputCom
                           fieldClass="px-6"
                           label="Date of Birth"
-                        labelClass="tracking-wide"
+                          labelClass="md:hidden tracking-wide"
                           inputBg="bg-slate-100"
                           inputClass="input-curve lg border border-light-purple"
                           type="date"
@@ -425,12 +434,11 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                           minDate={year[year?.length - 1] + '-01-01'}
                         />
                       </div>
-
                     </div>
                   </div>
 
                   {/* right part */}
-                <div className='p-4 w-full flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
+                  <div className='w-full p-4 flex flex-col gap-4 bg-blue-200 dark:bg-slate-900 rounded-2xl'>
                     <InputCom
                       fieldClass="px-6"
                       label="Address"
@@ -526,6 +534,7 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                     </div>
                   </div>
                 </div>
+              </div>
               {requestStatus.message &&
               <div className='px-4 my-1'>
                 <p className={`text-center text-base py-1 font-bold ${requestStatus.status ? 'bg-emerald-600 text-white' : 'bg-red-100 text-red-600'}`}>{requestStatus.message}</p>
@@ -556,8 +565,8 @@ const VirtualAddCardPopout = ({ details, onClose, situation, walletItem }) => {
                       </>
                   </div>
               </div>
-            </div>
             </Form>
+          </div>
         )}
       </Formik>
     </ModalCom>

src/components/Resources/index.jsx

@@ -24,10 +24,11 @@ export default function Resources(props) {
   const ownProducts = products.datas;
   // Resource Props
   const __resources = props.MyResourceData;
+
   //debugger;
   // Collection Items
   const CreatedSell = __resources?.marketdata?.data;
-  const tab_categories = __resources?.tab_categories?.data;
+  const tab_categories = __resources?.tab_categories?.data?.sort((a, b) => b.name.localeCompare(a.name))
   const collectionProducts = __resources?.collectiondata?.data;
   const onSaleProducts = __resources?.marketdata?.data;
   const CreatedBits = __resources?.productdata?.datas;
@@ -77,23 +78,22 @@ export default function Resources(props) {
     }
   };
 
-  useEffect(() => {
-    getUploadedFiles();
-  }, [uploadsTable]);
-
   // const [tab, setTab] = useState(tab_categories ? tab_categories[0]?.name : "");
   const [tab, setTab] = useState(
     props.activeTab
       ? props.activeTab
-      : tab_categories
+      : "onsale"
-      ? tab_categories[0]?.name
-      : ""
   );
 
   const tabHandler = (value) => {
     setTab(value);
   };
 
+  useEffect(() => {
+    getUploadedFiles();
+  }, [uploadsTable]);
+
+
   // Category Components
   const tabComponents = {
     blog: <BlogTab blogdata={blogItems} />,