From f6d0cd7089a606483d952e92f1daa1e659ab21dc Mon Sep 17 00:00:00 2001
From: Justin Edmund <justin@jedmund.com>
Date: Tue, 24 Jan 2023 18:52:12 -0800
Subject: [PATCH] WIP: Toast for updates

---
 components/UpdateToast/index.scss | 11 +++++++++++
 components/UpdateToast/index.tsx  | 30 ++++++++++++++++++++++++++++++
 2 files changed, 41 insertions(+)
 create mode 100644 components/UpdateToast/index.scss
 create mode 100644 components/UpdateToast/index.tsx

diff --git a/components/UpdateToast/index.scss b/components/UpdateToast/index.scss
new file mode 100644
index 00000000..f444e5c0
--- /dev/null
+++ b/components/UpdateToast/index.scss
@@ -0,0 +1,11 @@
+.Notice {
+  align-items: center;
+  border-radius: $card-corner;
+  background: blue;
+  display: flex;
+  padding: $unit;
+
+  p {
+    font-size: $font-small;
+  }
+}
diff --git a/components/UpdateToast/index.tsx b/components/UpdateToast/index.tsx
new file mode 100644
index 00000000..74f63756
--- /dev/null
+++ b/components/UpdateToast/index.tsx
@@ -0,0 +1,30 @@
+import React from 'react'
+import classNames from 'classnames'
+
+import Button from '~components/Button'
+import Toast from '~components/Toast'
+
+import './index.scss'
+import { useTranslation } from 'next-i18next'
+
+interface Props {}
+
+const UpdateToast = (props: Props) => {
+  const { t } = useTranslation('updates')
+
+  const classes = classNames({
+    Update: true,
+  })
+
+  return (
+    <Toast
+      className={classes}
+      title={t('updates.latest.title')}
+      content={t('updates.latest.content')}
+    >
+      <Button buttonSize="small" contained={true} text="" />
+    </Toast>
+  )
+}
+
+export default UpdateToast