Skip to content

Commit 0f1e67a

Browse files
Arif-unArif-un
committed
style: added responsiveness
1 parent ee98415 commit 0f1e67a

File tree

7 files changed

+97
-86
lines changed

7 files changed

+97
-86
lines changed

‎src/components/Welcome.astro‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -16,21 +16,21 @@ import TableOfContent from "./table-of-content";
1616
<GridLayout
1717
columns={8}
1818
lineVariant="vertical"
19-
className="w-8/12 border-0 mx-auto"
19+
className="w-full md:w-8/12 border-0 mx-auto"
2020
>
2121
<Nav />
2222

2323
<div class="flex justify-center w-9/12 mx-auto">
2424
<section>
25-
<div class="mt-56 text-center flex flex-col items-center">
26-
<img src={logo.src} width="350" alt="mix tag input logo" />
25+
<div class="mt-28 md:mt-56 text-center flex flex-col items-center">
26+
<img src={logo.src} width="350" alt="mix tag input logo" class="w-52" />
2727

28-
<p class="text-slate-500 text-sm w-9/12 mx-auto text-balance">
28+
<p class="text-slate-500 dark:text-slate-300 text-xs md:text-sm w-9/12 mx-auto text-balance">
2929
A react input component that pairs text with tags, supports
3030
multiline entry, and provides customizable tag rendering.
3131
</p>
3232

33-
<div class="mt-16 w-full">
33+
<div class="mt-8 md:mt-16 w-full">
3434
<img
3535
src={callout.src}
3636
height="70px"
@@ -64,7 +64,7 @@ import TableOfContent from "./table-of-content";
6464
</h4>
6565
<iframe
6666
src="https://codesandbox.io/embed/wj998t?view=preview&module=%2Fsrc%2FApp.tsx&hidenavigation=1"
67-
class="h-80 rounded-md border-l-0 border-t-[20px] border-r-[16px] border-slate-950 overflow-hidde w-full mx-auto bor"
67+
class="h-80 rounded-lg border-l-0 border-t-[20px] border-r-[16px] border-slate-950 overflow-hidde w-full mx-auto bor"
6868
title="Mix Tag Input example 2"
6969
allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
7070
sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts"

‎src/components/code-snippet.tsx‎

Lines changed: 25 additions & 23 deletions
Original file line numberDiff line numberDiff line change
@@ -12,28 +12,30 @@ export default function CodeSnippet({
1212
className?: string;
1313
}) {
1414
return (
15-
<div
16-
className={ny([
17-
"rounded-lg overflow-hidden text-left text-sm bg-slate-950 mx-auto relative",
18-
className,
19-
])}
20-
>
21-
<Highlight theme={themes.nightOwl} language={language} code={code}>
22-
{({ className, style, tokens, getLineProps, getTokenProps }) => (
23-
<pre className={`${className} pl-8 py-4`} style={style}>
24-
{tokens.map((line, i) => (
25-
<div {...getLineProps({ line, key: i })} key={`line-${i}`}>
26-
{line.map((token, key) => (
27-
<span
28-
{...getTokenProps({ token, key })}
29-
key={`token-${key}`}
30-
/>
31-
))}
32-
</div>
33-
))}
34-
</pre>
35-
)}
36-
</Highlight>
37-
</div>
15+
<div className="grid overflow-hidden">
16+
<div
17+
className={ny([
18+
"rounded-lg overflow-x-auto w-full text-left text-sm bg-slate-950 mx-auto relative",
19+
className,
20+
])}
21+
>
22+
<Highlight theme={themes.nightOwl} language={language} code={code}>
23+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
24+
<pre className={`${className} pl-8 py-4`} style={style}>
25+
{tokens.map((line, i) => (
26+
<div {...getLineProps({ line, key: i })} key={`line-${i}`}>
27+
{line.map((token, key) => (
28+
<span
29+
{...getTokenProps({ token, key })}
30+
key={`token-${key}`}
31+
/>
32+
))}
33+
</div>
34+
))}
35+
</pre>
36+
)}
37+
</Highlight>
38+
</div>
39+
</div>
3840
);
3941
}

