Creation date added to Play header

src/common/playlists/PlayHeaderInfo.jsx

@@ -1,9 +1,25 @@
 import { IoMdArrowBack } from 'react-icons/io';
 import { Link } from 'react-router-dom';
 import LevelBadge from 'common/components/LevelBadge';
+import { format } from 'date-fns';
+import * as allLocales from 'date-fns/locale';
+import { useState } from 'react';
 import { email2Slug } from 'common/services/string';
 
-const Author = ({ user }) => {
+const Author = ({ playCreatedAt, user }) => {
+  const [formattedPlayDate] = useState(() => {
+    // Get the locale from the local browser
+    const locale = navigator.language.split('-').join('');
+
+    // Get matching locale from date-fns
+    const dnsLocale = allLocales[locale] ?? allLocales.enUS;
+
+    // Return formatted date with the browser locale
+    return format(new Date(playCreatedAt), 'MMM dd, yyyy', {
+      locale: dnsLocale
+    });
+  });
+
   const getHostName = () => {
     var url = window.location.href;
     var arr = url.split('/');
@@ -13,16 +29,21 @@ const Author = ({ user }) => {
   };
 
   return (
-    <div className="header-author flex items-center gap-2">
+    <div className="flex items-center gap-2 header-author">
       <img alt="avatar" className="rounded-full" height="25px" src={user?.avatarUrl} width="25px" />
-      <a
-        className="play-anchor"
-        href={`${getHostName()}/contributors/${email2Slug(user.email)}/badges`}
-        rel="noopener noreferrer"
-        target="_blank"
-      >
-        <strong>{user?.displayName}</strong>
-      </a>
+      <div className="flex items-center gap-2">
+        <a
+          href={`${getHostName()}/contributors/${email2Slug(user.email)}/badges`}
+          rel="noopener noreferrer"
+          target="_blank"
+        >
+          <strong>{user?.displayName}</strong>
+        </a>
+        <span className="text-gray-400">&bull;</span>
+
+        {/* Formatted date goes here */}
+        <small className="m-0 font-medium text-left header-desc">{formattedPlayDate}</small>
+      </div>
     </div>
   );
 };
@@ -41,7 +62,7 @@ const Tags = ({ tags }) => {
 
 const PlayHeaderInfo = ({ play }) => {
   return (
-    <div className="header-leftcol overflow-hidden">
+    <div className="overflow-hidden header-leftcol">
       <div className="header-leftcol-action">
         <Link className="action" to="/plays">
           <IoMdArrowBack className="icon" size="24px" />
@@ -56,8 +77,10 @@ const PlayHeaderInfo = ({ play }) => {
             {!!play.play_tags.length && <Tags tags={play.play_tags} />}
           </div>
         </div>
-        <div className="header-secondary">
-          {play.user && <Author githubUsername={play.github} user={play.user} />}
+        <div className="mt-1 header-secondary">
+          {play.user && (
+            <Author githubUsername={play.github} playCreatedAt={play.created_at} user={play.user} />
+          )}
         </div>
       </div>
     </div>

src/common/playlists/playlist.css

@@ -414,10 +414,12 @@
 
 .play-details .play-details-header .header-secondary {
   display: flex;
-  flex-direction: row;
+  /* flex-direction: row; */
+  flex-direction: column;
   flex-wrap: wrap;
   grid-gap: 0.2rem 0.6rem;
-  align-items: center;
+  /* align-items: center; */
+  align-items: start;
 }
 
 @media screen and (max-width: 768px) {