Skip to content

Commit

Permalink
update example
Browse files Browse the repository at this point in the history
  • Loading branch information
@monodyle
monodyle committed Aug 31, 2023
1 parent e3f1122 commit fd19de1
Show file tree
Hide file tree
Showing 8 changed files with 192 additions and 80 deletions.
2 changes: 1 addition & 1 deletion .editorconfig
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,4 +6,4 @@ end_of_line = lf
indent_size = 2
indent_style = space
insert_final_newline = true
trim_trailing_whitespace = true
trim_trailing_whitespace = true
2 changes: 2 additions & 0 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@
<meta property="twitter:title" content="Hiki — A dialog turn into drawer on small viewport" />
<meta property="twitter:description" content="React dialog component turn into drawer on small viewport" />
<meta property="twitter:image" content="https://hiki.minhle.space/featured.png" />

<script src="https://cdn.tailwindcss.com"></script>
</head>

<body>
Expand Down
10 changes: 6 additions & 4 deletions src/app.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -12,22 +12,24 @@
flex-direction: column;
align-items: center;
gap: 8px;
margin: 0;
margin: 0;
}

.romaji {
font-size: 16px;
line-height: 8px;
color: var(--stone-500)
font-weight: 500;
color: var(--stone-500);
}

.japanese {
font-family: 'Dela Gothic One', cursive;
font-family: "Dela Gothic One", cursive;
font-size: 56px;
font-weight: 600;
line-height: 48px;
}

