xiaoxue_admin
/
xLog
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

feat: subscribe buttom

This commit is contained in:
DIYgod 2022-07-28 01:26:13 +01:00
parent 1b2bac3c43
commit 6bdf6790a3
No known key found for this signature in database
GPG Key ID: D159328F47A80DCA
7 changed files with 68 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/common/ConnectButton.tsx
View File

@ -72,7 +72,7 @@ export const ConnectButton: React.FC<{
{(() => {
if (!mounted || !account || !chain) {
return (
<button className="text-indigo-600" onClick={openConnectModal} type="button">
<button className="text-indigo-600" onClick={openConnectModal} type="button" style={{ height: "30px" }}>
Connect Wallet
</button>
);

9
src/components/icons/Crossbell.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react"
export const CrossbellIcon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
props
) => {
return (
<svg width="1em" height="1em" {...props} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11148"><path d="M512 1024c70.64 0 127.94-57.3 127.94-128H384.06c0 70.7 57.3 128 127.94 128z m430.78-299.42c-38.64-41.52-110.94-103.98-110.94-308.58 0-155.4-108.96-279.8-255.88-310.32V64c0-35.34-28.64-64-63.96-64s-63.96 28.66-63.96 64v41.68C301.12 136.2 192.16 260.6 192.16 416c0 204.6-72.3 267.06-110.94 308.58-12 12.9-17.32 28.32-17.22 43.42 0.22 32.8 25.96 64 64.2 64h767.6c38.24 0 64-31.2 64.2-64 0.1-15.1-5.22-30.54-17.22-43.42z" p-id="11149"></path></svg>
)
}

9
src/components/icons/RSS3.tsx Normal file
View File

@ -0,0 +1,9 @@
import React from "react"
export const RSS3Icon: React.FC<React.ComponentPropsWithoutRef<"svg">> = (
props
) => {
return (
<svg width="1em" height="1em" {...props} viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="6994"><path d="M139.093333 974.336a96.426667 96.426667 0 1 0 0-192.853333 96.426667 96.426667 0 0 0 0 192.853333zM926.122667 971.264c-26.453333 0-46.634667-20.224-46.634667-46.677333 0-433.962667-353.066667-788.608-788.608-788.608-26.453333 0-46.634667-20.224-46.634667-46.634667C44.202667 62.890667 64.426667 42.666667 90.88 42.666667 577.706667 42.666667 972.8 439.296 972.8 924.586667c0 26.453333-20.224 46.634667-46.677333 46.634666z" p-id="6995"></path><path d="M601.045333 972.8c-26.453333 0-46.634667-20.224-46.634666-46.677333 0-255.061333-208.426667-463.488-463.530667-463.488-26.453333 0-46.634667-20.224-46.634667-46.677334 0-26.453333 20.181333-46.634667 46.634667-46.634666 307.968 0 556.842667 250.410667 556.842667 556.8 0 24.917333-21.76 46.677333-46.677334 46.677333z" p-id="6996"></path></svg>
)
}

37
src/components/site/SiteHeader.tsx
View File

@ -13,6 +13,9 @@ import { Button } from "../ui/Button"
import { UniLink } from "../ui/UniLink"
import { Profile } from "unidata.js"
import { ConnectButton } from "../common/ConnectButton"
import { RSS3Icon } from "../icons/RSS3"
import { CrossbellIcon } from "../icons/Crossbell"
import { useAccount } from "wagmi"
export type HeaderLinkType = {
icon?: React.ReactNode
@ -45,12 +48,12 @@ export const SiteHeader: React.FC<{
icon: string | null | undefined
navigation?: HeaderLinkType[]
subscribed?: boolean
viewer?: Profile | null
}> = ({ siteName, description, icon, navigation, subscribed, viewer }) => {
}> = ({ siteName, description, icon, navigation, subscribed }) => {
const setSubscribeModalOpened = useStore(
(store) => store.setSubscribeModalOpened,
)
const setLoginModalOpened = useStore((store) => store.setLoginModalOpened)
const { data: viewer } = useAccount()
const handleClickSubscribe = () => {
setSubscribeModalOpened(true)
@ -78,6 +81,36 @@ export const SiteHeader: React.FC<{
{description && (
<div className="text-gray-500 text-sm">{description}</div>
)}
<div className="mt-3 text-sm">
<Button
rounded="full"
size="sm"
variant="rss3"
onClick={() => window.open(`https://rss3.io/result?search=${viewer?.address}&filter=social`, '_blank')}
className="space-x-1 mr-2"
>
<span className="pl-1">
<RSS3Icon />
</span>
<span className="pr-1">
Watch on RSS3
</span>
</Button>
<Button
rounded="full"
size="sm"
variant="crossbell"
onClick={() => window.open(`https://crossbell.io`, '_blank')}
className="space-x-1"
>
<span className="pl-1">
<CrossbellIcon />
</span>
<span className="pr-1">
Follow on Crossbell
</span>
</Button>
</div>
</div>
</div>
</div>

2
src/components/ui/Button.tsx
View File

@ -12,7 +12,7 @@ type ButtonProps = {
isBlock?: boolean
isDisabled?: boolean
isAutoWidth?: boolean
variant?: "primary" | "secondary" | "text"
variant?: "primary" | "secondary" | "text" | "rss3" | "crossbell"
variantColor?: "green" | "red" | "gray"
size?: "sm"
rounded?: "full" | "lg"

12
src/css/tailwind.css
View File

@ -72,6 +72,18 @@ body {
@apply text-gray-500;
}
.button.is-rss3 {
background-color: #e7f1ff;
fill: #1064ff;
color: #1064ff;
}
.button.is-crossbell {
background-color: #fff5e1;
fill: #e5b65a;
color: #e5b65a;
}
.button.is-text {
@apply shadow-none;
@apply text-gray-500;

2
src/pages/dashboard/index.tsx
View File

@ -19,5 +19,5 @@ export default function Dashboard() {
}
}, [userSites, router])
return <div>Loading...</div>
return <div className="flex items-center justify-center w-full h-60">Loading...</div>
}