Skip to content

Commit fff0501

Browse files
siriwatknpsiriwatknp
authored
[pigment-css][material-ui] Render badge demos (#41353)
1 parent 0a478bb commit fff0501

File tree

3 files changed

+151
-6
lines changed

3 files changed

+151
-6
lines changed

‎apps/pigment-next-app/src/app/material-ui/react-badge/page.tsx‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
'use client';
2+
import * as React from 'react';
3+
import AccessibleBadges from '../../../../../../docs/data/material/components/badges/AccessibleBadges';
4+
import BadgeMax from '../../../../../../docs/data/material/components/badges/BadgeMax';
5+
import BadgeOverlap from '../../../../../../docs/data/material/components/badges/BadgeOverlap';
6+
import BadgeVisibility from '../../../../../../docs/data/material/components/badges/BadgeVisibility';
7+
import ColorBadge from '../../../../../../docs/data/material/components/badges/ColorBadge';
8+
import CustomizedBadges from '../../../../../../docs/data/material/components/badges/CustomizedBadges';
9+
import DotBadge from '../../../../../../docs/data/material/components/badges/DotBadge';
10+
import ShowZeroBadge from '../../../../../../docs/data/material/components/badges/ShowZeroBadge';
11+
import SimpleBadge from '../../../../../../docs/data/material/components/badges/SimpleBadge';
12+
13+
export default function Badges() {
14+
return (
15+
<React.Fragment>
16+
<section>
17+
<h2> Accessible Badges</h2>
18+
<div className="demo-container">
19+
<AccessibleBadges />
20+
</div>
21+
</section>
22+
<section>
23+
<h2> Badge Max</h2>
24+
<div className="demo-container">
25+
<BadgeMax />
26+
</div>
27+
</section>
28+
<section>
29+
<h2> Badge Overlap</h2>
30+
<div className="demo-container">
31+
<BadgeOverlap />
32+
</div>
33+
</section>
34+
<section>
35+
<h2> Badge Visibility</h2>
36+
<div className="demo-container">
37+
<BadgeVisibility />
38+
</div>
39+
</section>
40+
<section>
41+
<h2> Color Badge</h2>
42+
<div className="demo-container">
43+
<ColorBadge />
44+
</div>
45+
</section>
46+
<section>
47+
<h2> Customized Badges</h2>
48+
<div className="demo-container">
49+
<CustomizedBadges />
50+
</div>
51+
</section>
52+
<section>
53+
<h2> Dot Badge</h2>
54+
<div className="demo-container">
55+
<DotBadge />
56+
</div>
57+
</section>
58+
<section>
59+
<h2> Show Zero Badge</h2>
60+
<div className="demo-container">
61+
<ShowZeroBadge />
62+
</div>
63+
</section>
64+
<section>
65+
<h2> Simple Badge</h2>
66+
<div className="demo-container">
67+
<SimpleBadge />
68+
</div>
69+
</section>
70+
</React.Fragment>
71+
);
72+
}

‎apps/pigment-vite-app/src/pages/material-ui/react-badge.tsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import * as React from 'react';
2+
import MaterialUILayout from '../../Layout';
3+
import AccessibleBadges from '../../../../../docs/data/material/components/badges/AccessibleBadges.tsx';
4+
import BadgeMax from '../../../../../docs/data/material/components/badges/BadgeMax.tsx';
5+
import BadgeOverlap from '../../../../../docs/data/material/components/badges/BadgeOverlap.tsx';
6+
import BadgeVisibility from '../../../../../docs/data/material/components/badges/BadgeVisibility.tsx';
7+
import ColorBadge from '../../../../../docs/data/material/components/badges/ColorBadge.tsx';
8+
import CustomizedBadges from '../../../../../docs/data/material/components/badges/CustomizedBadges.tsx';
9+
import DotBadge from '../../../../../docs/data/material/components/badges/DotBadge.tsx';
10+
import ShowZeroBadge from '../../../../../docs/data/material/components/badges/ShowZeroBadge.tsx';
11+
import SimpleBadge from '../../../../../docs/data/material/components/badges/SimpleBadge.tsx';
12+
13+
export default function Badges() {
14+
return (
15+
<MaterialUILayout>
16+
<h1>Badges</h1>
17+
<section>
18+
<h2> Accessible Badges</h2>
19+
<div className="demo-container">
20+
<AccessibleBadges />
21+
</div>
22+
</section>
23+
<section>
24+
<h2> Badge Max</h2>
25+
<div className="demo-container">
26+
<BadgeMax />
27+
</div>
28+
</section>
29+
<section>
30+
<h2> Badge Overlap</h2>
31+
<div className="demo-container">
32+
<BadgeOverlap />
33+
</div>
34+
</section>
35+
<section>
36+
<h2> Badge Visibility</h2>
37+
<div className="demo-container">
38+
<BadgeVisibility />
39+
</div>
40+
</section>
41+
<section>
42+
<h2> Color Badge</h2>
43+
<div className="demo-container">
44+
<ColorBadge />
45+
</div>
46+
</section>
47+
<section>
48+
<h2> Customized Badges</h2>
49+
<div className="demo-container">
50+
<CustomizedBadges />
51+
</div>
52+
</section>
53+
<section>
54+
<h2> Dot Badge</h2>
55+
<div className="demo-container">
56+
<DotBadge />
57+
</div>
58+
</section>
59+
<section>
60+
<h2> Show Zero Badge</h2>
61+
<div className="demo-container">
62+
<ShowZeroBadge />
63+
</div>
64+
</section>
65+
<section>
66+
<h2> Simple Badge</h2>
67+
<div className="demo-container">
68+
<SimpleBadge />
69+
</div>
70+
</section>
71+
</MaterialUILayout>
72+
);
73+
}

‎scripts/zero-render-mui-demos.mjs‎ renamed to ‎scripts/pigmentcss-render-mui-demos.mjs‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -70,16 +70,16 @@ ${renders.join('\n')}
7070
}
7171
`;
7272

73-
// Create the page in zero-runtime apps
73+
// Create the page in pigment apps
7474
const nextFilepath = path.join(
7575
process.cwd(),
76-
`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}/page.tsx`,
76+
`apps/pigment-next-app/src/app/material-ui/${args[0]}/page.tsx`,
7777
);
7878
const prettiedNextFileContent = await prettier.format(nextFileContent, {
7979
...prettierConfig,
8080
filepath: nextFilepath,
8181
});
82-
await fse.mkdirp(`apps/zero-runtime-next-app/src/app/material-ui/${args[0]}`);
82+
await fse.mkdirp(`apps/pigment-next-app/src/app/material-ui/${args[0]}`);
8383
await fse.writeFile(nextFilepath, prettiedNextFileContent);
8484

8585
/**
@@ -102,16 +102,16 @@ ${renders.join('\n')}
102102
);
103103
}
104104
`;
105-
// Create the page in zero-runtime apps
105+
// Create the page in pigment apps
106106
const viteFilepath = path.join(
107107
process.cwd(),
108-
`apps/zero-runtime-vite-app/src/pages/material-ui/${args[0]}.tsx`,
108+
`apps/pigment-vite-app/src/pages/material-ui/${args[0]}.tsx`,
109109
);
110110
const prettiedViteFileContent = await prettier.format(viteFileContent, {
111111
...prettierConfig,
112112
filepath: viteFilepath,
113113
});
114-
await fse.mkdirp(`apps/zero-runtime-vite-app/src/pages/material-ui`);
114+
await fse.mkdirp(`apps/pigment-vite-app/src/pages/material-ui`);
115115
await fse.writeFile(viteFilepath, prettiedViteFileContent);
116116
}
117117

0 commit comments

Comments
 (0)