‎src/components/header-example.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@ export default function HeaderExample() {
3535

3636
return (
3737
<div className="gap-3">
38-
<div className="flex justify-center gap-3">
38+
<div className="flex flex-col md:flex-row justify-center gap-3">
3939
<div>
4040
<MixInput
4141
ref={mixInputRef}
@@ -54,7 +54,7 @@ export default function HeaderExample() {
5454
</Button>
5555
</div>
5656

57-
<ul className="text-xs text-slate-500 list-disc w-8/12 mx-auto mt-4">
57+
<ul className="text-xs text-slate-500 dark:text-slate-400 list-disc w-10/12 md:w-8/12 mx-auto mt-4">
5858
<li>Try place caret anywhere in text and add tag</li>
5959
</ul>
6060
</div>

‎src/components/install-snippet.tsx‎

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ export default function InstallSnippet() {
99
<h4 id="installation" className="text-left mb-2 scroll-mt-36">
1010
Installation
1111
</h4>
12-
<div className="rounded-lg overflow-hidden text-left text-sm bg-slate-950 mx-auto relative">
12+
<div className="rounded-lg text-xs overflow-auto text-left md:text-sm bg-slate-950 mx-auto relative">
1313
<PackageCopyButton
1414
packageName="@arif-un/react-mix-tag-input"
1515
className="absolute right-1 top-2"
@@ -20,7 +20,10 @@ export default function InstallSnippet() {
2020
{tokens.map((line, i) => (
2121
<div {...getLineProps({ line, key: i })} key={`line-${i}`}>
2222
{line.map((token, key) => (
23-
<span {...getTokenProps({ token, key })} key={`token-${key}`} />
23+
<span
24+
{...getTokenProps({ token, key })}
25+
key={`token-${key}`}
26+
/>
2427
))}
2528
</div>
2629
))}

‎src/components/snippet.tsx‎

Lines changed: 19 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,25 @@ const [value, setValue] = useState<MixInputValues>([
1010

1111
export default function Snippet() {
1212
return (
13-
<div className="rounded-lg overflow-hidden text-left text-sm bg-slate-950 w-11/12 mx-auto mt-20">
14-
<Highlight theme={themes.nightOwl} language="tsx" code={code}>
15-
{({ className, style, tokens, getLineProps, getTokenProps }) => (
16-
<pre className={`${className} pl-8 py-4`} style={style}>
17-
{tokens.map((line, i) => (
18-
<div {...getLineProps({ line, key: i })} key={`line-${i}`}>
19-
{line.map((token, key) => (
20-
<span
21-
{...getTokenProps({ token, key })}
22-
key={`token-${key}`}
23-
/>
24-
))}
25-
</div>
26-
))}
27-
</pre>
28-
)}
29-
</Highlight>
13+
<div className="w-11/12 grid overflow-hidden md:mt-20 mt-10">
14+
<div className="rounded-lg w-full text-left text-xs md:text-sm bg-slate-950 mx-auto overflow-auto">
15+
<Highlight theme={themes.nightOwl} language="tsx" code={code}>
16+
{({ className, style, tokens, getLineProps, getTokenProps }) => (
17+
<pre className={`${className} pl-8 py-4`} style={style}>
18+
{tokens.map((line, i) => (
19+
<div {...getLineProps({ line, key: i })} key={`line-${i}`}>
20+
{line.map((token, key) => (
21+
<span
22+
{...getTokenProps({ token, key })}
23+
key={`token-${key}`}
24+
/>
25+
))}
26+
</div>
27+
))}
28+
</pre>
29+
)}
30+
</Highlight>
31+
</div>
3032
</div>
3133
);
3234
}

‎src/components/table-of-content.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -75,7 +75,7 @@ export default function TableOfContent({ className }: { className?: string }) {
7575

7676
return (
7777
<div
78-
className={ny(["fixed right-6 top-28 text-xs text-slate-400 font-light", className])}
78+
className={ny(["fixed hidden md:inline-block right-6 top-28 text-xs text-slate-400 font-light", className])}
7979
>
8080
<ul className="">
8181
{links.map((link) => (

‎src/components/table.tsx‎

Lines changed: 39 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -8,41 +8,45 @@ export default function Table({
88
headers?: string[];
99
}) {
1010
return (
11-
<table className="bg-white dark:bg-slate-900 text-xs text-slate-600 dark:text-slate-300 border-separate border-spacing-0 w-full">
12-
<thead className="bg-slate-100 dark:bg-slate-800 p-2 rounded text-slate-500">
13-
<tr>
14-
{headers.map((header, index) => (
15-
<th
16-
key={`${index}-${header}`}
17-
className={ny([
18-
`px-3 py-2 text-left font-medium`,
19-
index === 0 && "rounded-tl-lg",
20-
index === headers.length - 1 && "rounded-tr-lg",
21-
])}
22-
>
23-
{header}
24-
</th>
25-
))}
26-
</tr>
27-
</thead>
28-
<tbody className="[&>tr:last-child>td:first-child]:rounded-bl-lg [&>tr:last-child>td]:border-b [&>tr:last-child>td:last-child]:rounded-br-lg ">
29-
{rows.map((item, index) => (
30-
<tr key={`${index}-${item.prop}`}>
31-
<td className="px-3 py-2 border font-mono text-xs text-slate-500 border-r-0 border-b-0">
32-
<code className="border rounded-md p-0.5 bg-slate-100 dark:bg-slate-800 dark:text-slate-400">
33-
{item.prop}
34-
</code>
35-
</td>
36-
<td className="border py-1 px-2 border-r-0 border-b-0">
37-
{item.description}
38-
</td>
39-
<td className="border py-1 px-2 border-r-0 border-b-0">
40-
{item.default}
41-
</td>
42-
<td className="border py-1 px-2 border-b-0 min-w-60">{item.type}</td>
11+
<div className="grid overflow-x-auto">
12+
<table className="bg-white dark:bg-slate-900 text-xs text-slate-600 dark:text-slate-300 border-separate border-spacing-0 w-full">
13+
<thead className="bg-slate-100 dark:bg-slate-800 p-2 rounded text-slate-500">
14+
<tr>
15+
{headers.map((header, index) => (
16+
<th
17+
key={`${index}-${header}`}
18+
className={ny([
19+
`px-3 py-2 text-left font-medium`,
20+
index === 0 && "rounded-tl-lg",
21+
index === headers.length - 1 && "rounded-tr-lg",
22+
])}
23+
>
24+
{header}
25+
</th>
26+
))}
4327
</tr>
44-
))}
45-
</tbody>
46-
</table>
28+
</thead>
29+
<tbody className="[&>tr:last-child>td:first-child]:rounded-bl-lg [&>tr:last-child>td]:border-b [&>tr:last-child>td:last-child]:rounded-br-lg">
30+
{rows.map((item, index) => (
31+
<tr key={`${index}-${item.prop}`}>
32+
<td className="px-3 py-2 border font-mono text-xs text-slate-500 border-r-0 border-b-0">
33+
<code className="border rounded-md p-0.5 bg-slate-100 dark:bg-slate-800 dark:text-slate-400">
34+
{item.prop}
35+
</code>
36+
</td>
37+
<td className="border py-1 px-2 border-r-0 border-b-0">
38+
{item.description}
39+
</td>
40+
<td className="border py-1 px-2 border-r-0 border-b-0">
41+
{item.default}
42+
</td>
43+
<td className="border py-1 px-2 border-b-0 min-w-60">
44+
{item.type}
45+
</td>
46+
</tr>
47+
))}
48+
</tbody>
49+
</table>
50+
</div>
4751
);
4852
}

0 commit comments

Comments
 (0)