Spaces:
Running
Running
File size: 1,664 Bytes
2f49513 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 |
/*
* SPDX-FileCopyrightText: Copyright (c) 2024 NVIDIA CORPORATION & AFFILIATES. All rights reserved.
* SPDX-License-Identifier: Apache-2.0
*
* Licensed under the Apache License, Version 2.0 (the "License");
* you may not use this file except in compliance with the License.
* You may obtain a copy of the License at
*
* http://www.apache.org/licenses/LICENSE-2.0
*
* Unless required by applicable law or agreed to in writing, software
* distributed under the License is distributed on an "AS IS" BASIS,
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
* See the License for the specific language governing permissions and
* limitations under the License.
*/
import useRerender from "../../hooks/useRerender";
import { ToastNotice } from "../../hooks/useToastNotices";
import "./index.css";
interface Props {
toasts: ToastNotice[];
}
export default function ToastNotices(props: Props) {
// Rerender this component every 60 seconds, so that the "xx minutes ago" is re-calculated
useRerender(60);
return (
<div className="toast-notices">
{props.toasts.reverse().map((toast) => (
<div className={`toast-notice ${toast.level}`}>
{toast.content}
<time className="toast-timestamp">
{relativeTime(toast.timestamp)}
</time>
</div>
))}
</div>
);
}
function relativeTime(timestamp: number): string {
const diff = Math.floor((timestamp - Date.now()) / (60 * 1000));
if (diff === 0) {
return "less than a minute ago";
}
const format = new Intl.RelativeTimeFormat("en", { style: "long" });
return format.format(diff, "minute");
}
|