feat: create `NimbusLogoMark` component and add it to pages
This commit is contained in:
parent
3ce69737b2
commit
f6ecba8c8b
|
@ -1,6 +1,7 @@
|
||||||
import { XStack } from 'tamagui'
|
import { XStack } from 'tamagui'
|
||||||
import BetaTag from './BetaTag'
|
import BetaTag from './BetaTag'
|
||||||
import './NimbusLogo.css'
|
import './NimbusLogo.css'
|
||||||
|
import NimbusLogoMark from './NimbusLogoMark'
|
||||||
|
|
||||||
const NimbusLogo = () => {
|
const NimbusLogo = () => {
|
||||||
return (
|
return (
|
||||||
|
@ -11,7 +12,7 @@ const NimbusLogo = () => {
|
||||||
}}
|
}}
|
||||||
space={'$3'}
|
space={'$3'}
|
||||||
>
|
>
|
||||||
<img src={'/icons/marks.svg'} alt="marks" className="nimbus-logomark" />
|
<NimbusLogoMark />
|
||||||
<img src={'/icons/nimbus.svg'} alt="marks" />
|
<img src={'/icons/nimbus.svg'} alt="marks" />
|
||||||
<BetaTag />
|
<BetaTag />
|
||||||
</XStack>
|
</XStack>
|
||||||
|
|
|
@ -0,0 +1,20 @@
|
||||||
|
const NimbusLogoMark = () => {
|
||||||
|
return (
|
||||||
|
<div className="nimbus-logomark">
|
||||||
|
<svg
|
||||||
|
xmlns="http://www.w3.org/2000/svg"
|
||||||
|
width="147"
|
||||||
|
height="73"
|
||||||
|
viewBox="0 0 147 73"
|
||||||
|
fill="none"
|
||||||
|
>
|
||||||
|
<path
|
||||||
|
d="M110.25 36.5002V73C90.0427 73 79.625 71.1754 67.375 54.7503C55.125 38.3252 47.2108 36.4998 36.75 36.4998V73H0V36.4998H36.75V1.4385e-08C55.6049 -2.9897e-08 67.375 2.43335 79.625 18.2501C91.875 34.0669 98.3343 36.5002 110.25 36.5002V0H147V36.5002H110.25Z"
|
||||||
|
fill="currentColor"
|
||||||
|
/>
|
||||||
|
</svg>
|
||||||
|
</div>
|
||||||
|
)
|
||||||
|
}
|
||||||
|
|
||||||
|
export default NimbusLogoMark
|
|
@ -1,13 +1,20 @@
|
||||||
import { ReactNode } from 'react'
|
import { ReactNode } from 'react'
|
||||||
import './layout.css'
|
import './layout.css'
|
||||||
|
import NimbusLogoMark from '../Logos/NimbusLogoMark'
|
||||||
|
|
||||||
type PageWrapperShadowProps = {
|
type PageWrapperShadowProps = {
|
||||||
breadcrumbBar?: ReactNode
|
breadcrumbBar?: ReactNode
|
||||||
rightImageSrc?: string
|
rightImageSrc?: string
|
||||||
|
rightImageLogo?: boolean
|
||||||
children: ReactNode
|
children: ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapperShadowProps) => {
|
const PageWrapperShadow = ({
|
||||||
|
breadcrumbBar,
|
||||||
|
rightImageSrc,
|
||||||
|
rightImageLogo,
|
||||||
|
children,
|
||||||
|
}: PageWrapperShadowProps) => {
|
||||||
return (
|
return (
|
||||||
<div className="layout">
|
<div className="layout">
|
||||||
<section className="layout-left">
|
<section className="layout-left">
|
||||||
|
@ -18,7 +25,8 @@ const PageWrapperShadow = ({ breadcrumbBar, rightImageSrc, children }: PageWrapp
|
||||||
</section>
|
</section>
|
||||||
<section className="layout-right">
|
<section className="layout-right">
|
||||||
<div className="image-container">
|
<div className="image-container">
|
||||||
<img src={rightImageSrc} alt="background" />
|
<img src={rightImageSrc} alt="background" className="background-img" />
|
||||||
|
{rightImageLogo ? <NimbusLogoMark /> : null}
|
||||||
</div>
|
</div>
|
||||||
</section>
|
</section>
|
||||||
</div>
|
</div>
|
||||||
|
|
Loading…
Reference in New Issue