diff --git a/components/Header/index.tsx b/components/Header/index.tsx index 57a27956..66b527c2 100644 --- a/components/Header/index.tsx +++ b/components/Header/index.tsx @@ -2,7 +2,7 @@ import React, { useEffect, useState } from 'react' import { useSnapshot } from 'valtio' import { deleteCookie } from 'cookies-next' import { useRouter } from 'next/router' -import { useTranslation } from 'next-i18next' +import { Trans, useTranslation } from 'next-i18next' import classNames from 'classnames' import clonedeep from 'lodash.clonedeep' import Link from 'next/link' @@ -43,11 +43,13 @@ const Header = () => { // State management const [copyToastOpen, setCopyToastOpen] = useState(false) + const [remixToastOpen, setRemixToastOpen] = useState(false) const [loginModalOpen, setLoginModalOpen] = useState(false) const [signupModalOpen, setSignupModalOpen] = useState(false) const [settingsModalOpen, setSettingsModalOpen] = useState(false) const [leftMenuOpen, setLeftMenuOpen] = useState(false) const [rightMenuOpen, setRightMenuOpen] = useState(false) + const [originalName, setOriginalName] = useState('') // Snapshots const { account } = useSnapshot(accountState) @@ -61,6 +63,14 @@ const Header = () => { setCopyToastOpen(false) } + function handleRemixToastOpenChanged(open: boolean) { + setRemixToastOpen(open) + } + + function handleRemixToastCloseClicked() { + setRemixToastOpen(false) + } + function handleLeftMenuButtonClicked() { setLeftMenuOpen(!leftMenuOpen) } @@ -147,10 +157,13 @@ const Header = () => { } function remixTeam() { + setOriginalName(party.name ? party.name : t('no_title')) + if (party.shortcode) api.remix(party.shortcode).then((response) => { const remix = response.data.party router.push(`/p/${remix.shortcode}`) + setRemixToastOpen(true) }) } @@ -222,6 +235,23 @@ const Header = () => { ) } + const remixToast = () => { + return ( + + You remixed {{ title: originalName }} + + } + onOpenChange={handleRemixToastOpenChanged} + onCloseClick={handleRemixToastCloseClicked} + /> + ) + } + const saveButton = () => { return ( @@ -469,6 +499,7 @@ const Header = () => { {left()} {right()} {urlCopyToast()} + {remixToast()} {settingsModal()} {loginModal()} {signupModal()} diff --git a/components/Toast/index.scss b/components/Toast/index.scss index 17fb14c8..dc9c36c6 100644 --- a/components/Toast/index.scss +++ b/components/Toast/index.scss @@ -52,5 +52,9 @@ p { line-height: 1.3; + + strong { + font-weight: $bold; + } } } diff --git a/components/Toast/index.tsx b/components/Toast/index.tsx index 331d9d70..a2b26598 100644 --- a/components/Toast/index.tsx +++ b/components/Toast/index.tsx @@ -7,7 +7,7 @@ import './index.scss' interface Props extends ToastPrimitive.ToastProps { className?: string title?: string - content: string + content: React.ReactNode onCloseClick: () => void } @@ -39,7 +39,7 @@ const Toast = ({

{content}

{children && ( - + {children} )} diff --git a/public/locales/en/common.json b/public/locales/en/common.json index a7f40e85..b62db0d1 100644 --- a/public/locales/en/common.json +++ b/public/locales/en/common.json @@ -397,7 +397,8 @@ } }, "toasts": { - "copied": "This party's URL was copied to your clipboard" + "copied": "This party's URL was copied to your clipboard", + "remixed": "You remixed {{title}}" }, "tokens": { "remix": "Remixed" diff --git a/public/locales/ja/common.json b/public/locales/ja/common.json index a8cb8f65..1b3470be 100644 --- a/public/locales/ja/common.json +++ b/public/locales/ja/common.json @@ -398,7 +398,8 @@ } }, "toasts": { - "copied": "この編成のURLはクリップボードにコピーされました" + "copied": "この編成のURLはクリップボードにコピーされました", + "remixed": "{{title}}をリミックスしました" }, "tokens": { "remix": "リミックスされた"