add avaialbe date dashboard

searching-front/app/core/pages/State/State.tsx

@@ -126,10 +126,17 @@ const State = ({
               wide
               title="Open tonsite"
             >
-              {getDomainFromUrl(i.address)}
+              <div className={s.newestListItemLeftContent}>
-              <Button className={s.siteButton} theme="primary">
+                {getDomainFromUrl(i.address)}
-                .ton
+                <Button className={s.siteButton} theme="primary">
-              </Button>
+                  .ton
+                </Button>
+              </div>
+
+              <div className={s.newestListItemLeftDate}>
+                {i.firstAvailableDate &&
+                  format(new Date(i.firstAvailableDate), "d MMMM").toLowerCase()}
+              </div>
             </Link>
 
             {i.walletAddress && i.tonBalance && (

searching-front/app/core/pages/State/styles.module.css

@@ -142,8 +142,25 @@
 
 .newestListItemLeft {
   position: relative;
-  padding: 24px 0 24px 34px;
+  padding: 24px 0 16px 34px;
   flex: 1 1 70%;
+
+}
+
+.newestListItemLeft a {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+}
+
+.newestListItemLeftContent {
+  
+}
+.newestListItemLeftDate {
+  font-weight: 400;
+  font-size: 12px;
+  line-height: 15px;
+  opacity: 32%;
 }
 
 .newestListItemRight {
@@ -194,6 +211,9 @@
     padding: 24px 34px;
     justify-content: center;
   }
+  .newestListItemLeft{
+    padding-bottom: 16px;
+  }
   .newestListItemRight {
     text-align: left;