alert box component
This commit is contained in:
parent
64542f775a
commit
d9f0428e41
24
web/components/alert-box.tsx
Normal file
24
web/components/alert-box.tsx
Normal file
|
@ -0,0 +1,24 @@
|
||||||
|
import { ExclamationIcon } from '@heroicons/react/solid'
|
||||||
|
import { Linkify } from './linkify'
|
||||||
|
|
||||||
|
export function AlertBox(props: { title: string; text: string }) {
|
||||||
|
const { title, text } = props
|
||||||
|
return (
|
||||||
|
<div className="rounded-md bg-yellow-50 p-4">
|
||||||
|
<div className="flex">
|
||||||
|
<div className="flex-shrink-0">
|
||||||
|
<ExclamationIcon
|
||||||
|
className="h-5 w-5 text-yellow-400"
|
||||||
|
aria-hidden="true"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<div className="ml-3">
|
||||||
|
<h3 className="text-sm font-medium text-yellow-800">{title}</h3>
|
||||||
|
<div className="mt-2 text-sm text-yellow-700">
|
||||||
|
<Linkify text={text} />
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
|
@ -1,4 +1,8 @@
|
||||||
import clsx from 'clsx'
|
import clsx from 'clsx'
|
||||||
|
import { uniq } from 'lodash'
|
||||||
|
import { LinkIcon } from '@heroicons/react/solid'
|
||||||
|
import { PencilIcon } from '@heroicons/react/outline'
|
||||||
|
|
||||||
import { follow, unfollow, User } from 'web/lib/firebase/users'
|
import { follow, unfollow, User } from 'web/lib/firebase/users'
|
||||||
import { CreatorContractsList } from './contract/contracts-list'
|
import { CreatorContractsList } from './contract/contracts-list'
|
||||||
import { SEO } from './SEO'
|
import { SEO } from './SEO'
|
||||||
|
@ -9,9 +13,7 @@ import { Col } from './layout/col'
|
||||||
import { Linkify } from './linkify'
|
import { Linkify } from './linkify'
|
||||||
import { Spacer } from './layout/spacer'
|
import { Spacer } from './layout/spacer'
|
||||||
import { Row } from './layout/row'
|
import { Row } from './layout/row'
|
||||||
import { LinkIcon } from '@heroicons/react/solid'
|
|
||||||
import { genHash } from 'common/util/random'
|
import { genHash } from 'common/util/random'
|
||||||
import { PencilIcon } from '@heroicons/react/outline'
|
|
||||||
import { Tabs } from './layout/tabs'
|
import { Tabs } from './layout/tabs'
|
||||||
import { UserCommentsList } from './comments-list'
|
import { UserCommentsList } from './comments-list'
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
|
@ -22,8 +24,10 @@ import { LoadingIndicator } from './loading-indicator'
|
||||||
import { BetsList } from './bets-list'
|
import { BetsList } from './bets-list'
|
||||||
import { Bet } from 'common/bet'
|
import { Bet } from 'common/bet'
|
||||||
import { getUserBets } from 'web/lib/firebase/bets'
|
import { getUserBets } from 'web/lib/firebase/bets'
|
||||||
import { uniq } from 'lodash'
|
|
||||||
import { FollowersButton, FollowingButton } from './following-button'
|
import { FollowersButton, FollowingButton } from './following-button'
|
||||||
|
import { AlertBox } from './alert-box'
|
||||||
|
import { useFollows } from 'web/hooks/use-follows'
|
||||||
|
import { FollowButton } from './follow-button'
|
||||||
|
|
||||||
export function UserLink(props: {
|
export function UserLink(props: {
|
||||||
name: string
|
name: string
|
||||||
|
@ -305,29 +309,3 @@ export function defaultBannerUrl(userId: string) {
|
||||||
]
|
]
|
||||||
return defaultBanner[genHash(userId)() % defaultBanner.length]
|
return defaultBanner[genHash(userId)() % defaultBanner.length]
|
||||||
}
|
}
|
||||||
|
|
||||||
import { ExclamationIcon } from '@heroicons/react/solid'
|
|
||||||
import { FollowButton } from './follow-button'
|
|
||||||
import { useFollows } from 'web/hooks/use-follows'
|
|
||||||
|
|
||||||
function AlertBox(props: { title: string; text: string }) {
|
|
||||||
const { title, text } = props
|
|
||||||
return (
|
|
||||||
<div className="rounded-md bg-yellow-50 p-4">
|
|
||||||
<div className="flex">
|
|
||||||
<div className="flex-shrink-0">
|
|
||||||
<ExclamationIcon
|
|
||||||
className="h-5 w-5 text-yellow-400"
|
|
||||||
aria-hidden="true"
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div className="ml-3">
|
|
||||||
<h3 className="text-sm font-medium text-yellow-800">{title}</h3>
|
|
||||||
<div className="mt-2 text-sm text-yellow-700">
|
|
||||||
<Linkify text={text} />
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
Loading…
Reference in New Issue
Block a user