Make deadline color red when the deadline is exceeded

pbteja1998 · pbteja1998 · commit 715d0b8b3f3c · 2021-02-28T10:44:49.000+05:30
diff --git a/src/components/goals/GoalMeta.tsx b/src/components/goals/GoalMeta.tsx
@@ -2,6 +2,7 @@ import { User } from 'src/pages/members'
 import { Avatar } from '@/ui'
 import { DateTime } from 'luxon'
 import { A } from '@/components'
+import classNames from 'classnames'
 
 export default function GoalMeta({
   className = '',
@@ -104,7 +105,12 @@ export default function GoalMeta({
           </ul>
           <div className="flex items-center space-x-2 mt-5">
             <svg
-              className="h-5 w-5 text-gray-400"
+              className={classNames(
+                'h-5 w-5',
+                deadline.diffNow('days').days > 0
+                  ? 'text-gray-400'
+                  : 'text-danger-500'
+              )}
               data-todo-x-description="Heroicon name: solid/calendar"
               xmlns="http://www.w3.org/2000/svg"
               viewBox="0 0 20 20"
@@ -117,7 +123,14 @@ export default function GoalMeta({
                 clipRule="evenodd"
               ></path>
             </svg>
-            <span className="text-gray-900 text-sm font-medium">
+            <span
+              className={classNames(
+                'text-sm font-medium',
+                deadline.diffNow('days').days > 0
+                  ? 'text-gray-900'
+                  : 'text-danger-500'
+              )}
+            >
               Deadline on{' '}
               <time dateTime={createdAt.toISO()}>
                 {deadline.toLocaleString(DateTime.DATE_FULL)}
diff --git a/src/components/profile/Profile.tsx b/src/components/profile/Profile.tsx
@@ -14,7 +14,7 @@ import useFollowUser from './useFollowUser'
 import { useSession } from 'next-auth/client'
 
 export default function Profile({ user }: { user: User }) {
-  const [session] = useSession()
+  const [session, loading] = useSession()
   const {
     shouldShowFollowButton,
     isFollowing: isFollowingData,
@@ -45,7 +45,7 @@ export default function Profile({ user }: { user: User }) {
         <div className="sm:flex sm:items-center sm:justify-between">
           <div className="sm:flex sm:space-x-5 sm:items-center">
             <div className="flex-shrink-0">
-              <A href={`/${(session.user as User).username}`}>
+              <A href={user.username}>
                 <img
                   className="mx-auto h-20 w-20 rounded-full"
                   src={user.image}
