commit ecc6a26512cceb869d2ac8b4763d9dc78fa14a5b · indexx.dev/static

+26 -53

public/style.css

···

       1
        
       /* ---------------------------------------------------

     

       2
        
         VARIABLES & PROPERTIES

     

       3
        
       --------------------------------------------------- */

     

       4
       -
       @import url("https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

     

       5
        
       

     

       6
        
       :root {

     

       7
        
         --line: transparent;

     

       8
        
         --line-active: #ffffff;

     

       9
        
         --bg-gradient: linear-gradient(

     

       10
        
           45deg,

     

       11
       -
           rgb(0, 59, 74),

     

       12
        
           rgb(0, 35, 44),

     

       13
        
           rgb(0, 29, 36)

     

       14
        
         );

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       15
        
       }

     

       16
        
       

     

       17
        
       @property --animatedBorder {

     
···

       28
        
         font-family: "Nunito Sans", sans-serif;

     

       29
        
         width: 100%;

     

       30
        
         height: 100%;

     

       31
       -
         background: var(--bg-gradient);

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       32
        
       }

     

       33
        
       

     

       34
        
       a {

     
···

       70
        
       h1 {

     

       71
        
         color: #fff;

     

       72
        
         margin-bottom: 0;

     

       73
       -
         font-weight: 1000;

     

       0
        
       
     

       0
        
       
     

       74
        
         font-size: 4rem;

     

       75
        
       }

     

       76
        
       

     
···

       85
        
       }

     

       86
        
       

     

       87
        
       /* ---------------------------------------------------

     

       88
       -
         CIRCLE HOVER LINK

     

       89
       -
       --------------------------------------------------- */

     

       90
       -
       .circle-hover {

     

       91
       -
         display: inline-block;

     

       92
       -
         position: relative;

     

       93
       -
         margin: 0 var(--spacing, 0px);

     

       94
       -
         flex: 1;

     

       95
       -
         min-width: 0;

     

       96
       -
         transition: margin 0.25s;

     

       97
       -
       }

     

       98
       -
       

     

       99
       -
       .circle-hover:hover {

     

       100
       -
         --spacing: 4px;

     

       101
       -
         --stroke: var(--line-active);

     

       102
       -
         --stroke-delay: 0.1s;

     

       103
       -
         --offset: 180px;

     

       104
       -
         color: #fff !important;

     

       105
       -
       }

     

       106
       -
       

     

       107
       -
       .circle-hover svg {

     

       108
       -
         width: 76px;

     

       109
       -
         height: 40px;

     

       110
       -
         position: absolute;

     

       111
       -
         left: 50%;

     

       112
       -
         bottom: 0;

     

       113
       -
         transform: translate(-50%, 7px) translateZ(0);

     

       114
       -
         fill: none;

     

       115
       -
         stroke: var(--stroke, var(--line));

     

       116
       -
         stroke-linecap: round;

     

       117
       -
         stroke-width: 2px;

     

       118
       -
         stroke-dasharray: var(--offset, 69px) 278px;

     

       119
       -
         stroke-dashoffset: 361px;

     

       120
       -
         transition: stroke 0.25s ease var(--stroke-delay, 0s), stroke-dasharray 0.35s;

     

       121
       -
       }

     

       122
       -
       

     

       123
       -
       /* ---------------------------------------------------

     

       124
        
         PROJECTS SIDE PANE

     

       125
        
       --------------------------------------------------- */

     

       126
        
       #projects-pane {

     
···

       167
        
       #now-playing {

     

       168
        
         position: fixed;

     

       169
        
         bottom: 20px;

     

       170
       -
         left: 50%;

     

       171
       -
         transform: translateX(-50%);

     

       172
        
         display: flex;

     

       173
        
         align-items: center;

     

       174
        
         gap: 12px;

     

       175
        
         padding: 8px;

     

       176
       -
         background-color: rgba(8, 61, 74, 0.42);

     

       177
        
         border-radius: 8px;

     

       178
        
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

     

       179
       -
         color: #000;

     

       180
       -
         text-align: right;

     

       181
        
         text-decoration: none;

     

       182
       -
         max-width: 400px;

     

       183
       -
         min-width: 300px;

     

       184
       -
         outline: 2px solid #0000001a;

     

       185
       -
         outline-offset: 5px;

     

       186
        
         transition: opacity 0.2s, left 0.5s ease;

     

       187
       -
       }

     

       188
       -
       

     

       189
       -
       body:has(main#page.side) #now-playing {

     

       190
       -
         left: 35%;

     

       191
        
       }

     

       192
        
       

     

       193
        
       #now-playing img {

