-
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.
refactor(dashboard): inout cards to tailwind (#256)
* chore: wip * chore: wip * chore: done
- Loading branch information
Showing
11 changed files
with
191 additions
and
434 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 |
---|---|---|
@@ -1,24 +1,22 @@ | ||
import type { FC } from 'react' | ||
import Img from '~/Img' | ||
|
||
import { Brick } from '~/widgets/Common' | ||
import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/content' | ||
|
||
import { Wrapper, Header, Logo, Title } from '../../styles/dashboard_intros/import_tab/content' | ||
export default () => { | ||
const s = useSalon() | ||
|
||
const Content: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<Header> | ||
<Logo src="groupher-alpha.png" /> | ||
<Title>Groupher</Title> | ||
</Header> | ||
<div className={s.wrapper}> | ||
<div className={s.head}> | ||
<Img src="groupher.png" className={s.logo} /> | ||
<div className={s.title}>Groupher</div> | ||
</div> | ||
|
||
<Brick $width={100} $height={6} $opacity={0.18} top={60} left={30} /> | ||
<Brick $width={120} $height={6} $opacity={0.16} top={78} left={30} /> | ||
<Brick $width={90} $height={6} $opacity={0.13} top={96} left={30} /> | ||
<Brick $width={80} $height={6} $opacity={0.1} top={114} left={30} /> | ||
<Brick $width={100} $height={6} $opacity={0.06} top={132} left={30} /> | ||
</Wrapper> | ||
<div className={cn(s.bar, 'mt-3.5')} /> | ||
<div className={cn(s.bar, 'w-28')} /> | ||
<div className={cn(s.bar, 'w-32 opacity-15')} /> | ||
<div className={cn(s.bar, 'w-20 opacity-10')} /> | ||
<div className={cn(s.bar, 'opacity-5')} /> | ||
</div> | ||
) | ||
} | ||
|
||
export default Content |
69 changes: 26 additions & 43 deletions
69
src/app/Landing/DashboardIntros/ImportTab/ContentCard.tsx
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 |
---|---|---|
@@ -1,54 +1,37 @@ | ||
import type { FC } from 'react' | ||
|
||
import HeaderCard from './HeaderCard' | ||
import Content from './Content' | ||
import FooterCard from './FooterCard' | ||
|
||
import { | ||
Wrapper, | ||
BgBubble, | ||
// LeftBgBubble, | ||
// RightBgBubble, | ||
Bot, | ||
AI, | ||
HLineIcon, | ||
HLineIcon2, | ||
// | ||
LineIcon, | ||
LineIcon2, | ||
CurveLineIcon1, | ||
CurveLineIcon2, | ||
CurveLineIcon3, | ||
CurveLineIcon4, | ||
} from '../../styles/dashboard_intros/import_tab/content_card' | ||
|
||
const ContentCard: FC = () => { | ||
import LineSVG from '../../styles/dashboard_intros/import_tab/Line' | ||
|
||
import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/content_card' | ||
|
||
export default () => { | ||
const s = useSalon() | ||
|
||
return ( | ||
<Wrapper> | ||
<Bot top={230} left={40}> | ||
Bot | ||
</Bot> | ||
<AI top={230} right={50}> | ||
AI | ||
</AI> | ||
{/* <LeftBgBubble /> | ||
<RightBgBubble /> */} | ||
<BgBubble /> | ||
<HLineIcon /> | ||
<HLineIcon2 /> | ||
|
||
<LineIcon /> | ||
<LineIcon2 /> | ||
<CurveLineIcon1 /> | ||
<CurveLineIcon2 /> | ||
<CurveLineIcon3 /> | ||
<CurveLineIcon4 /> | ||
<div className={s.wrapper}> | ||
<div className={cn(s.bot, 'left-8 top-56 mt-2')}>Bot</div> | ||
<div className={cn(s.ai, 'right-9 top-56 mt-1')}>AI</div> | ||
<div className={s.BgBubble} /> | ||
<LineSVG className={s.lLine} /> | ||
<LineSVG className={s.rLine} /> | ||
|
||
<div className={cn(s.dot, 'top-20 left-24')} /> | ||
<div className={cn(s.dot, 'top-28 left-32 size-1.5 opacity-15')} /> | ||
|
||
<div className={cn(s.dot, 'top-20 right-20')} /> | ||
<div className={cn(s.dot, 'top-28 right-28 size-1.5 opacity-15')} /> | ||
|
||
<div className={cn(s.dot, 'bottom-20 left-24 size-1.5 opacity-15')} /> | ||
<div className={cn(s.dot, 'bottom-28 left-32')} /> | ||
|
||
<div className={cn(s.dot, 'bottom-20 right-20')} /> | ||
<div className={cn(s.dot, 'bottom-28 right-28 size-1.5 opacity-15')} /> | ||
|
||
<HeaderCard /> | ||
<Content /> | ||
<FooterCard /> | ||
</Wrapper> | ||
</div> | ||
) | ||
} | ||
|
||
export default ContentCard |
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 |
---|---|---|
@@ -1,38 +1,24 @@ | ||
import type { FC } from 'react' | ||
import Img from '~/Img' | ||
|
||
import { | ||
Wrapper, | ||
ImCard, | ||
ImIcons, | ||
ToolIcons, | ||
// FooterNote, | ||
ImgIcon, | ||
OhterCard, | ||
} from '../../styles/dashboard_intros/import_tab/footer_card' | ||
import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/footer_card' | ||
|
||
export default () => { | ||
const s = useSalon() | ||
|
||
const FooterCard: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<ImCard> | ||
<ImIcons> | ||
<ImgIcon src="landing/products/dingding.png" /> | ||
<ImgIcon src="landing/products/feishu.png" $size={30} /> | ||
<ImgIcon src="landing/seo/wechat2.png" $size={26} /> | ||
<ImgIcon src="landing/products/slack.png" $size={22} /> | ||
<ImgIcon src="landing/products/discord.png" $size={24} /> | ||
</ImIcons> | ||
{/* <FooterNote>主流 IM 平台</FooterNote> */} | ||
</ImCard> | ||
<OhterCard> | ||
<ToolIcons> | ||
<ImgIcon src="landing/products/email.png" $size={26} /> | ||
<ImgIcon src="landing/seo/rss.png" $size={25} /> | ||
<ImgIcon src="landing/products/webhook.png" $size={20} /> | ||
</ToolIcons> | ||
{/* <FooterNote>Mail / RSS / Webhook</FooterNote> */} | ||
</OhterCard> | ||
</Wrapper> | ||
<div className={s.wrapper}> | ||
<div className={cn(s.imcard, '-rotate-3')}> | ||
<Img src="landing/products/dingding.png" className={s.img} /> | ||
<Img src="landing/products/feishu.png" className={s.img} /> | ||
<Img src="landing/seo/wechat2.png" className={s.img} /> | ||
<Img src="landing/products/slack.png" className={s.img} /> | ||
<Img src="landing/products/discord.png" className={s.img} /> | ||
</div> | ||
<div className={cn(s.imcard, s.otherCard, 'rotate-3')}> | ||
<Img src="landing/products/email.png" className={s.img} /> | ||
<Img src="landing/seo/rss.png" className={s.img} /> | ||
<Img src="landing/products/webhook.png" className={cn(s.img, 'size-6')} /> | ||
</div> | ||
</div> | ||
) | ||
} | ||
|
||
export default FooterCard |
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 |
---|---|---|
@@ -1,40 +1,25 @@ | ||
import type { FC } from 'react' | ||
import Img from '~/Img' | ||
|
||
import { | ||
Wrapper, | ||
ImCard, | ||
ImIcons, | ||
OhterCard, | ||
Icon, | ||
ImgIcon, | ||
MDIcon, | ||
CVSIcon, | ||
ToolIcons, | ||
// FooterNote, | ||
} from '../../styles/dashboard_intros/import_tab/header_card' | ||
import GithubSVG from '~/icons/social/Github' | ||
|
||
import useSalon, { cn } from '../../styles/dashboard_intros/import_tab/header_card' | ||
|
||
export default () => { | ||
const s = useSalon() | ||
|
||
const HeaderCard: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<ImCard> | ||
<ImIcons> | ||
<Icon.GITHUB /> | ||
<ImgIcon src="landing/products/gitlab.png" $size={32} /> | ||
<ImgIcon src="landing/products/notion.png" $size={30} /> | ||
<ImgIcon src="landing/products/linear.png" $size={24} /> | ||
<ImgIcon src="landing/products/jira.png" $size={22} /> | ||
</ImIcons> | ||
{/* <FooterNote>常见 issue 管理工具</FooterNote> */} | ||
</ImCard> | ||
<OhterCard> | ||
<ToolIcons> | ||
<MDIcon src="landing/products/markdown.png" /> | ||
<CVSIcon src="landing/products/cvs.png" /> | ||
</ToolIcons> | ||
{/* <FooterNote>Markdown / CVS 导入</FooterNote> */} | ||
</OhterCard> | ||
</Wrapper> | ||
<div className={s.wrapper}> | ||
<div className={cn(s.imcard, 'rotate-3')}> | ||
<GithubSVG className={s.svgIcon} /> | ||
<Img src="landing/products/gitlab.png" className={s.img} /> | ||
<Img src="landing/products/notion.png" className={s.img} /> | ||
<Img src="landing/products/linear.png" className={s.img} /> | ||
<Img src="landing/products/jira.png" className={cn(s.img, 'size-6')} /> | ||
</div> | ||
<div className={cn(s.imcard, s.otherCard, '-rotate-2')}> | ||
<Img src="landing/products/markdown.png" className={cn(s.img, 'size-6')} /> | ||
<Img src="landing/products/cvs.png" className={cn(s.img, 'size-6')} /> | ||
</div> | ||
</div> | ||
) | ||
} | ||
|
||
export default HeaderCard |
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 |
---|---|---|
@@ -1,15 +1,13 @@ | ||
import type { FC } from 'react' | ||
|
||
import ContentCard from './ContentCard' | ||
|
||
import { Wrapper } from '../../styles/dashboard_intros/import_tab' | ||
import useSalon from '../../styles/dashboard_intros/import_tab' | ||
|
||
export default () => { | ||
const s = useSalon() | ||
|
||
const ImportTab: FC = () => { | ||
return ( | ||
<Wrapper> | ||
<div className={s.wrapper}> | ||
<ContentCard /> | ||
</Wrapper> | ||
</div> | ||
) | ||
} | ||
|
||
export default ImportTab |
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
44 changes: 14 additions & 30 deletions
44
src/app/Landing/styles/dashboard_intros/import_tab/content.ts
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 |
---|---|---|
@@ -1,32 +1,16 @@ | ||
import styled, { css, theme } from '~/css' | ||
import useTwBelt from '~/hooks/useTwBelt' | ||
|
||
import Img from '~/Img' | ||
export { cn } from '~/css' | ||
|
||
export const Wrapper = styled.div` | ||
${css.column()}; | ||
width: 180px; | ||
height: 160px; | ||
padding: 15px 25px; | ||
margin-top: -10px; | ||
border-radius: 10px; | ||
position: relative; | ||
background: ${theme('alphaBg2')}; | ||
color: ${theme('article.digest')}; | ||
border: 1px solid; | ||
border-color: ${theme('divider')}; | ||
box-shadow: rgba(149, 157, 165, 0.2) 0px 8px 24px; | ||
z-index: 2; | ||
` | ||
export const Header = styled.div` | ||
${css.row('align-center')}; | ||
` | ||
export const Logo = styled(Img)` | ||
${css.size(26)}; | ||
box-shadow: rgba(149, 157, 165, 0.2) 0px -1px 24px; | ||
` | ||
export const Title = styled.div` | ||
color: ${theme('article.title')}; | ||
font-weight: 500; | ||
font-size: 20px; | ||
margin-left: 8px; | ||
` | ||
export default () => { | ||
const { cn, fg, bg, shadow } = useTwBelt() | ||
|
||
return { | ||
wrapper: cn('w-44 h-40 px-6 py-4 -mt-2.5 rounded-md relative z-30', bg('htmlBg'), shadow('md')), | ||
head: 'row-center', | ||
logo: cn('size-6', shadow('sm')), | ||
title: cn('text-lg ml-2', fg('text.title')), | ||
// | ||
bar: cn('w-32 h-2 opacity-15 rounded-md mb-3', bg('text.digest')), | ||
} | ||
} |
Oops, something went wrong.