alert box component

This commit is contained in:
mantikoros 2022-06-13 21:08:56 -05:00
parent 64542f775a
commit d9f0428e41
2 changed files with 31 additions and 29 deletions

View 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>
)
}

View File

@ -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>
)
}