···

       1
        
       /* ---------------------------------------------------

     

       2
        
         VARIABLES & PROPERTIES

     

       3
        
       --------------------------------------------------- */

     

       4
       +
       @import url("https://fonts.googleapis.com/css2?family=Jua&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap");

     

       5
        
       

     

       6
        
       :root {

     

       7
        
         --line: transparent;

     

       8
        
         --line-active: #ffffff;

     

       9
        
         --bg-gradient: linear-gradient(

     

       10
        
           45deg,

     

       11
       +
           rgb(0, 29, 36),

     

       12
        
           rgb(0, 35, 44),

     

       13
        
           rgb(0, 29, 36)

     

       14
        
         );

     

       15
       +
         --ring-center-x: 50%;

     

       16
       +
         --ring-pattern: repeating-radial-gradient(

     

       17
       +
           circle at var(--ring-center-x) center,

     

       18
       +
           transparent 0px,

     

       19
       +
           transparent 113px,

     

       20
       +
           rgba(0, 27, 34, 0.3) 203px,

     

       21
       +
           rgba(0, 74, 92, 0.136) 206px

     

       22
       +
         );

     

       23
       +
       

     

       24
       +
         transition: --ring-center-x 0.5s ease;

     

       25
        
       }

     

       26
        
       

     

       27
        
       @property --animatedBorder {

     
···

       38
        
         font-family: "Nunito Sans", sans-serif;

     

       39
        
         width: 100%;

     

       40
        
         height: 100%;

     

       41
       +
         background: var(--ring-pattern), var(--bg-gradient);

     

       42
       +
         background-blend-mode: normal;

     

       43
       +
       }

     

       44
       +
       

     

       45
       +
       :root:has(main#page.side) {

     

       46
       +
         --ring-center-x: 35%;

     

       47
        
       }

     

       48
        
       

     

       49
        
       a {

     
···

       85
        
       h1 {

     

       86
        
         color: #fff;

     

       87
        
         margin-bottom: 0;

     

       88
       +
         font-family: "Jua", sans-serif;

     

       89
       +
         font-weight: 400;

     

       90
       +
         font-style: normal;

     

       91
        
         font-size: 4rem;

     

       92
        
       }

     

       93
        
       

     
···

       102
        
       }

     

       103
        
       

     

       104
        
       /* ---------------------------------------------------

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       105
        
         PROJECTS SIDE PANE

     

       106
        
       --------------------------------------------------- */

     

       107
        
       #projects-pane {

     
···

       148
        
       #now-playing {

     

       149
        
         position: fixed;

     

       150
        
         bottom: 20px;

     

       151
       +
         left: 20px;

     

       0
        
       
     

       152
        
         display: flex;

     

       153
        
         align-items: center;

     

       154
        
         gap: 12px;

     

       155
        
         padding: 8px;

     

       156
       +
         background-color: rgba(0, 0, 0, 0.271);

     

       157
        
         border-radius: 8px;

     

       158
        
         box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);

     

       159
       +
         color: #fff;

     

       160
       +
         text-align: left;

     

       161
        
         text-decoration: none;

     

       162
       +
         width: 300px;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       163
        
         transition: opacity 0.2s, left 0.5s ease;

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       164
        
       }

     

       165
        
       

     

       166
        
       #now-playing img {

+1 -14

src/assets/crown.svg

