-
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
e2a85fa
commit b391564
Showing
24 changed files
with
2,780 additions
and
674 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
File renamed without changes
File renamed without changes
File renamed without changes
File renamed without changes
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
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
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
50 changes: 50 additions & 0 deletions
50
apps/astro/src/components/namecard/InteractiveNamecard.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 |
|---|---|---|
| @@ -0,0 +1,50 @@ | ||
| import { Box, Stack, styled } from 'styled-system/jsx'; | ||
| import { NamecardData } from '~/constants/namecard'; | ||
| import { Namecard } from './Namecard'; | ||
|
|
||
| const StyledNamecard = styled(Namecard); | ||
|
|
||
| export const InteractiveNamecard = ({ data }: { data: NamecardData }) => { | ||
| return ( | ||
| <Stack | ||
| gap="0" | ||
| position="relative" | ||
| perspective="91mm" | ||
| perspectiveOrigin="center" | ||
| className="group" | ||
| h="full" | ||
| w="full" | ||
| width="91mm" | ||
| height="55mm" | ||
| > | ||
| <Box | ||
| backfaceVisibility="hidden" | ||
| position="absolute" | ||
| transition="transform" | ||
| transitionTimingFunction="linear" | ||
| transitionDuration="1s" | ||
| transitionDelay="0.1s" | ||
| transform={{ base: 'rotateY(0deg)', _groupHover: 'rotateY(180deg)' }} | ||
| shadow="md" | ||
| top="0" | ||
| left="0" | ||
| > | ||
| <StyledNamecard data={data} side="front" /> | ||
| </Box> | ||
| <Box | ||
| backfaceVisibility="hidden" | ||
| position="absolute" | ||
| transition="transform" | ||
| transitionTimingFunction="linear" | ||
| transitionDuration="1s" | ||
| transitionDelay="0.1s" | ||
| transform={{ base: 'rotateY(180deg)', _groupHover: 'rotateY(0deg)' }} | ||
| shadow="md" | ||
| top="0" | ||
| left="0" | ||
| > | ||
| <StyledNamecard data={data} side="back" /> | ||
| </Box> | ||
| </Stack> | ||
| ); | ||
| }; |
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,90 @@ | ||
| import { Box, Center, HStack, Stack, styled } from 'styled-system/jsx'; | ||
| import { NamecardData } from '~/constants/namecard'; | ||
|
|
||
| export const Namecard = ({ | ||
| data, | ||
| side = 'front' | ||
| }: { | ||
| data: NamecardData; | ||
| side: 'front' | 'back'; | ||
| }) => { | ||
| const { color, content, logoTop, logoBottom, logoMiddle, qrCode, Quote } = data; | ||
| if (side === 'front') { | ||
| return ( | ||
| <HStack | ||
| _print={{ | ||
| pageBreakBefore: 'always', | ||
| // border: '1px solid', | ||
| printColorAdjust: 'exact' | ||
| }} | ||
| width="91mm" | ||
| height="55mm" | ||
| gap="0" | ||
| bgColor="white" | ||
| style={{ | ||
| WebkitPrintColorAdjust: 'exact', | ||
| ['--main-color' as 'color']: color | ||
| }} | ||
| > | ||
| <Box width="5mm" h="full" bgColor="var(--main-color, #1F1F5A)" /> | ||
| <Stack flex="1" gap="2" pl="4" pr="2" justifyContent="space-around" h="full" py="4"> | ||
| <Stack gap="1" fontSize="xs"> | ||
| <styled.p lineHeight="1">{content.firstRow}</styled.p> | ||
| <styled.p>{content.secondRow}</styled.p> | ||
| </Stack> | ||
| <styled.hr borderColor="var(--main-color)" /> | ||
| <Stack gap="0"> | ||
| <styled.h1 fontWeight="semibold" lineHeight="1.12" fontSize="4xl"> | ||
| {content.name} | ||
| </styled.h1> | ||
| <styled.p fontSize="sm">{content.nameSubtitle}</styled.p> | ||
| </Stack> | ||
| <Stack gap="1"> | ||
| <Stack gap="0" fontSize="xs"> | ||
| <styled.p>สวัสดีครับ!（サワディーカー）</styled.p> | ||
| </Stack> | ||
| <Stack gap="0" fontSize="0.5rem"> | ||
| <styled.p> | ||
| X (旧: Twitter): <b>@HamP_punipuni</b> | ||
| </styled.p> | ||
| <styled.p> | ||
| Discord: <b>HamP</b> | ||
| </styled.p> | ||
| </Stack> | ||
| </Stack> | ||
| </Stack> | ||
| <Stack justifyContent="space-between" py="4" pr="4" h="full" w="84px" alignItems="flex-end"> | ||
| <styled.img src={logoTop} /> | ||
| {logoMiddle && <styled.img src={logoMiddle} />} | ||
| <styled.img src={logoBottom} /> | ||
| </Stack> | ||
| </HStack> | ||
| ); | ||
| } | ||
| return ( | ||
| <> | ||
| <HStack | ||
| width="91mm" | ||
| height="55mm" | ||
| bgColor="white" | ||
| gap="0" | ||
| border={{ _print: '1px solid' }} | ||
| printColorAdjust={{ _print: 'exact' }} | ||
| style={{ | ||
| WebkitPrintColorAdjust: 'exact', | ||
| ['--main-color' as 'color']: color | ||
| }} | ||
| > | ||
| <Stack flex="1" gap="2" justifyContent="space-evenly" alignItems="center" h="full" p="4"> | ||
| <Center> | ||
| <styled.img maxW="100px" src={qrCode} /> | ||
| </Center> | ||
| <HStack alignItems="center"> | ||
| <Quote /> | ||
| </HStack> | ||
| </Stack> | ||
| <Box width="5mm" h="full" bgColor="var(--main-color, #1F1F5A)" /> | ||
| </HStack> | ||
| </> | ||
| ); | ||
| }; |
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
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,8 +1,21 @@ | ||
| --- | ||
| import { Container } from 'styled-system/jsx'; | ||
| import { Heading } from '~/components/ui/heading'; | ||
| import { localePaths } from '~/i18n/paths'; | ||
| import { useTranslations } from '~/i18n/utils'; | ||
| import MainLayout from '~/layouts/MainLayout.astro'; | ||
| //TODO: | ||
| export async function getStaticPaths() { | ||
| return localePaths; | ||
| } | ||
| const { locale } = Astro.params; | ||
| const t = useTranslations(locale); | ||
| --- | ||
|
|
||
| <MainLayout> | ||
| <Container> | ||
| <Heading as="h1" size="2xl" fontWeight="bold">{t('note.notes')}</Heading> | ||
| </Container> | ||
| </MainLayout> |
Oops, something went wrong.