git.iko.soy/urbit.org
on master help sign in
Tabs: style tabs
e7b15d7Matilde Park
components/Tabs.js+10−9
compare with master
unifiedsplit
@@ -7,16 +7,17 @@ const Tabs = ({ labels, children }) => {
7
7
8 return (
8 return (
9 <TabContext.Provider value={currentTab}>
9 <TabContext.Provider value={currentTab}>
10− <ul role="tablist">
10+ <ul className="flex items-center display cursor-pointer space-x-4">
11 {labels.map((label) => (
11 {labels.map((label) => (
12− <li key={label}>
12+ <li
13− <button
13+ className={
14− role="tab"
14+ "block bg-wall-100 tab rounded-xl " +
15− aria-selected={label === currentTab}
15+ (currentTab === label ? "font-semibold" : "")
16+ }
17+ key={label}
16− onClick={() => setCurrentTab(label)}
18+ onClick={() => setCurrentTab(label)}
17− >
19+ >
18− {label}
20+ {label}
19− </button>
20 </li>
21 </li>
21 ))}
22 ))}
22 </ul>
23 </ul>
styles/globals.css+4
@@ -217,3 +217,7 @@ a:hover {
217 position: static !important;
217 position: static !important;
218 border-radius: 0 !important;
218 border-radius: 0 !important;
219}
219}
220+
221+.markdown .display .tab {
222+ @apply p-3;
223+}
styles/markdown.css+9
@@ -10,6 +10,15 @@
10 @apply pt-0 mt-0;
10 @apply pt-0 mt-0;
11}
11}
12
12
13+.markdown .display * {
14+ margin-top: unset;
15+ margin-bottom: unset;
16+ margin-left: unset;
17+ padding: unset;
18+ padding-top: unset;
19+ padding-bottom: unset;
20+}
21+
13.markdown p,
22.markdown p,
14.markdown ul,
23.markdown ul,
15.markdown ol,
24.markdown ol,