···

       1
       -
       <svg

     

       2
       -
         width="24"

     

       3
       -
         height="24"

     

       4
       -
         viewBox="0 0 24 24"

     

       5
       -
         fill="none"

     

       6
       -
         xmlns="http://www.w3.org/2000/svg"

     

       7
       -
       >

     

       8
       -
         <path

     

       9
       -
           fill-rule="evenodd"

     

       10
       -
           clip-rule="evenodd"

     

       11
       -
           d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"

     

       12
       -
           fill="currentColor"

     

       13
       -
         />

     

       14
       -
       </svg>

···

       1
       +
       <svg xmlns="http://www.w3.org/2000/svg" width="512" height="512" viewBox="0 0 24 24"><path fill="#ffd700" d="M5 16L3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"/></svg>
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0

+64

src/components/AudioVisualizer.jsx

···

       1
       +
       import React from "react";

     

       2
       +
       

     

       3
       +
       const BAR_COUNT = 15;

     

       4
       +
       const BAR_ANIMATION_DELAYS = [

     

       5
       +
         "0.3s",

     

       6
       +
         "0.7s",

     

       7
       +
         "0.1s",

     

       8
       +
         "0.9s",

     

       9
       +
         "0.4s",

     

       10
       +
         "0.2s",

     

       11
       +
         "0.8s",

     

       12
       +
         "0.5s",

     

       13
       +
         "0s",

     

       14
       +
         "0.6s",

     

       15
       +
         "0.3s",

     

       16
       +
         "0.9s",

     

       17
       +
         "0.1s",

     

       18
       +
         "0.7s",

     

       19
       +
         "0.4s",

     

       20
       +
       ];

     

       21
       +
       

     

       22
       +
       export default function AudioVisualizer() {

     

       23
       +
         return (

     

       24
       +
           <div className="visualizer">

     

       25
       +
             {Array(BAR_COUNT).fill(0).map((_, index) => (

     

       26
       +
               <div

     

       27
       +
                 key={index}

     

       28
       +
                 className="bar"

     

       29
       +
                 style={{ animationDelay: BAR_ANIMATION_DELAYS[index] }}

     

       30
       +
               >

     

       31
       +
               </div>

     

       32
       +
             ))}

     

       33
       +
       

     

       34
       +
             <style jsx>

     

       35
       +
               {`

     

       36
       +
               .visualizer {

     

       37
       +
                 display: flex;

     

       38
       +
                 align-items: center;

     

       39
       +
                 gap: 1px;

     

       40
       +
                 height: 50px;

     

       41
       +
               }

     

       42
       +
       

     

       43
       +
               .bar {

     

       44
       +
                 width: 2px;

     

       45
       +
                 background: linear-gradient(to top, #1b1bff, #8585fe, #1b1bff);

     

       46
       +
                 border-radius: 1px;

     

       47
       +
                 animation: wave 2.5s ease-in-out infinite; 

     

       48
       +
               }

     

       49
       +
               

     

       50
       +
               @keyframes wave {

     

       51
       +
                 0%, 100% {

     

       52
       +
                   /* Start/End Height */

     

       53
       +
                   height: 5px; 

     

       54
       +
                 }

     

       55
       +
                 50% {

     

       56
       +
                   /* Peak Height */

     

       57
       +
                   height: 30px; 

     

       58
       +
                 }

     

       59
       +
               }

     

       60
       +
             `}

     

       61
       +
             </style>

     

       62
       +
           </div>

     

       63
       +
         );

     

       64
       +
       }

+9 -9

src/components/Header.astro

