Skip to content

Commit 1f84514

Browse files
Studio384Studio384
committed
Revamp demos
1 parent 480581f commit 1f84514

1 file changed

Lines changed: 115 additions & 191 deletions

File tree

‎docs/src/app/Icon.tsx‎

Lines changed: 115 additions & 191 deletions
Original file line numberDiff line numberDiff line change
@@ -6,9 +6,10 @@ import Codeblock from '@/design/components/Codeblock';
66
import Header from '@/design/layout/LayoutElements/Header';
77
import { IIcon, ILibraryIcon } from '@/types';
88

9-
import { Alert, Avatar, Box, Button, Card, Chip, IconButton, Input, Stack, Typography } from '@mui/joy';
9+
import { Input } from '@base-ui/react';
1010
import Amicon, { aiArrowLeft, aiXmark } from '@studio384/amicons';
1111

12+
import { Button } from './Components/Button';
1213
import IconCard from './Components/IconCard';
1314
import LargeIconGrid from './Components/LargeIconGrid';
1415

@@ -47,54 +48,56 @@ export default function Icon() {
4748
return (
4849
<>
4950
<Header>
50-
<Stack direction="row" alignItems="center" justifyContent="space-between" gap={5}>
51+
<div className="flex flex-row items-center justify-between">
5152
<div className="flex grow flex-col items-start justify-start gap-2">
52-
<IconButton variant="plain" color="primary" onClick={() => navigate('/icons')}>
53+
<Button icon plain onClick={() => navigate('/icons')}>
5354
<Amicon icon={aiArrowLeft} />
54-
</IconButton>
55-
<Typography level="h1" fontSize={48}>
56-
{icon?.title}
57-
</Typography>
55+
</Button>
56+
<h1 className="font-display text-5xl font-medium">{icon?.title}</h1>
5857

5958
{(icon?.categories || icon?.tags) && (
6059
<div className="flex gap-1">
6160
{icon?.categories?.map((cat) => (
62-
<Chip variant="solid" color="primary" size="sm" key={cat}>
63-
{cat}
64-
</Chip>
61+
<NavLink
62+
key={cat}
63+
to={`/icons?${createSearchParams({ category: cat })}`}
64+
className="font-display flex items-center gap-1 rounded-full bg-indigo-500 px-2.5 py-1 text-xs text-white hover:bg-indigo-600"
65+
>
66+
{firstCategory}
67+
</NavLink>
6568
))}
6669
{icon?.tags?.map((tag) => (
67-
<Chip key={tag} variant="outlined" size="sm">
70+
<div key={tag} className="font-display flex items-center gap-1 rounded-full bg-zinc-50 px-2.5 py-1 text-xs">
6871
{tag}
69-
</Chip>
72+
</div>
7073
))}
7174
</div>
7275
)}
7376

7477
<div className="mt-3 flex items-center justify-center gap-3">
7578
{icon?.created && (
7679
<div className="flex gap-2">
77-
<Typography>Created</Typography>{' '}
78-
<Chip size="sm" color="primary">
80+
<p className="text-sm">Created</p>{' '}
81+
<div className="font-display flex items-center gap-1 rounded-full border border-indigo-300 bg-indigo-200 px-1.5 py-px text-xs text-indigo-600">
7982
{icon?.created}
80-
</Chip>
83+
</div>
8184
</div>
8285
)}
8386
{icon?.updated && (
8487
<div className="flex gap-2">
85-
<Typography>Last updated</Typography>{' '}
86-
<Chip size="sm" color="primary">
88+
<p className="text-sm">Last updated</p>{' '}
89+
<div className="font-display flex items-center gap-1 rounded-full border border-indigo-300 bg-indigo-200 px-1.5 py-px text-xs text-indigo-600">
8790
{icon?.updated}
88-
</Chip>
91+
</div>
8992
</div>
9093
)}
9194
</div>
9295
</div>
9396
<LargeIconGrid icon={viIcon?.icon} />
94-
</Stack>
97+
</div>
9598
</Header>
9699
<div className="container m-auto my-8 max-w-7xl px-4">
97-
<Stack gap={4} sx={{ my: 5 }}>
100+
<div className="flex flex-col gap-6">
98101
<div className="flex flex-col gap-3">
99102
<h3 className="font-display text-2xl font-medium">Usage</h3>
100103
<Codeblock>
@@ -105,179 +108,100 @@ export default function Icon() {
105108
</div>
106109
<div className="flex flex-col gap-3">
107110
<h3 className="font-display text-2xl font-medium">Examples</h3>
108-
<Box
109-
sx={{
110-
display: 'grid',
111-
gap: 3,
112-
gridTemplateColumns: {
113-
xs: 'repeat(2, minmax(0, 1fr))',
114-
sm: 'repeat(3, minmax(0, 1fr))',
115-
md: 'repeat(4, minmax(0, 1fr))',
116-
lg: 'repeat(6, minmax(0, 1fr))'
117-
},
118-
gridAutoRows: '140px'
119-
}}
120-
>
121-
<Card
122-
variant="solid"
123-
color="primary"
124-
sx={{ fontSize: 'xl4', display: 'flex', justifyContent: 'center', alignItems: 'center', order: 1, boxShadow: 'none' }}
125-
>
126-
<Stack justifyContent="center" alignItems="center" gap={1}>
127-
<Amicon icon={viIcon?.icon} bounce />
128-
<Typography sx={{ color: 'primary.200', lineHeight: 1 }}>Bounce</Typography>
129-
</Stack>
130-
</Card>
131-
<Card
132-
variant="outlined"
133-
color="primary"
134-
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gridColumn: 'span 2', order: 2, boxShadow: 'none' }}
135-
>
136-
<Typography fontSize="xl4" color="primary" startDecorator={<Amicon icon={viIcon?.icon} />} noWrap sx={{ maxWidth: 1 }}>
137-
{icon?.title}
138-
</Typography>
139-
</Card>
140-
<Card
141-
variant="solid"
142-
color="primary"
143-
sx={{
144-
fontSize: 'xl4',
145-
display: 'flex',
146-
justifyContent: 'center',
147-
alignItems: 'center',
148-
bgcolor: 'primary.300',
149-
gridColumn: 'span 2',
150-
order: 3,
151-
boxShadow: 'none'
152-
}}
153-
>
154-
<Stack direction="row" gap={10}>
155-
<Stack justifyContent="center" alignItems="center" gap={1}>
156-
<Amicon icon={viIcon?.icon} spin />
157-
<Typography sx={{ color: 'primary.800', lineHeight: 1 }}>Spin</Typography>
158-
</Stack>
159-
<Stack justifyContent="center" alignItems="center" gap={1}>
160-
<Amicon icon={viIcon?.icon} spin="pulse" />
161-
<Typography sx={{ color: 'primary.800', lineHeight: 1 }}>Pulse</Typography>
162-
</Stack>
163-
</Stack>
164-
</Card>
165-
<Card
166-
variant="outlined"
167-
color="primary"
168-
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', order: { xs: 4, md: 2, lg: 4 }, boxShadow: 'none' }}
169-
>
170-
<Input startDecorator={<Amicon icon={viIcon?.icon} />} placeholder={icon?.title} sx={{ maxWidth: 1 }} />
171-
</Card>
172-
<Card
173-
variant="outlined"
174-
color="primary"
175-
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', order: { xs: 6, sm: 10, lg: 5 }, boxShadow: 'none' }}
176-
>
177-
<Avatar color="primary" size="lg" variant="solid">
111+
<div className="grid auto-rows-[140px] grid-cols-2 gap-6 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6">
112+
<div className="order-1 flex items-center justify-center rounded-lg border border-indigo-600 bg-indigo-500 text-white">
113+
<div className="flex flex-col items-center justify-center gap-2">
114+
<Amicon icon={viIcon?.icon} bounce className="text-4xl" />
115+
<p className="text-base/5">Bounce</p>
116+
</div>
117+
</div>
118+
<div className="order-2 col-span-2 flex items-center justify-center rounded-lg border border-indigo-300 bg-zinc-100">
119+
<div className="flex flex-row flex-nowrap items-center gap-4 text-indigo-600">
120+
<Amicon icon={viIcon?.icon} className="text-4xl" />
121+
<span className="text-4xl text-nowrap">{icon?.title}</span>
122+
</div>
123+
</div>
124+
<div className="order-3 col-span-2 flex items-center justify-center rounded-lg border border-indigo-400 bg-indigo-300 text-indigo-800">
125+
<div className="flex flex-row gap-20">
126+
<div className="flex flex-col items-center justify-center gap-2">
127+
<Amicon icon={viIcon?.icon} spin className="text-4xl" />
128+
<p className="text-base/5">Spin</p>
129+
</div>
130+
<div className="flex flex-col items-center justify-center gap-2">
131+
<Amicon icon={viIcon?.icon} spin="pulse" className="text-4xl" />
132+
<p className="text-base/5">Pulse</p>
133+
</div>
134+
</div>
135+
</div>
136+
<div className="order-4 flex items-center justify-center rounded-lg border border-indigo-300 bg-zinc-100 p-4 md:order-2 lg:order-4">
137+
<div className="flex h-9 w-56 flex-row items-center justify-center rounded-md border border-zinc-300 focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600">
138+
<Amicon icon={viIcon?.icon} className="ms-2.5" />
139+
<Input className="h-9 w-full px-2 text-base text-zinc-900 outline-0" placeholder={icon?.title} />
140+
</div>
141+
</div>
142+
<div className="order-6 flex items-center justify-center rounded-lg border border-indigo-300 bg-zinc-100 sm:order-10 lg:order-5">
143+
<div className="flex size-12 items-center justify-center rounded-full border border-indigo-600 bg-indigo-500 text-xl text-white">
178144
<Amicon icon={viIcon?.icon} />
179-
</Avatar>
180-
</Card>
181-
<Card
182-
variant="soft"
183-
color="primary"
184-
sx={{
185-
fontSize: 'xl4',
186-
display: 'flex',
187-
justifyContent: 'center',
188-
alignItems: 'center',
189-
gridColumn: { xs: 'span 2', sm: 'span 3', md: 'span 2', lg: 'span 3' },
190-
order: 7,
191-
boxShadow: 'none'
192-
}}
193-
>
194-
<Stack direction="row" gap={10}>
195-
<Stack justifyContent="center" alignItems="center" gap={1}>
196-
<Amicon icon={viIcon?.icon} rotate={90} />
197-
<Typography sx={{ lineHeight: 1 }}>90°</Typography>
198-
</Stack>
199-
<Stack justifyContent="center" alignItems="center" gap={1}>
200-
<Amicon icon={viIcon?.icon} rotate={180} />
201-
<Typography sx={{ lineHeight: 1 }}>180°</Typography>
202-
</Stack>
203-
<Stack justifyContent="center" alignItems="center" gap={1}>
204-
<Amicon icon={viIcon?.icon} rotate={270} />
205-
<Typography sx={{ lineHeight: 1 }}>270°</Typography>
206-
</Stack>
207-
</Stack>
208-
</Card>
209-
<Card variant="outlined" color="primary" sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', order: 8, boxShadow: 'none' }}>
210-
<Avatar color="primary" size="lg" variant="outlined" sx={{ borderRadius: 'md', bgcolor: 'primary.200', borderColor: 'primary.400' }}>
145+
</div>
146+
</div>
147+
<div className="order-7 col-span-2 flex items-center justify-center rounded-lg border border-indigo-300 bg-indigo-200 text-indigo-800 sm:col-span-3 md:col-span-2 lg:col-span-3">
148+
<div className="flex flex-row gap-20">
149+
<div className="flex flex-col items-center justify-center gap-2">
150+
<Amicon icon={viIcon?.icon} rotate={90} className="text-4xl" />
151+
<p className="text-base/5 text-indigo-800">90°</p>
152+
</div>
153+
<div className="flex flex-col items-center justify-center gap-2">
154+
<Amicon icon={viIcon?.icon} rotate={180} className="text-4xl" />
155+
<p className="text-base/5 text-indigo-800">180°</p>
156+
</div>
157+
<div className="flex flex-col items-center justify-center gap-2">
158+
<Amicon icon={viIcon?.icon} rotate={270} className="text-4xl" />
159+
<p className="text-base/5 text-indigo-800">270°</p>
160+
</div>
161+
</div>
162+
</div>
163+
<div className="order-8 flex items-center justify-center rounded-lg border border-indigo-300 bg-zinc-100">
164+
<div className="flex size-12 items-center justify-center rounded-lg border border-indigo-300 bg-indigo-200 text-xl text-indigo-600">
211165
<Amicon icon={viIcon?.icon} />
212-
</Avatar>
213-
</Card>
214-
<Card
215-
variant="solid"
216-
color="primary"
217-
sx={{ fontSize: 'xl4', display: 'flex', justifyContent: 'center', alignItems: 'center', bgcolor: 'primary.700', order: 9, boxShadow: 'none' }}
218-
>
219-
<Stack justifyContent="center" alignItems="center" gap={1}>
220-
<Amicon icon={viIcon?.icon} beat />
221-
<Typography sx={{ color: 'primary.200', lineHeight: 1 }}>Beat</Typography>
222-
</Stack>
223-
</Card>
224-
<Card
225-
variant="solid"
226-
color="primary"
227-
sx={{
228-
fontSize: 'xl4',
229-
display: 'flex',
230-
justifyContent: 'center',
231-
alignItems: 'center',
232-
gridColumn: { xs: 'span 2', sm: 'span 3', md: 'span 2', lg: 'span 3' },
233-
order: { xs: 10, md: 8, lg: 10 },
234-
boxShadow: 'none'
235-
}}
236-
>
237-
<Stack direction="row" gap={10}>
238-
<Stack justifyContent="center" alignItems="center" gap={1}>
239-
<Amicon icon={viIcon?.icon} flip />
240-
<Typography sx={{ color: 'common.white', lineHeight: 1 }}>Flip</Typography>
241-
</Stack>
242-
<Stack justifyContent="center" alignItems="center" gap={1}>
243-
<Amicon icon={viIcon?.icon} flip="x" />
244-
<Typography sx={{ color: 'common.white', lineHeight: 1 }}>X</Typography>
245-
</Stack>
246-
<Stack justifyContent="center" alignItems="center" gap={1}>
247-
<Amicon icon={viIcon?.icon} flip="y" />
248-
<Typography sx={{ color: 'common.white', lineHeight: 1 }}>Y</Typography>
249-
</Stack>
250-
</Stack>
251-
</Card>
252-
<Card
253-
variant="soft"
254-
color="primary"
255-
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', order: { xs: 1, sm: 11 }, boxShadow: 'none' }}
256-
>
257-
<Button size="lg" startDecorator={<Amicon icon={viIcon?.icon} />}>
258-
Button
166+
</div>
167+
</div>
168+
<div className="order-9 flex items-center justify-center rounded-lg border border-indigo-950 bg-indigo-800 text-white">
169+
<div className="flex flex-col items-center justify-center gap-2">
170+
<Amicon icon={viIcon?.icon} beat className="text-4xl" />
171+
<p className="text-base/5">Beat</p>
172+
</div>
173+
</div>
174+
<div className="order-10 col-span-2 flex items-center justify-center rounded-lg border border-indigo-600 bg-indigo-500 text-white sm:col-span-3 md:order-8 md:col-span-2 lg:order-10 lg:col-span-3">
175+
<div className="flex flex-row gap-20">
176+
<div className="flex flex-col items-center justify-center gap-2">
177+
<Amicon icon={viIcon?.icon} flip className="text-4xl" />
178+
<p className="text-base/5">Flip</p>
179+
</div>
180+
<div className="flex flex-col items-center justify-center gap-2">
181+
<Amicon icon={viIcon?.icon} flip="x" className="text-4xl" />
182+
<p className="text-base/5">X</p>
183+
</div>
184+
<div className="flex flex-col items-center justify-center gap-2">
185+
<Amicon icon={viIcon?.icon} flip="y" className="text-4xl" />
186+
<p className="text-base/5">Y</p>
187+
</div>
188+
</div>
189+
</div>
190+
<div className="order-1 flex items-center justify-center rounded-lg border border-indigo-300 bg-indigo-200 text-indigo-800 sm:order-11">
191+
<Button>
192+
<Amicon icon={viIcon?.icon} /> Button
259193
</Button>
260-
</Card>
261-
<Card
262-
variant="outlined"
263-
color="primary"
264-
sx={{ display: 'flex', justifyContent: 'center', alignItems: 'center', gridColumn: 'span 2', order: 12, boxShadow: 'none' }}
265-
>
266-
<Alert
267-
variant="outlined"
268-
color="primary"
269-
sx={{ bgcolor: 'primary.100' }}
270-
startDecorator={<Amicon icon={viIcon?.icon} />}
271-
endDecorator={
272-
<IconButton size="sm" variant="solid" color="primary">
273-
<Amicon icon={aiXmark} />
274-
</IconButton>
275-
}
276-
>
277-
Hi! We're demoing you an icon.
278-
</Alert>
279-
</Card>
280-
</Box>
194+
</div>
195+
<div className="order-12 col-span-2 flex items-center justify-center rounded-lg border border-indigo-300 bg-zinc-100">
196+
<div className="flex flex-row items-center gap-3 rounded-md border border-indigo-300 bg-indigo-200 p-3 text-indigo-500">
197+
<Amicon icon={viIcon?.icon} />
198+
<span className="text-sm font-medium">Hi! We're demoing you an icon.</span>
199+
<Button size="sm" icon>
200+
<Amicon icon={aiXmark} />
201+
</Button>
202+
</div>
203+
</div>
204+
</div>
281205
</div>
282206
{firstCategory && categoryIcons.length >= 1 && (
283207
<div className="flex flex-col gap-3">
@@ -297,7 +221,7 @@ export default function Icon() {
297221
</div>
298222
</div>
299223
)}
300-
</Stack>
224+
</div>
301225
</div>
302226
</>
303227
);

0 commit comments

Comments
 (0)