feat: use common components
This commit is contained in:
DIYgod
parent
9ddd904cec
commit
f8761b8e7b
|
|
@ -151,7 +151,6 @@
|
|||
"unified": "10.1.2",
|
||||
"unist-builder": "4.0.0",
|
||||
"unist-util-visit": "5.0.0",
|
||||
"use-onclickoutside": "0.4.1",
|
||||
"uuid": "9.0.0",
|
||||
"viem": "1.6.7",
|
||||
"wagmi": "1.3.10",
|
||||
|
|
|
|||
|
|
@ -368,9 +368,6 @@ dependencies:
|
|||
unist-util-visit:
|
||||
specifier: 5.0.0
|
||||
version: 5.0.0
|
||||
use-onclickoutside:
|
||||
specifier: 0.4.1
|
||||
version: 0.4.1(@types/react@18.2.21)(react@18.2.0)
|
||||
uuid:
|
||||
specifier: 9.0.0
|
||||
version: 9.0.0
|
||||
|
|
@ -4137,10 +4134,6 @@ packages:
|
|||
smoothscroll: 0.4.0
|
||||
dev: false
|
||||
|
||||
/are-passive-events-supported@1.1.1:
|
||||
resolution: {integrity: sha512-5wnvlvB/dTbfrCvJ027Y4L4gW/6Mwoy1uFSavney0YO++GU+0e/flnjiBBwH+1kh7xNCgCOGvmJC3s32joYbww==}
|
||||
dev: false
|
||||
|
||||
/arg@5.0.2:
|
||||
resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
|
||||
|
||||
|
|
@ -11456,18 +11449,6 @@ packages:
|
|||
use-isomorphic-layout-effect: 1.1.2(@types/react@18.2.21)(react@18.2.0)
|
||||
dev: false
|
||||
|
||||
/use-onclickoutside@0.4.1(@types/react@18.2.21)(react@18.2.0):
|
||||
resolution: {integrity: sha512-hAo1viJ9D2mPffUig4EWCwE4as7fq84HANk3MCkY3rhXk5oMl0mjLCLF/OhzWIhTaITcAcDDcnaxRdMHPq+sww==}
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
dependencies:
|
||||
are-passive-events-supported: 1.1.1
|
||||
react: 18.2.0
|
||||
use-latest: 1.2.1(@types/react@18.2.21)(react@18.2.0)
|
||||
transitivePeerDependencies:
|
||||
- '@types/react'
|
||||
dev: false
|
||||
|
||||
/use-sidecar@1.1.2(@types/react@18.2.21)(react@18.2.0):
|
||||
resolution: {integrity: sha512-epTbsLuzZ7lPClpz2TyryBfztm7m+28DlEv2ZCQ3MDr5ssiwyOwGH/e5F9CkfWjJ1t4clvI58yF822/GUkjjhw==}
|
||||
engines: {node: '>=10'}
|
||||
|
|
|
|||
|
|
@ -226,61 +226,56 @@ export default function PortfolioEditor() {
|
|||
|
||||
return (
|
||||
<>
|
||||
<DashboardMain fullWidth>
|
||||
<div className="min-w-[270px] max-w-screen-lg flex flex-col space-y-8">
|
||||
{page.isLoading ? (
|
||||
<div className="flex justify-center items-center min-h-[300px]">
|
||||
{t("Loading")}...
|
||||
<DashboardMain className="max-w-screen-lg" title="Edit portfolio">
|
||||
{page.isLoading ? (
|
||||
<div className="flex justify-center items-center min-h-[300px]">
|
||||
{t("Loading")}...
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<EditorExtraProperties />
|
||||
<div className="flex justify-between h-14 items-center text-sm mt-8">
|
||||
<div className="flex items-center space-x-3 flex-shrink-0">
|
||||
<PublishButton
|
||||
savePage={savePage}
|
||||
deletePage={deletePage}
|
||||
twitterShareUrl={
|
||||
page.data && site.data
|
||||
? getTwitterShareUrl({
|
||||
page: page.data,
|
||||
site: site.data,
|
||||
t,
|
||||
})
|
||||
: ""
|
||||
}
|
||||
published={visibility !== PageVisibilityEnum.Draft}
|
||||
isSaving={
|
||||
createPage.isLoading ||
|
||||
updatePage.isLoading ||
|
||||
deleteP.isLoading
|
||||
}
|
||||
isDisabled={false}
|
||||
type={type}
|
||||
isModified={visibility === PageVisibilityEnum.Modified}
|
||||
discardChanges={discardChanges}
|
||||
placement="top-start"
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
`text-sm capitalize`,
|
||||
visibility === PageVisibilityEnum.Draft
|
||||
? `text-zinc-300`
|
||||
: visibility === PageVisibilityEnum.Modified
|
||||
? "text-orange-600"
|
||||
: "text-green-600",
|
||||
)}
|
||||
>
|
||||
{t(visibility as string)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div className={`pt-10 flex w-full min-w-[840px] px-5`}>
|
||||
<EditorExtraProperties />
|
||||
</div>
|
||||
<div
|
||||
className={`flex justify-between px-5 h-14 items-center text-sm`}
|
||||
>
|
||||
<div className="flex items-center space-x-3 flex-shrink-0">
|
||||
<PublishButton
|
||||
savePage={savePage}
|
||||
deletePage={deletePage}
|
||||
twitterShareUrl={
|
||||
page.data && site.data
|
||||
? getTwitterShareUrl({
|
||||
page: page.data,
|
||||
site: site.data,
|
||||
t,
|
||||
})
|
||||
: ""
|
||||
}
|
||||
published={visibility !== PageVisibilityEnum.Draft}
|
||||
isSaving={
|
||||
createPage.isLoading ||
|
||||
updatePage.isLoading ||
|
||||
deleteP.isLoading
|
||||
}
|
||||
isDisabled={false}
|
||||
type={type}
|
||||
isModified={visibility === PageVisibilityEnum.Modified}
|
||||
discardChanges={discardChanges}
|
||||
/>
|
||||
<span
|
||||
className={cn(
|
||||
`text-sm capitalize`,
|
||||
visibility === PageVisibilityEnum.Draft
|
||||
? `text-zinc-300`
|
||||
: visibility === PageVisibilityEnum.Modified
|
||||
? "text-orange-600"
|
||||
: "text-green-600",
|
||||
)}
|
||||
>
|
||||
{t(visibility as string)}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</DashboardMain>
|
||||
</>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -1,6 +1,8 @@
|
|||
import { useEffect, useRef, useState } from "react"
|
||||
import useOnClickOutside from "use-onclickoutside"
|
||||
import { useState } from "react"
|
||||
|
||||
import { Placement } from "@floating-ui/react"
|
||||
|
||||
import { Menu } from "~/components//ui/Menu"
|
||||
import { DeleteConfirmationModal } from "~/components/common/DeleteConfirmationModal"
|
||||
import { useTranslation } from "~/lib/i18n/client"
|
||||
import { NoteType } from "~/lib/types"
|
||||
|
|
@ -17,6 +19,7 @@ export const PublishButton = ({
|
|||
isModified,
|
||||
twitterShareUrl,
|
||||
type,
|
||||
placement = "bottom-end",
|
||||
}: {
|
||||
savePage: () => void
|
||||
deletePage: () => void
|
||||
|
|
@ -27,23 +30,10 @@ export const PublishButton = ({
|
|||
type: NoteType
|
||||
isModified: boolean
|
||||
discardChanges: () => void
|
||||
placement?: Placement
|
||||
}) => {
|
||||
const [showDropdown, setShowDropdown] = useState(false)
|
||||
const dropdownRef = useRef<HTMLDivElement | null>(null)
|
||||
const triggerRef = useRef<HTMLButtonElement | null>(null)
|
||||
const { t } = useTranslation("dashboard")
|
||||
|
||||
useOnClickOutside(dropdownRef, (e) => {
|
||||
if (triggerRef.current?.contains(e.target as any)) return
|
||||
setShowDropdown(false)
|
||||
})
|
||||
|
||||
useEffect(() => {
|
||||
if (isSaving) {
|
||||
setShowDropdown(false)
|
||||
}
|
||||
}, [isSaving])
|
||||
|
||||
const [deleteConfirmModalOpen, setDeleteConfirmModalOpen] =
|
||||
useState<boolean>(false)
|
||||
|
||||
|
|
@ -60,26 +50,19 @@ export const PublishButton = ({
|
|||
{t(published ? "Update" : "Publish")}
|
||||
</Button>
|
||||
{published && (
|
||||
<Button
|
||||
isAutoWidth
|
||||
style={{ padding: "0 8px" }}
|
||||
onClick={() => {
|
||||
setShowDropdown(!showDropdown)
|
||||
}}
|
||||
ref={triggerRef}
|
||||
isDisabled={isSaving}
|
||||
>
|
||||
<i className="icon-[mingcute--down-line]" />
|
||||
</Button>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
{showDropdown && (
|
||||
<div
|
||||
className="absolute right-0 min-w-[200px] pt-2 z-10"
|
||||
ref={dropdownRef}
|
||||
>
|
||||
<div className="bg-white py-2 rounded-lg shadow-modal">
|
||||
{published && (
|
||||
<Menu
|
||||
placement={placement}
|
||||
target={
|
||||
<Button
|
||||
isAutoWidth
|
||||
style={{ padding: "0 8px" }}
|
||||
isDisabled={isSaving}
|
||||
className="!rounded-r-full"
|
||||
>
|
||||
<i className="icon-[mingcute--down-line]" />
|
||||
</Button>
|
||||
}
|
||||
dropdown={
|
||||
<div>
|
||||
<button
|
||||
className="flex w-full h-8 hover:bg-zinc-100 items-center px-5"
|
||||
|
|
@ -105,10 +88,10 @@ export const PublishButton = ({
|
|||
{t("Delete")}
|
||||
</button>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
}
|
||||
/>
|
||||
)}
|
||||
</ButtonGroup>
|
||||
<DeleteConfirmationModal
|
||||
open={deleteConfirmModalOpen}
|
||||
setOpen={setDeleteConfirmModalOpen}
|
||||
|
|
|
|||
Loading…
Reference in New Issue