Skip to content

Commit ad1814f

Browse files
mcnaveenmcnaveen
committed
docs(docs): 📝 improve docs for icon, box components
1 parent 1769985 commit ad1814f

File tree

3 files changed

+227
-163
lines changed

3 files changed

+227
-163
lines changed

‎pages/docs/components/primitives/box.mdx‎

Lines changed: 83 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -35,77 +35,98 @@ You can either pass string elements or pass ReactNodes to the as prop.
3535
Follows all the Reakit composition rules
3636
[Reakit Composition Docs](https://reakit.io/docs/composition/)
3737

38-
<Codeblock
39-
live
40-
code={`
41-
<Box className="space-x-4">
42-
<Box as="a" href="#">
43-
Link
44-
</Box>
45-
<Box as={Button}>AdaptUI Button</Box>
46-
</Box>
47-
`}
48-
/>
38+
<Codeblock live noInline>
4939

50-
## Tailwind CSS example
40+
```
41+
import { Box } from "@adaptui/react-tailwind";
5142
52-
<Codeblock
53-
live
54-
code={`
55-
<Box
56-
as="figure"
57-
className={tcm("p-8 overflow-hidden bg-gray-100 rounded-xl")}
58-
>
59-
<Box
60-
as="img"
61-
className="object-cover w-32 h-32 mx-auto rounded-full md:w-48 md:h-auto md:rounded-md"
62-
src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
63-
alt="Image of a women"
64-
width="384"
65-
height="512"
66-
/>
67-
<Box className="pt-6 space-y-4 text-center md:p-8 md:text-left">
68-
<Box as="blockquote">
69-
<Box as="p" className="text-lg font-semibold">
70-
“Tailwind CSS is the only framework that I've seen scale on large
71-
teams. It’s easy to customize, adapts to any design, and the build
72-
size is tiny.”
43+
export const App = (props) => {
44+
return (
45+
<Box className="space-x-4">
46+
<Box as="a" href="#">
47+
Link
7348
</Box>
49+
<Box as={Button}>AdaptUI Button</Box>
7450
</Box>
75-
<Box as="figcaption" className="font-medium">
76-
<Box className="text-cyan-600">Sarah Dayan</Box>
77-
<Box className="text-gray-500">Staff Engineer, Algolia</Box>
51+
);
52+
};
53+
```
54+
55+
</Codeblock>
56+
57+
## Tailwind CSS example
58+
59+
<Codeblock live noInline>
60+
61+
```
62+
import { Box } from "@adaptui/react-tailwind";
63+
64+
export const App = (props) => {
65+
return (
66+
<Box
67+
as="figure"
68+
className={tcm("overflow-hidden rounded-xl bg-gray-100 p-8")}
69+
>
70+
<Box
71+
as="img"
72+
className="mx-auto h-32 w-32 rounded-full object-cover md:h-auto md:w-48 md:rounded-md"
73+
src="https://tailwindcss.com/_next/static/media/sarah-dayan.a8ff3f1095a58085a82e3bb6aab12eb2.jpg"
74+
alt="Image of a women"
75+
width="384"
76+
height="512"
77+
/>
78+
<Box className="space-y-4 pt-6 text-center md:p-8 md:text-left">
79+
<Box as="blockquote">
80+
<Box as="p" className="text-lg font-semibold">
81+
“Tailwind CSS is the only framework that I've seen scale on large
82+
teams. It easy to customize, adapts to any design, and the build
83+
size is tiny.”
84+
</Box>
85+
</Box>
86+
<Box as="figcaption" className="font-medium">
87+
<Box className="text-cyan-600">Sarah Dayan</Box>
88+
<Box className="text-gray-500">Staff Engineer, Algolia</Box>
89+
</Box>
90+
</Box>
7891
</Box>
79-
</Box>
80-
</Box>
81-
`}
82-
/>
92+
);
93+
};
94+
```
95+
96+
</Codeblock>
8397

8498
## Card example
8599

86-
<Codeblock
87-
live
88-
code={`
89-
<Box as="dl" className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2">
90-
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
91-
<Box as="dt" className="text-sm font-medium text-gray-500 truncate">
92-
Total Subscribers
93-
</Box>
94-
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
95-
71,897
96-
</Box>
97-
</Box>
98-
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
99-
<Box as="dt" className="text-sm font-medium text-gray-500 truncate">
100-
Avg. Open Rate
101-
</Box>
102-
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
103-
58.16%
100+
<Codeblock live noInline>
101+
102+
```
103+
import { Box } from "@adaptui/react-tailwind";
104+
105+
export const App = (props) => {
106+
return (
107+
<Box as="dl" className="grid grid-cols-1 gap-5 mt-5 sm:grid-cols-2">
108+
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
109+
<Box as="dt" className="text-sm font-medium text-gray-500 truncate">
110+
Total Subscribers
111+
</Box>
112+
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
113+
71,897
114+
</Box>
115+
</Box>
116+
<Box className="px-4 py-5 overflow-hidden bg-white rounded-lg shadow sm:p-6">
117+
<Box as="dt" className="text-sm font-medium text-gray-500 truncate">
118+
Avg. Open Rate
119+
</Box>
120+
<Box as="dd" className="mt-1 text-3xl font-semibold text-gray-900">
121+
58.16%
122+
</Box>
123+
</Box>
104124
</Box>
105-
</Box>
106-
</Box>
107-
`}
108-
/>
125+
);
126+
};
127+
```
128+
129+
</Codeblock>
109130

110131
## API Reference
111132

‎pages/docs/components/primitives/button.mdx‎

Lines changed: 82 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -39,34 +39,48 @@ import { Button } from "@adaptui/react-tailwind";
3939
Sizes can be set using the `size` prop. The default size is `md`. The available
4040
sizes are: `sm` `md` `lg` `xl`
4141

42-
<Codeblock
43-
live
44-
code={`
45-
<div className="space-x-2">
46-
<Button size="sm">Small</Button>
47-
<Button size="md">Medium</Button>
48-
<Button size="lg">Large</Button>
49-
<Button size="xl">Extra Large</Button>
50-
</div>
51-
`}
52-
/>
42+
<Codeblock live noInline>
43+
44+
```
45+
import { Button } from "@adaptui/react-tailwind";
46+
47+
export const App = props => {
48+
return (
49+
<div className="space-x-2">
50+
<Button size="sm">Small</Button>
51+
<Button size="md">Medium</Button>
52+
<Button size="lg">Large</Button>
53+
<Button size="xl">Extra Large</Button>
54+
</div>
55+
);
56+
};
57+
```
58+
59+
</Codeblock>
5360

5461
## Button variants
5562

5663
Variants can be set using the `variant` prop. The default variant is `solid`.
5764
The available variants are: `solid` `subtle` `outline` `ghost`
5865

59-
<Codeblock
60-
live
61-
code={`
62-
<div className="space-x-2">
63-
<Button variant="solid">Solid</Button>
64-
<Button variant="subtle">Subtle</Button>
65-
<Button variant="outline">Outline</Button>
66-
<Button variant="ghost">Ghost</Button>
67-
</div>
68-
`}
69-
/>
66+
<Codeblock live noInline>
67+
68+
```
69+
import { Button } from "@adaptui/react-tailwind";
70+
71+
export const App = props => {
72+
return (
73+
<div className="space-x-2">
74+
<Button variant="solid">Solid</Button>
75+
<Button variant="subtle">Subtle</Button>
76+
<Button variant="outline">Outline</Button>
77+
<Button variant="ghost">Ghost</Button>
78+
</div>
79+
);
80+
};
81+
```
82+
83+
</Codeblock>
7084

7185
<Nextra.Callout>
7286
You can add extra variants & sizes via the theme file. Checkout [theming
@@ -78,43 +92,57 @@ The available variants are: `solid` `subtle` `outline` `ghost`
7892
You can pass `iconOnly`, `prefix` and `suffix` props to append or prepend any
7993
content inside of button.
8094

81-
<Codeblock
82-
live
83-
code={`
84-
<div className="space-x-2">
85-
<Button iconOnly={<SlotIcon />} />
86-
<Button prefix={<SlotIcon />}>Search</Button>
87-
<Button suffix={<SlotIcon />}>Search</Button>
88-
<Button prefix={<SlotIcon />} suffix={<SlotIcon />}>
89-
Search
90-
</Button>
91-
</div>
92-
`}
93-
/>
95+
<Codeblock live noInline>
96+
97+
```
98+
import { Button } from "@adaptui/react-tailwind";
99+
100+
export const App = props => {
101+
return (
102+
<div className="space-x-2">
103+
<Button iconOnly={<SlotIcon />} />
104+
<Button prefix={<SlotIcon />}>Search</Button>
105+
<Button suffix={<SlotIcon />}>Search</Button>
106+
<Button prefix={<SlotIcon />} suffix={<SlotIcon />}>
107+
Search
108+
</Button>
109+
</div>
110+
);
111+
};
112+
```
113+
114+
</Codeblock>
94115

95116
## Close Button
96117

97118
Component which comes with accessibility to close the dialogs or other actions
98119

99-
<Codeblock
100-
live
101-
code={`
102-
<div className="space-y-2">
103-
<div className="space-x-2">
104-
<CloseButton size="sm" />
105-
<CloseButton size="md" />
106-
<CloseButton size="lg" />
107-
<CloseButton size="xl" />
108-
</div>
109-
<div className="space-x-2">
110-
<CloseButton variant="solid" />
111-
<CloseButton variant="subtle" />
112-
<CloseButton variant="outline" />
113-
<CloseButton variant="ghost" />
114-
</div>
115-
</div>
116-
`}
117-
/>
120+
<Codeblock live noInline>
121+
122+
```
123+
import { CloseButton } from "@adaptui/react-tailwind";
124+
125+
export const App = props => {
126+
return (
127+
<div className="space-y-2">
128+
<div className="space-x-2">
129+
<CloseButton size="sm" />
130+
<CloseButton size="md" />
131+
<CloseButton size="lg" />
132+
<CloseButton size="xl" />
133+
</div>
134+
<div className="space-x-2">
135+
<CloseButton variant="solid" />
136+
<CloseButton variant="subtle" />
137+
<CloseButton variant="outline" />
138+
<CloseButton variant="ghost" />
139+
</div>
140+
</div>
141+
);
142+
};
143+
```
144+
145+
</Codeblock>
118146

119147
## API Reference
120148

0 commit comments

Comments
 (0)