···

       1
        
       <section id="header">

     

       2
        
         <h1 class="animated-border unselectable spin">

     

       3
        
           <svg

     

       0
        
       
     

       4
        
             width="24"

     

       5
        
             height="24"

     

       6
        
             viewBox="0 0 24 24"

     

       7
       -
             fill="none"

     

       8
       -
             xmlns="http://www.w3.org/2000/svg"

     

       9
       -
             style="position: absolute; top: -5px; margin-left: -2px; transform: rotate(-10deg); color: gold;"

     

       0
        
       
     

       0
        
       
     

       10
        
           >

     

       11
       -
             <path

     

       12
       -
               fill-rule="evenodd"

     

       13
       -
               clip-rule="evenodd"

     

       14
       -
               d="M2.5 6.09143L7.21997 10.8114L12.0005 6.03088L16.7811 10.8114L21.5 6.09245V14.9691C21.5 16.626 20.1569 17.9691 18.5 17.9691H5.5C3.84314 17.9691 2.5 16.626 2.5 14.9691V6.09143ZM19.5 10.9087V14.9691C19.5 15.5214 19.0523 15.9691 18.5 15.9691H5.5C4.94771 15.9691 4.5 15.5214 4.5 14.9691V10.9077L7.21997 13.6277L12.0005 8.84717L16.7811 13.6277L19.5 10.9087Z"

     

       15
       -
               fill="currentColor"></path>

     

       16
       -
           </svg>

     

       17
        
           <span style="position: relative; z-index: 2;">index</span>

     

       18
        
         </h1>

     

       19
        
         <span style="display: block; margin-top: -5px;"

     

       20
        
           >hey, i'm index. have a great day 👋</span

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       21
        
         >

     

       22
        
         <small

     

       23
        
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

···

       1
        
       <section id="header">

     

       2
        
         <h1 class="animated-border unselectable spin">

     

       3
        
           <svg

     

       4
       +
             xmlns="http://www.w3.org/2000/svg"

     

       5
        
             width="24"

     

       6
        
             height="24"

     

       7
        
             viewBox="0 0 24 24"

     

       8
       +
             style="position: absolute; top: -5px; margin-left: -7px; transform: rotate(-10deg); z-index: 2000;"

     

       9
       +
             ><path

     

       10
       +
               fill="gold"

     

       11
       +
               d="M5 16 3 5l5.5 5L12 4l3.5 6L21 5l-2 11zm14 3c0 .6-.4 1-1 1H6c-.6 0-1-.4-1-1v-1h14z"

     

       12
       +
             ></path></svg

     

       13
        
           >

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       14
        
           <span style="position: relative; z-index: 2;">index</span>

     

       15
        
         </h1>

     

       16
        
         <span style="display: block; margin-top: -5px;"

     

       17
        
           >hey, i'm index. have a great day 👋</span

     

       18
       +
         >

     

       19
       +
         <span style="display: block; margin-top: -5px;"

     

       20
       +
           >i do stuff in typescript sometimes</span

     

       21
        
         >

     

       22
        
         <small

     

       23
        
           style="display: block; margin-top: -5px;margin-bottom:10px;color: rgb(0, 84, 106);font-size: 0.9rem;"

-19

src/components/ProjectsPane.astro

···

       1
       -
       ---

     

       2
       -
       import { projects } from "../data/projects";

     

       3
       -
       import ProjectCard from "./ProjectCard.astro";

     

       4
       -
       ---

     

       5
       -
       

     

       6
       -
       <section id="projects-pane" data-bs-theme="dark">

     

       7
       -
         <h6

     

       8
       -
           class="text-muted text-center"

     

       9
       -
           style="text-transform: uppercase; letter-spacing: 5px;"

     

       10
       -
         >

     

       11
       -
           (SOME OF) MY PROJECTS

     

       12
       -
         </h6>

     

       13
       -
       

     

       14
       -
         <ul class="list-unstyled">

     

       15
       -
           <li>

     

       16
       -
             {projects.map((project) => <ProjectCard {...project} />)}

     

       17
       -
           </li>

     

       18
       -
         </ul>

     

       19
       -
       </section>

+2 -2

src/components/SocialLinks.astro

···

       28
        
       ---

     

       29
        
       

     

       30
        
       <ul

     

       31
       -
         class="d-flex mt-5 mb-3"

     

       32
       -
         style="padding: 0px; width: 50%; margin: auto; justify-content: space-evenly; flex-basis: 33%;"

     

       33
        
       >

     

       34
        
         {links.map((link) => <SocialLink {...link} />)}

     

       35
        
       </ul>

