Skip to content

Commit

Permalink
✅ Sample
Browse files Browse the repository at this point in the history
  • Loading branch information
@miyasan31
miyasan31 committed Mar 16, 2022
1 parent 075a9c2 commit 240a2b5
Show file tree
Hide file tree
Showing 3 changed files with 140 additions and 141 deletions.
273 changes: 136 additions & 137 deletions src/components/page/Root/Root.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,6 +5,7 @@ import { HoverUserCard } from "src/components/ui/HoverUserCard";

import { Button } from "~/components/ui/Button";
import { Dialog } from "~/components/ui/Dialog";
import { Flex } from "~/components/ui/Flex";
import {
AllowLeftIcon,
AllowRightIcon,
Expand All @@ -27,143 +28,141 @@ export const Root: FC = () => {
};

return (
<div className="flex justify-center items-center py-20">
<div className="grid gap-3">
<Text>ダークモード変更</Text>
<ThemeChanger />

<Text>テーマ変更</Text>
<ColorChanger />

<Text>アイコン</Text>
<div className="flex gap-2">
<CountLabelIconButton color="primary" count={10}>
<ReplyIcon size={15} />
</CountLabelIconButton>
<CountLabelIconButton color="green" count={100}>
<RetweetIcon size={15} />
</CountLabelIconButton>
<CountLabelIconButton color="amber" count={1000}>
<FavoriteIcon size={15} />
</CountLabelIconButton>

<IconButton color="primary">
<ShareIcon size={15} />
</IconButton>
<IconButton color="primary">
<DotsIcon size={15} />
</IconButton>
</div>

<Text>ボタン</Text>
<div className="flex gap-2">
<Button color="primary" onClick={handleClick}>
Primary
</Button>
<Button color="primary" isOutline onClick={handleClick}>
PrimaryOutline
</Button>
<Button color="primary" isGhost under onClick={handleClick}>
PrimaryGhost
</Button>
</div>
<div className="flex gap-3">
<Button color="red" onClick={handleClick}>
Red
</Button>
<Button color="red" isOutline onClick={handleClick}>
RedOutline
</Button>
<Button color="red" isGhost under onClick={handleClick}>
RedGhost
</Button>
</div>
<div className="flex gap-1">
<Button color="slate" onClick={handleClick}>
Slate
</Button>
<Button color="slate" isOutline onClick={handleClick}>
SlateOutline
</Button>
<Button color="slate" isGhost under onClick={handleClick}>
SlateGhost
</Button>
<NextLink href="/" btn>
Link
</NextLink>
</div>

<Text>アイコン付き</Text>
<div className="flex gap-2">
<Button color="primary" onClick={handleClick}>
<AllowLeftIcon size={15} />
Back
</Button>
<Button color="primary" isOutline onClick={handleClick}>
Next
<AllowRightIcon size={15} />
</Button>
<Button color="primary" isGhost onClick={handleClick}>
<CloseIcon size={15} />
Close
</Button>
</div>

<div className="flex gap-2">
<div className="flex flex-col gap-2">
<Text>ラジオボタン</Text>
<RadioGroup
options={RADIO_OPTIONOS}
defaultValue={RADIO_OPTIONOS[0].value}
ariaLabel="radioGroup"
onClick={handleClick}
/>
</div>

<div className="flex flex-col gap-2">
<Text>スイッチ</Text>
<Switch labalLeft="off" labalRight="on" onClick={handleClick} />
</div>
</div>

<Text>ユーザーカード</Text>
<HoverUserCard
userId="miyasan_0301"
userName="みやさん | 学生"
profile="みやさんです。hogehogehogehogehogehogehogehogehogehogehogehogehogehoge"
following={40}
followers={120}
iconPath="https://pbs.twimg.com/profile_images/1410567316421578759/3rtKrTAL_400x400.jpg"
/>

<Text>ダイアログ</Text>
<Dialog
openButtonLabel="dialog"
title="ツイートを削除しますか？"
subtitle="この操作は取り消せません。プロフィール、あなたをフォローしているアカウントのタイムライン、Twitterの検索結果からツイートが削除されます。"
closeButtonLabel="キャンセル"
icon={<MixerHorizontalIcon />}
confirmationButtonLabel="削除する"
/>

<Text>フォントサイズ</Text>
<Text size="xs">xs - TextTextText</Text>
<Text size="sm">sm - TextTextText</Text>
<Text size="base">base - TextTextText</Text>
<Text size="lg">lg - TextTextText</Text>
<Text size="xl">xl - TextTextText</Text>
<Text size="x2l">x2l - TextTextText</Text>
<Text size="x3l">x3l - TextTextText</Text>
<Text size="x4l">x4l - TextTextText</Text>

<Text>デコレーション</Text>
<Text bold>太字太字太字</Text>
<Text faded>薄字薄字薄字</Text>
<Text under>下線下線下線</Text>
<Text color="blue">青字青字青字</Text>
<Text color="red">赤字赤字赤字</Text>
</div>
</div>
<>
<Text>ダークモード変更</Text>
<ThemeChanger />

<Text>テーマ変更</Text>
<ColorChanger />

<Text>アイコン</Text>
<Flex gap={1}>
<CountLabelIconButton color="primary" count={10}>
<ReplyIcon size={15} />
</CountLabelIconButton>
<CountLabelIconButton color="green" count={100}>
<RetweetIcon size={15} />
</CountLabelIconButton>
<CountLabelIconButton color="amber" count={1000}>
<FavoriteIcon size={15} />
</CountLabelIconButton>

<IconButton color="primary">
<ShareIcon size={15} />
</IconButton>
<IconButton color="primary">
<DotsIcon size={15} />
</IconButton>
</Flex>

<Text>ボタン</Text>
<Flex gap={1}>
<Button color="primary" onClick={handleClick}>
Primary
</Button>
<Button color="primary" isOutline onClick={handleClick}>
PrimaryOutline
</Button>
<Button color="primary" isGhost under onClick={handleClick}>
PrimaryGhost
</Button>
</Flex>
<Flex gap={1}>
<Button color="red" onClick={handleClick}>
Red
</Button>
<Button color="red" isOutline onClick={handleClick}>
RedOutline
</Button>
<Button color="red" isGhost under onClick={handleClick}>
RedGhost
</Button>
</Flex>
<Flex gap={1}>
<Button color="slate" onClick={handleClick}>
Slate
</Button>
<Button color="slate" isOutline onClick={handleClick}>
SlateOutline
</Button>
<Button color="slate" isGhost under onClick={handleClick}>
SlateGhost
</Button>
<NextLink href="/" btn>
Link
</NextLink>
</Flex>

<Text>アイコン付き</Text>
<Flex gap={1}>
<Button color="primary" onClick={handleClick}>
<AllowLeftIcon size={15} />
Back
</Button>
<Button color="primary" isOutline onClick={handleClick}>
Next
<AllowRightIcon size={15} />
</Button>
<Button color="primary" isGhost onClick={handleClick}>
<CloseIcon size={15} />
Close
</Button>
</Flex>

<Flex gap={1}>
<Flex gap={1}>
<Text>ラジオボタン</Text>
<RadioGroup
options={RADIO_OPTIONOS}
defaultValue={RADIO_OPTIONOS[0].value}
ariaLabel="radioGroup"
onClick={handleClick}
/>
</Flex>

<Flex gap={1}>
<Text>スイッチ</Text>
<Switch labalLeft="off" labalRight="on" onClick={handleClick} />
</Flex>
</Flex>

<Text>ユーザーカード</Text>
<HoverUserCard
userId="miyasan_0301"
userName="みやさん | 学生"
profile="みやさんです。hogehogehogehogehogehogehogehogehogehogehogehogehogehoge"
following={40}
followers={120}
iconPath="https://pbs.twimg.com/profile_images/1410567316421578759/3rtKrTAL_400x400.jpg"
/>

<Text>ダイアログ</Text>
<Dialog
openButtonLabel="dialog"
title="ツイートを削除しますか？"
subtitle="この操作は取り消せません。プロフィール、あなたをフォローしているアカウントのタイムライン、Twitterの検索結果からツイートが削除されます。"
closeButtonLabel="キャンセル"
icon={<MixerHorizontalIcon />}
confirmationButtonLabel="削除する"
/>

<Text>フォントサイズ</Text>
<Text size="xs">xs - TextTextText</Text>
<Text size="sm">sm - TextTextText</Text>
<Text size="base">base - TextTextText</Text>
<Text size="lg">lg - TextTextText</Text>
<Text size="xl">xl - TextTextText</Text>
<Text size="x2l">x2l - TextTextText</Text>
<Text size="x3l">x3l - TextTextText</Text>
<Text size="x4l">x4l - TextTextText</Text>

<Text>デコレーション</Text>
<Text bold>太字太字太字</Text>
<Text faded>薄字薄字薄字</Text>
<Text under>下線下線下線</Text>
<Text color="blue">青字青字青字</Text>
<Text color="red">赤字赤字赤字</Text>
</>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/components/ui/Dialog.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import { IconButton } from "~/components/ui/IconButton";
import { Text } from "~/components/ui/Text";

const StyledOverlay = styled(AlertDialogPrimitive.Overlay, {
backgroundColor: "$slateA11",
backgroundColor: "$slate4",
position: "fixed",
inset: 0,
"@media (prefers-reduced-motion: no-preference)": {
Expand Down
6 changes: 3 additions & 3 deletions src/components/ui/Layout.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,9 +3,9 @@ import { styled } from "src/utils";
export const Layout = styled("main", {
display: "flex",
flexDirection: "column",
alignItems: "center",
justifyContent: "center",
width: "100%",
width: "50%",
height: "100%",
padding: "1rem",
gap: "1rem",
marginX: "auto",
});

1 comment on commit 240a2b5

@vercel
Copy link

@vercel vercel bot commented on 240a2b5 Mar 16, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

Please sign in to comment.