.desc {
color: var(--stone-500)
color: var(--stone-600);
text-align: center;
}
3 changes: 2 additions & 1 deletion src/app.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,8 @@ function App() {
<span className={styles.japanese}>引き</span>
</h1>
<div className={styles.desc}>
a dialog that turn into drawer on small viewport
a dialog that turn into
<br />a drawer on small viewport
</div>
<Demo />
</div>
Expand Down
10 changes: 5 additions & 5 deletions src/index.css
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap&text=引き');
@import url("https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@400;500;600;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Dela+Gothic+One&display=swap&text=引き");

:root {
font-family: 'Space Grotesk', sans-serif;
font-family: "Space Grotesk", sans-serif;
line-height: 1.5;
font-weight: 400;

Expand All @@ -29,7 +29,7 @@

button,
input {
font-family: 'Space Grotesk', sans-serif;
font-family: "Space Grotesk", sans-serif;
}

body {
Expand All @@ -44,4 +44,4 @@ main {
flex-direction: column;
width: 100vw;
height: 100vh;
}
}
18 changes: 0 additions & 18 deletions src/lib/check.tsx
View file

This file was deleted.

149 changes: 109 additions & 40 deletions src/lib/demo.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,60 +1,24 @@

.content {
display: flex;
flex-direction: column;
height: 100%;
gap: 24px;
padding-bottom: 12px;
}

.contentDesktop {
min-width: 360px;
}

.heading {
text-align: center;
margin: 0;
font-weight: 600;
font-size: 18px;
line-height: 1.5;
}

.check {
display: flex;
justify-content: center;
.icon {
color: var(--primary);
width: 96px;
}
}

.info {
text-align: center;
margin-bottom: 24px;
.sent {
color: var(--stone-500);
font-weight: 500;
}
.value {
color: var(--primary);
font-weight: 700;
font-size: 24px;
line-height: 1.5;
}
.receiver {
color: var(--stone-500);
}
}

.button,
.action {
width: 100%;
font-weight: 600;
padding: 12px 16px;
text-align: center;
border: 1px solid var(--stone-200);
border-radius: 4px;
background-color: var(--stone-50);
cursor: pointer;
}

.button {
display: block;
padding: 0 24px;
line-height: 36px;
Expand All @@ -65,3 +29,108 @@
font-weight: 600;
cursor: pointer;
}

.action {
width: 100%;
font-weight: 600;
margin-top: auto;
line-height: 48px;
border-radius: 8px;
}

.group {
display: grid;
grid-template-columns: 3fr 2fr 2fr;
gap: 8px;
}

.field {
display: flex;
flex-direction: column;
gap: 8px;
}

.field > label,
.field > span {
color: var(--stone-500);
font-weight: 500;
}

.field input,
.field .select {
display: block;
width: 100%;
background-color: oklch(55.34% 0.012 58.07 / 5%);
border: 1px solid var(--stone-200);
border-radius: 8px;
box-shadow: 0px 8px 16px -10px oklch(21.61% 0.006 56.04 / 15%);
padding: 4px 12px;
}

.field .select .chevron {
display: inline-block;
transform: translateY(-4px);
padding-left: 4px;
color: var(--stone-500);
}

.field .select[data-pressed] {
border-color: var(--stone-300);
}

.popover {
border: 1px solid var(--stone-200);
min-width: var(--trigger-width);
max-width: 250px;
box-sizing: border-box;
box-shadow: 0 8px 20px rgba(0 0 0 / 0.1);
border-radius: 6px;
background: var(--stone-100);
outline: none;
}

.listBox {
max-height: inherit;
overflow: auto;
padding: 2px;
outline: none;
}

.listBox .item {
margin: 2px;
padding: 0.286rem 0.571rem 0.286rem 1.571rem;
border-radius: 6px;
outline: none;
cursor: default;
color: var(--stone-900);
font-size: 1.072rem;
position: relative;
display: flex;
flex-direction: column;

&[aria-selected="true"] {
font-weight: 600;

&::before {
content: "✓";
content: "✓" / "";
alt: " ";
position: absolute;
top: 4px;
left: 4px;
}
}

&[data-focused],
&[data-pressed] {
background: var(--stone-200);
}

[slot="label"] {
font-weight: 600;
}

[slot="description"] {
font-size: small;
}
}
78 changes: 67 additions & 11 deletions src/lib/demo.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,19 @@
import { Dialog } from "./dialog";
import CheckBadgeIcon from "./check";

import styles from "./demo.module.css";
import {
Button,
Input,
Item,
Label,
ListBox,
Popover,
Select,
SelectValue,
TextField,
} from "react-aria-components";

const now = new Date();
export const Demo = () => {
return (
<Dialog
Expand All @@ -13,21 +24,66 @@ export const Demo = () => {
)}
isDismissable
>
{({ isMobileViewPort, close }) => (
{({ isSmallViewPort, close }) => (
<div
className={[
styles.content,
!isMobileViewPort && styles.contentDesktop,
!isSmallViewPort && styles.contentDesktop,
].join(" ")}
>
<h2 className={styles.heading}>Confirmation</h2>
<div className={styles.check}>
<CheckBadgeIcon className={styles.icon} />
</div>
<div className={styles.info}>
<div className={styles.sent}>You sent $500.00</div>
<div className={styles.value}>0.12516 ETH</div>
<div className={styles.receiver}>0x6484...1eac</div>
<h2 className={styles.heading}>Create an invite</h2>
<TextField className={styles.field}>
<Label>Title</Label>
<Input placeholder="Event title" />
</TextField>
<div className={styles.group}>
<TextField className={styles.field}>
<Label>Date</Label>
<Input
placeholder="Date"
type="date"
defaultValue={now.toISOString().split("T")[0]}
/>
</TextField>
<TextField className={styles.field}>
<Label>Time</Label>
<Input
placeholder="Time"
type="time"
defaultValue={now.toTimeString().split(" ")[0]}
/>
</TextField>
<Select className={styles.field} selectedKey="1h 30m">
<Label>Duration</Label>
<Button className={styles.select}>
<SelectValue />
<span aria-hidden="true" className={styles.chevron}>
⌄
</span>
</Button>
<Popover className={styles.popover}>
<ListBox className={styles.listBox}>
<Item className={styles.item} id="30m">
30m
</Item>
<Item className={styles.item} id="1h">
1h
</Item>
<Item className={styles.item} id="1h 30m">
1h 30m
</Item>
<Item className={styles.item} id="2h">
2h
</Item>
<Item className={styles.item} id="2h 30m">
2h 30m
</Item>
<Item className={styles.item} id="3h">
3h
</Item>
</ListBox>
</Popover>
</Select>
</div>
<button className={styles.action} onClick={close}>
Confirm
Expand Down

0 comments on commit fd19de1

Please sign in to comment.