···

       28
        
       ---

     

       29
        
       

     

       30
        
       <ul

     

       31
       +
         class="d-flex mt-3 mb-3"

     

       32
       +
         style="padding: 0px; width: 50%; margin: auto; justify-content: center; gap: 20px;"

     

       33
        
       >

     

       34
        
         {links.map((link) => <SocialLink {...link} />)}

     

       35
        
       </ul>

+8 -13

src/components/islands/Lastfm.jsx

···

       1
        
       import { useEffect, useState } from "react";

     

       0
        
       
     

       2
        
       

     

       3
        
       export default function Lastfm() {

     

       4
        
           const [data, setData] = useState(null);

     
···

       31
        
               fetchLastfmData();

     

       32
        
           }, []);

     

       33
        
       

     

       34
       -
           if (error) return <span>Error: {error}</span>;

     

       35
       -
           if (!data) return null;

     

       36
        
       

     

       37
        
           let timeAgo = "";

     

       38
        
           let oldStatusClasses = "";

     
···

       50
        
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
        
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
        
               else timeAgo = "just now";

     

       0
        
       
     

       0
        
       
     

       53
        
       

     

       54
        
               oldStatusClasses = days > 3

     

       55
        
                   ? "opacity-75 text-decoration-line-through"

     
···

       63
        
                   target="_blank"

     

       64
        
                   className={oldStatusClasses}

     

       65
        
               >

     

       66
       -
                   <img

     

       67
       -
                       src={data.albumArt}

     

       68
       -
                       alt={`${data.album} cover`}

     

       69
       -
                   />

     

       70
        
                   <div

     

       71
        
                       style={{

     

       72
        
                           display: "flex",

     
···

       86
        
                               marginTop: "-5px",

     

       87
        
                           }}

     

       88
        
                       >

     

       89
       -
                           {data.nowPlaying

     

       90
       -
                               ? (

     

       91
       -
                                   <span style={{ color: "#22c55e" }}>

     

       92
       -
                                       ▶ Now Playing

     

       93
       -
                                   </span>

     

       94
       -
                               )

     

       95
       -
                               : timeAgo}

     

       96
        
                       </div>

     

       97
        
                   </div>

     

       98
        
               </a>

···

       1
        
       import { useEffect, useState } from "react";

     

       2
       +
       import AudioVisualizer from "../AudioVisualizer";

     

       3
        
       

     

       4
        
       export default function Lastfm() {

     

       5
        
           const [data, setData] = useState(null);

     
···

       32
        
               fetchLastfmData();

     

       33
        
           }, []);

     

       34
        
       

     

       35
       +
           if (error || !data) return null;

     

       0
        
       
     

       36
        
       

     

       37
        
           let timeAgo = "";

     

       38
        
           let oldStatusClasses = "";

     
···

       50
        
               else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       51
        
               else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       52
        
               else timeAgo = "just now";

     

       53
       +
       

     

       54
       +
               if (days == 1) timeAgo = "1 day ago";

     

       55
        
       

     

       56
        
               oldStatusClasses = days > 3

     

       57
        
                   ? "opacity-75 text-decoration-line-through"

     
···

       65
        
                   target="_blank"

     

       66
        
                   className={oldStatusClasses}

     

       67
        
               >

     

       68
       +
                   <AudioVisualizer />

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       69
        
                   <div

     

       70
        
                       style={{

     

       71
        
                           display: "flex",

     
···

       85
        
                               marginTop: "-5px",

     

       86
        
                           }}

     

       87
        
                       >

     

       88
       +
                           <small style={{ fontSize: "0.7rem" }}>

     

       89
       +
                               ^ what I'm listening (or last listened) to

     

       90
       +
                           </small>

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       91
        
                       </div>

     

       92
        
                   </div>

     

       93
        
               </a>

+16 -5

src/components/islands/Status.jsx

