-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
dce782e
commit df34f0d
Showing
6 changed files
with
159 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
.Footer { | ||
display: grid; | ||
grid-template-columns: 1fr 6fr 0fr; | ||
align-items: center; | ||
padding: 20px 40px; | ||
color: var(--text-secondary); | ||
} | ||
|
||
.FooterMenu { | ||
display: flex; | ||
} | ||
|
||
.FooterItem { | ||
padding: 0px var(--gap-s); | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import type { Meta, StoryFn } from '@storybook/react'; | ||
import React from 'react'; | ||
|
||
import { SheepLogo } from '../SheepLogo/SheepLogo'; | ||
|
||
import { Footer, FooterCopyright, FooterMenu, FooterItem } from './Footer'; | ||
|
||
const meta: Meta<typeof Footer> = { | ||
title: '@harmony/Footer', | ||
component: Footer, | ||
}; | ||
|
||
export default meta; | ||
|
||
export const Default: StoryFn<typeof Footer> = () => { | ||
return ( | ||
<Footer> | ||
<FooterCopyright /> | ||
<FooterMenu> | ||
<FooterItem>Apple</FooterItem> | ||
<FooterItem>Tomato</FooterItem> | ||
<FooterItem>Banana</FooterItem> | ||
<FooterItem>About us</FooterItem> | ||
</FooterMenu> | ||
<SheepLogo /> | ||
</Footer> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,28 @@ | ||
import React, { FC, HTMLAttributes } from 'react'; | ||
import cn from 'classnames'; | ||
|
||
import { Text } from '../Text/Text'; | ||
|
||
import s from './Footer.module.css'; | ||
|
||
export const Footer: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => ( | ||
<footer className={cn(s.Footer, className)} {...props}> | ||
{children} | ||
</footer> | ||
); | ||
|
||
export const FooterCopyright: FC<HTMLAttributes<HTMLDivElement>> = ({ className, ...props }) => ( | ||
<Text className={className} {...props}>{`© ${new Date().getFullYear()} Taskany, Inc.`}</Text> | ||
); | ||
|
||
export const FooterMenu: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => ( | ||
<div className={cn(s.FooterMenu, className)} {...props}> | ||
{children} | ||
</div> | ||
); | ||
|
||
export const FooterItem: FC<HTMLAttributes<HTMLDivElement>> = ({ className, children, ...props }) => ( | ||
<div className={cn(s.FooterItem, className)} {...props}> | ||
{children} | ||
</div> | ||
); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import type { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { SheepLogo } from './SheepLogo'; | ||
|
||
const meta: Meta<typeof SheepLogo> = { | ||
title: '@harmony/SheepLogo', | ||
component: SheepLogo, | ||
}; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = { | ||
args: {}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,71 @@ | ||
import React from 'react'; | ||
|
||
export const SheepLogo: React.FC = () => { | ||
return ( | ||
<svg width="32" height="32" fill="none" xmlns="http://www.w3.org/2000/svg"> | ||
<path d="M25.407 19.633h-3.714v7.815h3.714v-7.815Z" fill="#EAB67D" /> | ||
<path d="M24.914 20.126v6.828h-2.727v-6.828h2.727Zm.987-.987H21.2v8.802h4.701v-8.802Z" fill="#1A1A1A" /> | ||
<path d="M26.96 19.633h-3.715v7.815h3.714v-7.815Z" fill="#F7D5A9" /> | ||
<path d="M26.466 20.126v6.828H23.74v-6.828h2.727Zm.987-.987h-4.701v8.802h4.701v-8.802Z" fill="#1A1A1A" /> | ||
<path d="M14.543 19.633h-3.715v7.815h3.715v-7.815Z" fill="#EAB67D" /> | ||
<path d="M14.05 20.126v6.828h-2.728v-6.828h2.727Zm.986-.987h-4.701v8.802h4.701v-8.802Z" fill="#1A1A1A" /> | ||
<path d="M16.095 19.633h-3.714v7.815h3.714v-7.815Z" fill="#F7D5A9" /> | ||
<path d="M15.601 20.126v6.828h-2.727v-6.828H15.6Zm.987-.987h-4.701v8.802h4.701v-8.802Z" fill="#1A1A1A" /> | ||
<path | ||
d="M21.466 24.86a4.08 4.08 0 0 1-2.595-.938 4.083 4.083 0 0 1-2.587.932 4.072 4.072 0 0 1-3.772-2.564 4.076 4.076 0 0 1-3.708-2.026 4.06 4.06 0 0 1-.012-4.042 4.062 4.062 0 0 1-1.365-3.796 4.082 4.082 0 0 1 2.634-3.12 4.057 4.057 0 0 1 5.329-2.93 4.062 4.062 0 0 1 7.009.008 4.063 4.063 0 0 1 5.322 2.944 4.085 4.085 0 0 1 2.62 3.115 4.061 4.061 0 0 1-1.372 3.802 4.061 4.061 0 0 1-3.735 6.059 4.075 4.075 0 0 1-3.768 2.556Z" | ||
fill="#fff" | ||
/> | ||
<path | ||
d="M18.892 4.866c1.467 0 2.727.885 3.275 2.15a3.576 3.576 0 0 1 3.884.462 3.554 3.554 0 0 1 1.238 2.23 3.567 3.567 0 0 1 1.017 6.419 3.567 3.567 0 0 1-3.41 5.647 3.562 3.562 0 0 1-3.43 2.592 3.578 3.578 0 0 1-2.594-1.117 3.58 3.58 0 0 1-2.588 1.112 3.562 3.562 0 0 1-3.432-2.6 3.565 3.565 0 0 1-3.621-1.744 3.568 3.568 0 0 1 .225-3.912 3.568 3.568 0 0 1 1.036-6.418 3.557 3.557 0 0 1 1.237-2.221 3.553 3.553 0 0 1 2.29-.835c.552 0 1.102.128 1.602.378a3.568 3.568 0 0 1 3.27-2.143Zm0-.987c-1.494 0-2.87.73-3.713 1.916a4.558 4.558 0 0 0-5.534 3.143 4.575 4.575 0 0 0-1.558 1.093 4.554 4.554 0 0 0 .095 6.296 4.554 4.554 0 0 0 4.01 6.457 4.57 4.57 0 0 0 2.535 2.287 4.534 4.534 0 0 0 1.557.275 4.58 4.58 0 0 0 2.587-.807 4.576 4.576 0 0 0 2.595.813c.53 0 1.055-.092 1.557-.275a4.572 4.572 0 0 0 2.531-2.276 4.554 4.554 0 0 0 4.026-6.448 4.553 4.553 0 0 0-1.441-7.392 4.558 4.558 0 0 0-5.527-3.158 4.557 4.557 0 0 0-3.72-1.924Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
d="M3.01 14.95c-.847 0-1.228-.351-1.399-.647-.169-.292-.345-.923.36-1.87.438-.587 1.124-1.167 1.93-1.632.968-.56 1.981-.88 2.78-.88.847 0 1.228.352 1.399.648.169.292.346.923-.36 1.87-.438.587-1.123 1.166-1.93 1.632-.969.559-1.982.88-2.78.88Z" | ||
fill="#EAB67D" | ||
/> | ||
<path | ||
d="M6.681 10.415c.465 0 .815.13.972.4.385.668-.56 1.934-2.11 2.829-.922.532-1.85.813-2.533.813-.465 0-.815-.13-.971-.4-.385-.667.56-1.933 2.11-2.828.922-.533 1.85-.814 2.532-.814Zm0-.987c-.882 0-1.985.344-3.026.946-.863.498-1.601 1.125-2.078 1.764-.876 1.174-.622 2.015-.393 2.412.193.334.687.894 1.826.894.883 0 1.986-.344 3.026-.945.863-.498 1.602-1.125 2.078-1.765.876-1.173.622-2.015.393-2.412-.193-.334-.686-.894-1.826-.894Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
d="M16.77 14.95c-.798 0-1.812-.32-2.78-.879-.806-.465-1.492-1.045-1.93-1.632-.706-.947-.529-1.578-.36-1.87.17-.296.552-.648 1.399-.648.798 0 1.812.32 2.78.88.806.465 1.492 1.045 1.93 1.631.706.948.528 1.58.36 1.871-.17.296-.552.648-1.399.648Z" | ||
fill="#EAB67D" | ||
/> | ||
<path | ||
d="M13.099 10.415c.682 0 1.611.281 2.533.814 1.55.895 2.495 2.161 2.11 2.828-.157.27-.507.4-.972.4-.683 0-1.611-.28-2.533-.813-1.55-.895-2.495-2.162-2.11-2.828.157-.271.507-.401.972-.401Zm0-.987c-1.14 0-1.633.56-1.826.894-.23.397-.483 1.239.393 2.412.476.64 1.215 1.266 2.078 1.765 1.041.601 2.143.945 3.026.945 1.14 0 1.633-.56 1.826-.894.229-.397.483-1.238-.393-2.412-.477-.64-1.215-1.265-2.078-1.764-1.04-.602-2.144-.946-3.026-.946Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
opacity=".2" | ||
d="M16.619 9.52c-.94-.544-1.931-.902-2.83-1.027a6.226 6.226 0 0 0-1.928-1.13c-.044.034-.09.067-.133.104a3.555 3.555 0 0 0-1.237 2.221 3.569 3.569 0 0 0-1.035 6.418 3.568 3.568 0 0 0 1.593 5.46c2.4-.498 4.374-2.513 5.052-5.182.23.031.454.047.67.047 1.696 0 2.438-.97 2.679-1.387.283-.489.803-1.808-.456-3.496-.555-.744-1.399-1.465-2.375-2.029Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
d="M9.89 20.206c2.752 0 4.983-2.622 4.983-5.856s-2.23-5.856-4.983-5.856c-2.752 0-4.983 2.622-4.983 5.856s2.23 5.856 4.983 5.856Z" | ||
fill="#F7D5A9" | ||
/> | ||
<path | ||
d="M9.89 8.987c2.48 0 4.49 2.402 4.49 5.364 0 2.961-2.01 5.363-4.49 5.363-2.48 0-4.49-2.402-4.49-5.364 0-2.962 2.01-5.363 4.49-5.363Zm0-.986c-1.496 0-2.892.683-3.931 1.924-.996 1.19-1.545 2.762-1.545 4.426 0 1.663.549 3.235 1.545 4.425 1.039 1.24 2.435 1.925 3.931 1.925s2.893-.684 3.931-1.925c.997-1.19 1.545-2.762 1.545-4.425 0-1.664-.548-3.236-1.545-4.426-1.038-1.241-2.435-1.924-3.931-1.924Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
opacity=".2" | ||
d="M15.24 8.486a3.4 3.4 0 0 0-2.828-.733 3.397 3.397 0 0 0-5.284-.006 3.402 3.402 0 0 0-4.037 3.038c-.08.904.198 1.785.781 2.48a3.393 3.393 0 0 0 2.605 1.214 3.403 3.403 0 0 0 2.638-1.256 3.422 3.422 0 0 0 1.297.002 3.403 3.403 0 0 0 2.643 1.262 3.393 3.393 0 0 0 2.604-1.214 3.401 3.401 0 0 0-.418-4.787Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
d="M13.055 13.007a2.903 2.903 0 0 1-2.438-1.328 2.885 2.885 0 0 1-.849.127c-.294 0-.58-.043-.855-.128a2.909 2.909 0 0 1-4.661.284 2.886 2.886 0 0 1-.669-2.12A2.905 2.905 0 0 1 7.332 7.32a2.905 2.905 0 0 1 4.876.005 2.905 2.905 0 1 1 .847 5.682Z" | ||
fill="#fff" | ||
/> | ||
<path | ||
d="M9.767 6.49c.992 0 1.844.598 2.214 1.454a2.42 2.42 0 0 1 2.626.311 2.412 2.412 0 1 1-3.763 2.804 2.404 2.404 0 0 1-2.156-.002 2.4 2.4 0 0 1-.662.885 2.408 2.408 0 0 1-3.397-.297 2.411 2.411 0 0 1 2.927-3.706 2.413 2.413 0 0 1 2.211-1.45Zm0-.987a3.4 3.4 0 0 0-2.639 1.258 3.402 3.402 0 0 0-2.836.731 3.402 3.402 0 0 0-.419 4.787 3.393 3.393 0 0 0 2.604 1.214 3.403 3.403 0 0 0 2.639-1.256 3.422 3.422 0 0 0 1.297.002 3.403 3.403 0 0 0 2.643 1.262 3.393 3.393 0 0 0 2.604-1.214 3.402 3.402 0 0 0-.419-4.788 3.4 3.4 0 0 0-2.829-.733 3.399 3.399 0 0 0-2.645-1.263ZM7.957 15.338a.493.493 0 1 0 0-.986.493.493 0 0 0 0 .986ZM11.575 15.338a.493.493 0 1 0 0-.986.493.493 0 0 0 0 .986Z" | ||
fill="#1A1A1A" | ||
/> | ||
<path | ||
opacity=".2" | ||
d="M15.602 25.967h-4.28v.987h4.28v-.987ZM26.456 25.967h-4.28v.987h4.28v-.987Z" | ||
fill="#1A1A1A" | ||
/> | ||
</svg> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters