mirror/php-web-maker
1
0
Fork 0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-29 17:50:09 +02:00
Code Issues Releases Wiki Activity

add panda

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-19 16:10:35 +05:30
parent 14bc964aa4
commit 4ee7a2a2c0
2 changed files with 33 additions and 4 deletions
Download Patch File Download Diff File Expand all files Collapse all files

19
src/components/Profile.jsx
View File

@@ -4,6 +4,7 @@ import { HStack, Stack, VStack } from './Stack';
import { Panel } from './Panel'; import { Panel } from './Panel';
import { Text } from './Text'; import { Text } from './Text';
import { getHumanReadableDate } from '../utils'; import { getHumanReadableDate } from '../utils';
import { LoaderWithText } from './Loader';
const DEFAULT_PROFILE_IMG = const DEFAULT_PROFILE_IMG =
"data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E"; "data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23ccc' d='M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z'/%3E%3C/svg%3E";
@@ -44,10 +45,13 @@ const Header = ({ user, logoutBtnHandler }) => {
export function Profile({ user, logoutBtnHandler }) { export function Profile({ user, logoutBtnHandler }) {
const [currentSubscription, setCurrentSubscription] = useState(null); const [currentSubscription, setCurrentSubscription] = useState(null);
const [isFetchingSubscription, setIsFetchingSubscription] = useState(false);
useEffect(() => { useEffect(() => {
if (user?.isPro) { if (user?.isPro) {
setIsFetchingSubscription(true);
window.db.getUserSubscriptionEvents(user.uid).then(events => { window.db.getUserSubscriptionEvents(user.uid).then(events => {
console.log(events); setIsFetchingSubscription(false);
const creationEvent = events const creationEvent = events
.filter(event => event.type === 'subscription_created') .filter(event => event.type === 'subscription_created')
.sort((a, b) => b.timestamp.seconds - a.timestamp.seconds)[0]; .sort((a, b) => b.timestamp.seconds - a.timestamp.seconds)[0];
@@ -62,8 +66,11 @@ export function Profile({ user, logoutBtnHandler }) {
return ( return (
<VStack gap={2}> <VStack gap={2}>
<Header user={user} logoutBtnHandler={logoutBtnHandler} /> <Header user={user} logoutBtnHandler={logoutBtnHandler} />
{currentSubscription ? (
<Panel> <Panel>
{isFetchingSubscription ? (
<LoaderWithText>Loading subscription details...</LoaderWithText>
) : null}
{currentSubscription ? (
<VStack align="stretch" gap={1}> <VStack align="stretch" gap={1}>
<Text> <Text>
Plan: Plan:
@@ -106,7 +113,15 @@ export function Profile({ user, logoutBtnHandler }) {
Link 3 Link 3
</a> */} </a> */}
</VStack> </VStack>
) : null}
</Panel> </Panel>
{user?.isPro && currentSubscription ? (
<img
class="profile-modal__panda"
src="/assets/pro-panda.png"
width="300"
style="position:absolute;bottom:-3rem; right: -7rem;"
/>
) : null} ) : null}
</VStack> </VStack>
); );

14
src/style.css
View File

@@ -2242,6 +2242,20 @@ while the theme CSS file is loading */
background-clip: text; background-clip: text;
} }
.profile-modal__panda {
animation: slide-up 0.3s forwards;
}
@keyframes slide-up {
0% {
opacity: 0;
transform: translateX(-1.5rem);
}
100% {
opacity: 1;
transform: rotate(0deg);
}
}
/* .PANEL */ /* .PANEL */
.panel { .panel {
--panel-bg: rgb(255 255 255 / 5%); --panel-bg: rgb(255 255 255 / 5%);