···

       47
        
               return (

     

       48
        
                   <span

     

       49
        
                       className="badge bg-dark"

     

       50
       -
                       style={{ color: "#595959 !important" }}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       51
        
                   >

     

       52
        
                       Error: {error}

     

       53
        
                   </span>

     
···

       57
        
               return (

     

       58
        
                   <span

     

       59
        
                       className="badge bg-dark"

     

       60
       -
                       style={{ color: "#595959 !important" }}

     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       0
        
       
     

       61
        
                   >

     

       62
        
                       Loading status...

     

       63
        
                   </span>

     
···

       68
        
           const now = new Date();

     

       69
        
           const diff = now.getTime() - date.getTime();

     

       70
        
       

     

       71
       -
           const days = Math.floor(diff / (1000 * 60 * 60 * 24)); // Calculate days

     

       72
        
       

     

       73
        
           if (days >= 2) {

     

       74
       -
               return null; // Don't render the component if it's been 2 or more days

     

       75
        
           }

     

       76
        
       

     

       77
        
           const minutes = Math.floor(diff / 60000);

     
···

       82
        
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       83
        
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       84
        
       

     

       0
        
       
     

       0
        
       
     

       85
        
           const oldStatusClasses = days >= 1

     

       86
        
               ? "opacity-75 text-decoration-line-through"

     

       87
        
               : "";

     
···

       91
        
                   href={data.link}

     

       92
        
                   target="_blank"

     

       93
        
                   className={`badge bg-white ${oldStatusClasses}`}

     

       0
        
       
     

       94
        
               >

     

       95
       -
                   Index is.. "{data.text}", {timeAgo}

     

       96
        
               </a>

     

       97
        
           );

     

       98
        
       }

···

       47
        
               return (

     

       48
        
                   <span

     

       49
        
                       className="badge bg-dark"

     

       50
       +
                       style={{

     

       51
       +
                           color: "#595959 !important",

     

       52
       +
                           //outline: "1px solid white",

     

       53
       +
                           //outlineOffset: "1px",

     

       54
       +
                       }}

     

       55
        
                   >

     

       56
        
                       Error: {error}

     

       57
        
                   </span>

     
···

       61
        
               return (

     

       62
        
                   <span

     

       63
        
                       className="badge bg-dark"

     

       64
       +
                       style={{

     

       65
       +
                           color: "#595959 !important",

     

       66
       +
                           //outline: "1px solid white",

     

       67
       +
                           //outlineOffset: "1px",

     

       68
       +
                       }}

     

       69
        
                   >

     

       70
        
                       Loading status...

     

       71
        
                   </span>

     
···

       76
        
           const now = new Date();

     

       77
        
           const diff = now.getTime() - date.getTime();

     

       78
        
       

     

       79
       +
           const days = Math.floor(diff / (1000 * 60 * 60 * 24));

     

       80
        
       

     

       81
        
           if (days >= 2) {

     

       82
       +
               return null;

     

       83
        
           }

     

       84
        
       

     

       85
        
           const minutes = Math.floor(diff / 60000);

     
···

       90
        
           else if (hours > 0) timeAgo = `${hours} hours ago`;

     

       91
        
           else if (minutes > 0) timeAgo = `${minutes} minutes ago`;

     

       92
        
       

     

       93
       +
           if (days == 1) timeAgo = "1 day ago";

     

       94
       +
       

     

       95
        
           const oldStatusClasses = days >= 1

     

       96
        
               ? "opacity-75 text-decoration-line-through"

     

       97
        
               : "";

     
···

       101
        
                   href={data.link}

     

       102
        
                   target="_blank"

     

       103
        
                   className={`badge bg-white ${oldStatusClasses}`}

     

       104
       +
                   //style={{ outline: "1px solid white", outlineOffset: "1px" }}

     

       105
        
               >

     

       106
       +
                   I'm.. "{data.text}", {timeAgo}

     

       107
        
               </a>

     

       108
        
           );

     

       109
        
       }