Skip to content

Commit d47cc17

Browse files
FrontendlandFrontendland
committed
✨ Add Maintenance block
1 parent 7ccbdc8 commit d47cc17

File tree

10 files changed

+233
-6
lines changed

10 files changed

+233
-6
lines changed

‎README.md

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -298,6 +298,7 @@ import { Accordion } from 'webcoreui/react'
298298
- [Icon](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Icon)
299299
- [IconList](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/IconList)
300300
- [Layout](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Layout)
301+
- [Maintenance](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/Maintenance)
301302
- [SEO](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SEO)
302303
- [SettingCard](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SettingCard)
303304
- [SignUp](https://github.com/Frontendland/webcoreui/tree/main/src/blocks/SignUp)

‎src/blocks/Maintenance/Maintenance.astro

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
---
2+
import type { MaintenanceProps } from './maintenance'
3+
import cog from './cog.svg?raw'
4+
import styles from './maintenance.module.scss'
5+
6+
interface Props extends MaintenanceProps {}
7+
8+
const {
9+
logo,
10+
animated = true,
11+
title = 'Under Maintenance',
12+
subTitle = 'We are performing scheduled maintenance.',
13+
className
14+
} = Astro.props
15+
16+
const classes = [
17+
styles.maintenance,
18+
animated && styles.animated,
19+
className
20+
]
21+
---
22+
23+
<section class:list={classes}>
24+
{logo?.url ? (
25+
<img
26+
src={logo.url}
27+
alt={logo.alt || 'Logo'}
28+
width={logo.width}
29+
height={logo.height}
30+
/>
31+
) : <Fragment set:html={cog} />}
32+
<h1 class={styles.title}>{title}</h1>
33+
{subTitle && (
34+
<span class="muted" set:html={subTitle} />
35+
)}
36+
</section>

‎src/blocks/Maintenance/Maintenance.svelte

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<script lang="ts">
2+
import { classNames } from 'webcoreui'
3+
4+
import type { MaintenanceProps } from './maintenance'
5+
import cog from './cog.svg?raw'
6+
import styles from './maintenance.module.scss'
7+
8+
const {
9+
logo,
10+
animated = true,
11+
title = 'Under Maintenance',
12+
subTitle = 'We are performing scheduled maintenance.',
13+
className
14+
}: MaintenanceProps = $props()
15+
16+
const classes = classNames([
17+
styles.maintenance,
18+
animated && styles.animated,
19+
className
20+
])
21+
</script>
22+
23+
<section class={classes}>
24+
{#if logo?.url}
25+
<img
26+
src={logo.url}
27+
alt={logo.alt || 'Logo'}
28+
width={logo.width}
29+
height={logo.height}
30+
/>
31+
{:else}
32+
{@html cog}
33+
{/if}
34+
35+
<h1 class={styles.title}>{title}</h1>
36+
37+
{#if subTitle}
38+
<span class="muted">
39+
{@html subTitle}
40+
</span>
41+
{/if}
42+
</section>

‎src/blocks/Maintenance/Maintenance.tsx

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
import React from 'react'
2+
import { classNames } from 'webcoreui'
3+
4+
import type { MaintenanceProps } from './maintenance'
5+
import cog from './cog.svg?raw'
6+
import styles from './maintenance.module.scss'
7+
8+
const Maintenance = ({
9+
logo,
10+
animated = true,
11+
title = 'Under Maintenance',
12+
subTitle = 'We are performing scheduled maintenance.',
13+
className
14+
}: MaintenanceProps) => {
15+
const classes = classNames([
16+
styles.maintenance,
17+
animated && styles.animated,
18+
className
19+
])
20+
21+
return (
22+
<section className={classes}>
23+
{logo?.url ? (
24+
<img
25+
src={logo.url}
26+
alt={logo.alt || 'Logo'}
27+
width={logo.width}
28+
height={logo.height}
29+
/>
30+
) : <span dangerouslySetInnerHTML={{ __html: cog }} />}
31+
<h1 className={styles.title}>{title}</h1>
32+
{subTitle && (
33+
<span
34+
className="muted"
35+
dangerouslySetInnerHTML={{ __html: subTitle }}
36+
/>
37+
)}
38+
</section>
39+
)
40+
}
41+
42+
export default Maintenance

‎src/blocks/Maintenance/cog.svg

Lines changed: 4 additions & 0 deletions
Loading

‎src/blocks/Maintenance/maintenance.module.scss

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@use 'webcoreui/config' as *;
2+
3+
.maintenance {
4+
@include typography(center);
5+
@include layout(grid, md);
6+
7+
&.animated svg {
8+
animation: 15s rotate infinite linear;
9+
}
10+
11+
svg,
12+
img {
13+
@include spacing(m-auto);
14+
}
15+
16+
svg {
17+
@include size(45px);
18+
}
19+
20+
.title {
21+
@include typography(center);
22+
@include spacing(0);
23+
}
24+
}
25+
26+
@keyframes rotate {
27+
from {
28+
transform: rotate(0);
29+
}
30+
to {
31+
transform: rotate(360deg);
32+
}
33+
}

‎src/blocks/Maintenance/maintenance.ts

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
export type MaintenanceProps = {
2+
logo?: {
3+
url: string
4+
alt: string
5+
width: number
6+
height: number
7+
}
8+
animated?: boolean
9+
title?: string
10+
subTitle?: string
11+
className?: string
12+
}

‎src/pages/blocks/index.astro

Lines changed: 11 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -14,12 +14,15 @@ import GridWithIcons from '@blocks/GridWithIcons/GridWithIcons.astro'
1414
import Hero from '@blocks/Hero/Hero.astro'
1515
import Icon from '@blocks/Icon/Icon.astro'
1616
import IconList from '@blocks/IconList/IconList.astro'
17+
import Maintenance from '@blocks/Maintenance/Maintenance.astro'
1718
import SettingCard from '@blocks/SettingCard/SettingCard.astro'
1819
import SignUp from '@blocks/SignUp/SignUp.astro'
1920
import SocialProof from '@blocks/SocialProof/SocialProof.astro'
2021
import Socials from '@blocks/Socials/Socials.astro'
2122
import Tiles from '@blocks/Tiles/Tiles.astro'
2223
import User from '@blocks/User/User.astro'
24+
25+
import { gridWithIconsItems } from '@data'
2326
---
2427

2528
<Layout docs="/blocks/introduction">
@@ -47,11 +50,10 @@ import User from '@blocks/User/User.astro'
4750
<Link href="/blocks/setting-card" />
4851
</Card>
4952
<Card>
50-
<GridWithIcons items={[{
51-
icon: 'components',
52-
title: 'Grid with Icons',
53-
text: 'Use the <code>GridWithIcons</code> block to organize your list into a grid with icons to enhance clarity and visual appeal.'
54-
}]} columns={1} />
53+
<GridWithIcons
54+
items={[gridWithIconsItems[0]]}
55+
columns={1}
56+
/>
5557
<Link href="/blocks/grid-with-icons" />
5658
</Card>
5759
<Card title="Social proof">
@@ -203,6 +205,10 @@ import User from '@blocks/User/User.astro'
203205
element="a"
204206
href="/blocks/author"
205207
/>
208+
<Card>
209+
<Maintenance />
210+
<Link href="/blocks/maintenance" />
211+
</Card>
206212
</div>
207213
</div>
208214
</Layout>

‎src/pages/blocks/maintenance.astro

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
---
2+
import Layout from '@static/Layout.astro'
3+
4+
import Card from '@components/Card/Card.astro'
5+
6+
import AstroMaintenance from '@blocks/Maintenance/Maintenance.astro'
7+
import SvelteMaintenance from '@blocks/Maintenance/Maintenance.svelte'
8+
import ReactMaintenance from '@blocks/Maintenance/Maintenance.tsx'
9+
10+
import { getSections } from '@helpers'
11+
12+
const sections = getSections({
13+
title: 'maintenance block',
14+
components: [AstroMaintenance, SvelteMaintenance, ReactMaintenance]
15+
})
16+
---
17+
18+
<Layout>
19+
<h1>Maintenance</h1>
20+
<h2>
21+
<a href="/blocks">
22+
{'<-'} Back to all blocks
23+
</a>
24+
</h2>
25+
26+
{sections.map((section: any) => (
27+
<Fragment>
28+
{section.type !== 'astro' && (
29+
<br />
30+
<h2>{section.title}</h2>
31+
)}
32+
</Fragment>
33+
<div class="grid">
34+
<Card title="Default state">
35+
<section.component />
36+
</Card>
37+
38+
<Card title="No animation">
39+
<section.component animated={false} />
40+
</Card>
41+
42+
<Card title="Custom data">
43+
<section.component
44+
logo={{ url: '/img/logo.png' }}
45+
title="Maintenance"
46+
subTitle="We are currently doing scheduled maintenance. Our website will be back up and running shortly.<br />Keep up to date about our status on our <a href='#'>X</a> profile."
47+
/>
48+
</Card>
49+
</div>
50+
))}
51+
</Layout>

‎src/pages/blocks/socials.astro

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import ReactSocials from '@blocks/Socials/Socials.tsx'
1010
import { getSections } from '@helpers'
1111
1212
const sections = getSections({
13-
title: 'lists',
13+
title: 'social links',
1414
components: [AstroSocials, SvelteSocials, ReactSocials]
1515
})
1616

0 commit comments

Comments
 (0)