Skip to content

Commit b6a6f8c

Browse files
MildTomatoMildTomato
committed
chore: add new icons. new card component
1 parent 228f602 commit b6a6f8c

File tree

15 files changed

+354
-241
lines changed

15 files changed

+354
-241
lines changed

‎apps/reference/docs/reference.mdx

+18-25
Original file line numberDiff line numberDiff line change
@@ -6,52 +6,45 @@ hide_table_of_contents: true
66
---
77

88
import Link from '@docusaurus/Link'
9+
import ButtonCard from '@site/src/components/ButtonCard'
910

1011
The Supabase Reference Docs provide technical descriptions of the products and how to use them.
1112

1213
<div class="container" style={{ padding: 0 }}>
1314
<div class="row is-multiline">
1415
{/* Database */}
1516
<div class="col col--6">
16-
<Link
17+
<ButtonCard
18+
icon={"/docs/img/icons/javascript-icon.svg"}
1719
class="card"
1820
to="/docs/reference/javascript"
1921
style={{ height: '100%' }}
20-
>
21-
<div class="card__body">
22-
<h4>JavaScript</h4>
23-
<p>JavaScript and TypeScript documentation.</p>
24-
</div>
25-
</Link>
22+
title="JavaScript"
23+
description="JavaScript and TypeScript documentation."
24+
>
25+
26+
</ButtonCard>
2627
</div>
2728
{/* Auth */}
2829
<div class="col col--6">
29-
<Link class="card" to="/docs/reference/dart" style={{ height: '100%' }}>
30-
<div class="card__body">
31-
<h4>Dart</h4>
32-
<p>Dart and Flutter documentation.</p>
33-
</div>
34-
</Link>
30+
<ButtonCard icon={"/docs/img/icons/dart-icon.svg"} class="card" to="/docs/reference/dart" style={{ height: '100%' }} title="Dart" description="Dart and Flutter documentation.">
31+
32+
</ButtonCard>
3533
</div>
3634
{/* Examples - coming soon */}
3735
<div class="col col--6">
38-
<Link class="card" to="/docs/reference/cli" style={{ height: '100%' }}>
39-
<div class="card__body">
40-
<h4>Supabase CLI</h4>
41-
<p>Manage your Supabase projects.</p>
42-
</div>
43-
</Link>
36+
<ButtonCard icon={"/docs/img/icons/cli-icon.svg"} class="card" to="/docs/reference/cli" style={{ height: '100%' }} title="Supabase CLI" description="Manage your Supabase projects.">
37+
38+
</ButtonCard>
4439
</div>
4540
{/* CLI */}
4641
<div class="col col--6">
47-
<Link class="card" to="/docs/reference/api" style={{ height: '100%' }}>
48-
<div class="card__body">
49-
<h4>Supabase API</h4>
50-
<p>Manage your Supabase projects.</p>
51-
</div>
52-
</Link>
42+
<ButtonCard icon={"/docs/img/icons/api-icon.svg"} class="card" to="/docs/reference/api" style={{ height: '100%' }} title="Supabase API" description="Manage your Supabase projects.">
43+
44+
</ButtonCard>
5345
</div>
5446
{/* */}
47+
5548
</div>
5649
</div>
5750

‎apps/reference/src/components/ButtonCard.js

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
import React from 'react'
2+
import Link from '@docusaurus/Link'
3+
4+
export default function ButtonCard({
5+
children,
6+
color,
7+
icon,
8+
title,
9+
description,
10+
to,
11+
}) {
12+
return (
13+
<Link to={to}>
14+
<div className="button-card__container">
15+
<img src={icon} width={24} />
16+
<h3>{title}</h3>
17+
<p>{description}</p>
18+
</div>
19+
</Link>
20+
)
21+
}

‎apps/reference/src/css/components/_button-card.scss

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
:root {
2+
--custom-button-card-padding: 2rem;
3+
}
4+
5+
.button-card__container {
6+
padding: var(--custom-button-card-padding);
7+
border: 1px solid var(--custom-border-color);
8+
background-color: var(--custom-background-color-diff);
9+
border-radius: 0.5rem;
10+
11+
margin-bottom: var(--ifm-spacing-horizontal) !important;
12+
13+
box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow),
14+
var(--tw-shadow, 0 0 #0000);
15+
16+
img {
17+
margin-bottom: 0.5rem;
18+
}
19+
20+
h3 {
21+
color: var(--custom-content-color-emphasis);
22+
font-size: var(--custom-font-size-lg);
23+
margin-bottom: 0rem;
24+
}
25+
26+
p {
27+
color: var(--custom-content-color-light);
28+
font-size: var(--custom-font-size-sm);
29+
margin-bottom: 0;
30+
}
31+
}

‎apps/reference/src/css/components/_doc-item.scss

+24-35
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,11 @@
11
:root {
2-
--doc-item-container-width: 42rem;
2+
// --doc-item-container-width: 42rem;
33
}
44

55
//overrides
66
#__docusaurus {
7-
//#region ------------ DocItem -------------
87
[class*='docItemCol_'] {
9-
// max-width: initial;
10-
// min-width: 0;
11-
// width: 100%;
12-
flex-direction: column;
13-
14-
@media (min-width: 997px) {
15-
// max-width: initial !important;
16-
}
8+
// flex-direction: column;
179
}
1810

1911
[class*='docItemContainer_'] {
@@ -23,17 +15,14 @@
2315
[class*='docItemContainer_'] {
2416
max-width: var(--doc-item-container-width);
2517
margin: 0 auto;
26-
width: 100%;
27-
// flex-grow: 1;
28-
// min-width: 0;
18+
// width: 100%;
2919
}
3020

3121
.theme-doc-version-banner {
3222
max-width: var(--doc-item-container-width);
3323
margin: 0 auto;
34-
width: 100%;
35-
// flex-grow: 1;
36-
// min-width: 0;
24+
// width: 100%;
25+
margin-bottom: 2rem !important;
3726
}
3827

3928
[class*='docMainContainer_'] {
@@ -43,29 +32,29 @@
4332
// }
4433
// }
4534

46-
> .container {
47-
> .row {
48-
> .col {
49-
display: flex;
50-
justify-content: center;
35+
// > .container {
36+
// > .row {
37+
// > .col {
38+
// display: flex;
39+
// justify-content: center;
5140

52-
min-width: 0;
53-
}
54-
}
55-
}
41+
// min-width: 0;
42+
// }
43+
// }
44+
// }
5645

57-
.spacer {
58-
flex-basis: 5rem;
46+
// .spacer {
47+
// flex-basis: 5rem;
5948

60-
@media (max-width: 996px) {
61-
display: none;
62-
}
63-
}
49+
// @media (max-width: 996px) {
50+
// display: none;
51+
// }
52+
// }
6453
}
6554

66-
[class*='docItemCol_'] {
67-
margin-inline-start: auto;
68-
margin-inline-end: auto;
69-
}
55+
// [class*='docItemCol_'] {
56+
// margin-inline-start: auto;
57+
// margin-inline-end: auto;
58+
// }
7059
//#endregion
7160
}

‎apps/reference/src/css/components/_doc-page.scss

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
//overrides
22
#__docusaurus {
33
[class*='docMainContainer_'] {
4-
max-width: initial;
4+
// max-width: initial;
55
padding-top: var(--doc-page-vertical-spacing);
66

77
> .container {

0 commit comments

Comments
 (0)