Skip to content

Commit 662aabc

Browse files
damianstasikAugustinMauroy
damianstasik
and
AugustinMauroy
authored
refactor: Inline and simplify glowing backdrop SVG pattern (#6536)
Co-authored-by: Augustin Mauroy <[email protected]>
1 parent 6f9ea86 commit 662aabc

File tree

14 files changed

+369
-1153
lines changed

14 files changed

+369
-1153
lines changed

‎app/[locale]/error.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { useTranslations } from 'next-intl';
66
import type { FC } from 'react';
77

88
import Button from '@/components/Common/Button';
9+
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
910
import CenteredLayout from '@/layouts/Centered';
1011

1112
const ErrorPage: FC<{ error: Error }> = ({ error }) => {
@@ -14,7 +15,7 @@ const ErrorPage: FC<{ error: Error }> = ({ error }) => {
1415

1516
return (
1617
<CenteredLayout>
17-
<div className="glowingBackdrop" />
18+
<GlowingBackdrop />
1819

1920
<main>
2021
500

‎app/[locale]/not-found.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,15 @@ import { useTranslations } from 'next-intl';
66
import type { FC } from 'react';
77

88
import Button from '@/components/Common/Button';
9+
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
910
import CenteredLayout from '@/layouts/Centered';
1011

1112
const NotFoundPage: FC = () => {
1213
const t = useTranslations();
1314

1415
return (
1516
<CenteredLayout>
16-
<div className="glowingBackdrop" />
17+
<GlowingBackdrop />
1718

1819
<main>
1920
404

‎app/global-error.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { captureException } from '@sentry/nextjs';
55
import type { FC } from 'react';
66

77
import Button from '@/components/Common/Button';
8+
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
89
import BaseLayout from '@/layouts/Base';
910
import CenteredLayout from '@/layouts/Centered';
1011

@@ -16,7 +17,7 @@ const GlobalErrorPage: FC<{ error: Error }> = ({ error }) => {
1617
<body>
1718
<BaseLayout>
1819
<CenteredLayout>
19-
<div className="glowingBackdrop" />
20+
<GlowingBackdrop />
2021

2122
<main>
2223
500

‎components/Common/GlowingBackdrop/index.module.css‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
.glowingBackdrop {
2+
@apply absolute
3+
left-0
4+
top-0
5+
-z-10
6+
size-full
7+
opacity-50
8+
md:opacity-100;
9+
10+
&::after {
11+
@apply absolute
12+
inset-0
13+
m-auto
14+
aspect-square
15+
w-[300px]
16+
rounded-full
17+
bg-green-300
18+
blur-[120px]
19+
content-['']
20+
dark:bg-green-700;
21+
}
22+
23+
svg {
24+
@apply absolute
25+
inset-0
26+
m-auto
27+
h-[600px]
28+
object-cover
29+
text-neutral-300
30+
dark:text-neutral-900/75;
31+
}
32+
}

‎components/Common/GlowingBackdrop/index.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
3+
import GlowingBackdrop from '@/components/Common/GlowingBackdrop';
4+
5+
type Story = StoryObj<typeof GlowingBackdrop>;
6+
type Meta = MetaObj<typeof GlowingBackdrop>;
7+
8+
export const Default: Story = {};
9+
10+
export default { component: GlowingBackdrop } as Meta;

‎components/Common/GlowingBackdrop/index.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import type { FC } from 'react';
2+
3+
import HexagonGrid from '@/components/Icons/HexagonGrid';
4+
5+
import styles from './index.module.css';
6+
7+
const GlowingBackdrop: FC = () => (
8+
<div className={styles.glowingBackdrop}>
9+
<HexagonGrid />
10+
</div>
11+
);
12+
13+
export default GlowingBackdrop;

‎components/Common/Preview/index.module.css‎

Lines changed: 15 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -7,9 +7,6 @@
77
border
88
border-neutral-900
99
bg-neutral-950
10-
bg-[url('/static/images/patterns/hexagon-grid.svg')]
11-
bg-contain
12-
bg-center
1310
@container/preview;
1411

1512
&::after {
@@ -58,6 +55,21 @@
5855
@xl/preview:text-2xl
5956
@2xl/preview:text-3xl;
6057

58+
.hexagon {
59+
@apply absolute
60+
inset-0
61+
m-auto
62+
size-full
63+
@md/preview:h-3/5
64+
@md/preview:w-3/5
65+
@lg/preview:h-2/3
66+
@lg/preview:w-2/3
67+
@xl/preview:h-3/5
68+
@xl/preview:w-3/5
69+
@2xl/preview:h-2/3
70+
@2xl/preview:w-2/3;
71+
}
72+
6173
.logo {
6274
@apply mx-auto
6375
size-6

‎components/Common/Preview/index.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import classNames from 'classnames';
22
import type { FC } from 'react';
33

4+
import HexagonGrid from '@/components/Icons/HexagonGrid';
45
import JsIconWhite from '@/components/Icons/Logos/JsIconWhite';
56
import type { BlogPreviewType } from '@/types';
67

@@ -14,6 +15,7 @@ type PreviewProps = {
1415
const Preview: FC<PreviewProps> = ({ type = 'announcements', title }) => (
1516
<div className={classNames(styles.root, styles[type])}>
1617
<div className={styles.container} aria-hidden={true}>
18+
<HexagonGrid className={styles.hexagon} />
1719
<JsIconWhite className={styles.logo} />
1820
{title}
1921
</div>

‎components/Icons/HexagonGrid.stories.tsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
import type { Meta as MetaObj, StoryObj } from '@storybook/react';
2+
3+
import HexagonGrid from '@/components/Icons/HexagonGrid';
4+
5+
type Story = StoryObj<typeof HexagonGrid>;
6+
type Meta = MetaObj<typeof HexagonGrid>;
7+
8+
export const Default: Story = {};
9+
10+
export default { component: HexagonGrid } as Meta;

0 commit comments

Comments
 (0)