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

convert footer to fn component

Browse Source
This commit is contained in:
Kushagra Gour
2024-03-22 03:24:37 +05:30
parent 7ef30d689c
commit 75221e9650
1 changed files with 40 additions and 44 deletions
Download Patch File Download Diff File Expand all files Collapse all files

56
src/components/Footer.jsx
View File

@@ -1,43 +1,38 @@
import { Component } from 'preact';
import { Button } from './common'; import { Button } from './common';
import { Trans, t } from '@lingui/macro'; import { Trans, t } from '@lingui/macro';
import { I18n } from '@lingui/react'; import { I18n } from '@lingui/react';
import { ProBadge } from './ProBadge'; import { ProBadge } from './ProBadge';
import { HStack } from './Stack'; import { HStack } from './Stack';
import { useState } from 'preact/hooks'; import { useEffect, useState } from 'preact/hooks';
class JS13K extends Component { import React, { useState } from 'react';
constructor(props) {
super(props); const JS13K = props => {
const compoDate = new Date('August 13 2018 11:00 GMT'); const [daysLeft, setDaysLeft] = useState(0);
var now = new Date();
var daysLeft; useEffect(() => {
const compoDate = new Date('August 13 2024 11:00 GMT');
const now = new Date();
if (+compoDate > +now) { if (+compoDate > +now) {
daysLeft = Math.floor((compoDate - now) / 1000 / 3600 / 24); const _daysLeft = Math.floor((compoDate - now) / 1000 / 3600 / 24);
} setDaysLeft(_daysLeft);
this.setState({
daysLeft
});
} }
}, []);
const codeSizeInKb = props.codeSize ? (props.codeSize / 1024).toFixed(2) : 0;
render() {
const codeSizeInKb = this.props.codeSize
? (this.props.codeSize / 1024).toFixed(2)
: 0;
return ( return (
<div <div
role="button" role="button"
class="flex flex-v-center" className="flex flex-v-center"
tabIndex="0" tabIndex="0"
onClick={this.props.onClick} onClick={props.onClick}
onBlur={this.props.onBlur} onBlur={props.onBlur}
> >
<img src="assets/js13kgames.png" alt="JS13K Games logo" height="24" />{' '} <img src="assets/js13kgames.png" alt="JS13K Games logo" height="24" />{' '}
<div class="footer__js13k-days-left"> <div className="footer__js13k-days-left">{daysLeft} days to go</div>
{this.state.daysLeft} days to go
</div>
<div <div
class="footer__js13k-code-size" className="footer__js13k-code-size"
style={{ style={{
color: codeSizeInKb > 10 ? 'crimson' : 'limegreen' color: codeSizeInKb > 10 ? 'crimson' : 'limegreen'
}} }}
@@ -45,15 +40,16 @@ class JS13K extends Component {
{codeSizeInKb} KB/ 13KB {codeSizeInKb} KB/ 13KB
</div> </div>
<span <span
class="caret" className="caret"
style={`transition:0.3s ease; transform-origin: center 2px; ${ style={{
this.props.isOpen ? 'transform:rotate(180deg);' : '' transition: '0.3s ease',
}`} transformOrigin: 'center 2px',
transform: props.isOpen ? 'rotate(180deg)' : ''
}}
/> />
</div> </div>
); );
} };
}
export const Footer = props => { export const Footer = props => {
const [isKeyboardShortcutsModalOpen, setIsKeyboardShortcutsModalOpen] = const [isKeyboardShortcutsModalOpen, setIsKeyboardShortcutsModalOpen] =