Make sheet have header and body section
This commit is contained in:
Lim Chee Aun
parent
0276820185
commit
cf4fbc8553
26
src/app.css
26
src/app.css
|
|
@ -583,22 +583,36 @@ button.carousel-dot[disabled].active {
|
|||
}
|
||||
.sheet {
|
||||
align-self: flex-end;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: 90vh;
|
||||
max-height: 90dvh;
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
overflow: hidden;
|
||||
background-color: var(--bg-color);
|
||||
width: 100%;
|
||||
max-width: calc(40em - 50px - 16px);
|
||||
border-radius: 16px 16px 0 0;
|
||||
padding: 16px;
|
||||
padding-left: max(16px, env(safe-area-inset-left));
|
||||
padding-right: max(16px, env(safe-area-inset-right));
|
||||
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
||||
box-shadow: 0 -1px 32px var(--divider-color);
|
||||
animation: slide-up 0.2s var(--timing-function);
|
||||
border: 1px solid var(--outline-color);
|
||||
}
|
||||
.sheet header {
|
||||
padding: 16px 16px 8px;
|
||||
padding-left: max(16px, env(safe-area-inset-left));
|
||||
padding-right: max(16px, env(safe-area-inset-right));
|
||||
}
|
||||
.sheet main {
|
||||
overflow: auto;
|
||||
overflow-x: hidden;
|
||||
overscroll-behavior: contain;
|
||||
padding: 16px 16px;
|
||||
padding-left: max(16px, env(safe-area-inset-left));
|
||||
padding-right: max(16px, env(safe-area-inset-right));
|
||||
padding-bottom: max(16px, env(safe-area-inset-bottom));
|
||||
mask-image: linear-gradient(to bottom, transparent 0%, black 10px);
|
||||
}
|
||||
.sheet header + main {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
/* TAG */
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
font-size: 95%;
|
||||
line-height: 1.4;
|
||||
}
|
||||
#account-container .note:not(:has(p)) {
|
||||
#account-container .note:not(:has(p)):not(:empty) {
|
||||
/* Some notes don't have <p> tags, so we need to add some padding */
|
||||
padding: 1em 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -108,15 +108,17 @@ function Account({ account }) {
|
|||
<Avatar size="xxxl" />
|
||||
███ ████████████
|
||||
</header>
|
||||
<div class="note">
|
||||
<p>████████ ███████</p>
|
||||
<p>███████████████ ███████████████</p>
|
||||
</div>
|
||||
<p class="stats">
|
||||
<span>██ Posts</span>
|
||||
<span>██ Following</span>
|
||||
<span>██ Followers</span>
|
||||
</p>
|
||||
<main>
|
||||
<div class="note">
|
||||
<p>████████ ███████</p>
|
||||
<p>███████████████ ███████████████</p>
|
||||
</div>
|
||||
<p class="stats">
|
||||
<span>██ Posts</span>
|
||||
<span>██ Following</span>
|
||||
<span>██ Followers</span>
|
||||
</p>
|
||||
</main>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
|
|
@ -124,96 +126,99 @@ function Account({ account }) {
|
|||
<Avatar url={avatar} size="xxxl" />
|
||||
<NameText account={info} showAcct external />
|
||||
</header>
|
||||
<div
|
||||
class="note"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: enhanceContent(note, { emojis }),
|
||||
}}
|
||||
/>
|
||||
{fields?.length > 0 && (
|
||||
<div class="profile-metadata">
|
||||
{fields.map(({ name, value, verifiedAt }) => (
|
||||
<div
|
||||
class={`profile-field ${
|
||||
verifiedAt ? 'profile-verified' : ''
|
||||
}`}
|
||||
key={name}
|
||||
>
|
||||
<b>
|
||||
{name}{' '}
|
||||
{!!verifiedAt && <Icon icon="check-circle" size="s" />}
|
||||
</b>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: value,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p class="stats">
|
||||
<span>
|
||||
<b title={statusesCount}>{shortenNumber(statusesCount)}</b> Posts
|
||||
</span>
|
||||
<span>
|
||||
<b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
|
||||
Following
|
||||
</span>
|
||||
<span>
|
||||
<b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
|
||||
Followers
|
||||
</span>
|
||||
{!!createdAt && (
|
||||
<main>
|
||||
<div
|
||||
class="note"
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: enhanceContent(note, { emojis }),
|
||||
}}
|
||||
/>
|
||||
{fields?.length > 0 && (
|
||||
<div class="profile-metadata">
|
||||
{fields.map(({ name, value, verifiedAt }) => (
|
||||
<div
|
||||
class={`profile-field ${
|
||||
verifiedAt ? 'profile-verified' : ''
|
||||
}`}
|
||||
key={name}
|
||||
>
|
||||
<b>
|
||||
{name}{' '}
|
||||
{!!verifiedAt && <Icon icon="check-circle" size="s" />}
|
||||
</b>
|
||||
<p
|
||||
dangerouslySetInnerHTML={{
|
||||
__html: value,
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
<p class="stats">
|
||||
<span>
|
||||
Joined:{' '}
|
||||
<b>
|
||||
<time datetime={createdAt}>
|
||||
{Intl.DateTimeFormat('en', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}).format(new Date(createdAt))}
|
||||
</time>
|
||||
</b>
|
||||
<b title={statusesCount}>{shortenNumber(statusesCount)}</b>{' '}
|
||||
Posts
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p class="actions">
|
||||
{followedBy ? <span class="tag">Following you</span> : <span />}{' '}
|
||||
{relationshipUIState !== 'loading' && relationship && (
|
||||
<button
|
||||
type="button"
|
||||
class={`${following ? 'light danger' : ''}`}
|
||||
disabled={relationshipUIState === 'loading'}
|
||||
onClick={() => {
|
||||
setRelationshipUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
let newRelationship;
|
||||
if (following) {
|
||||
const yes = confirm(
|
||||
'Are you sure that you want to unfollow this account?',
|
||||
);
|
||||
if (yes) {
|
||||
newRelationship = await masto.accounts.unfollow(id);
|
||||
<span>
|
||||
<b title={followingCount}>{shortenNumber(followingCount)}</b>{' '}
|
||||
Following
|
||||
</span>
|
||||
<span>
|
||||
<b title={followersCount}>{shortenNumber(followersCount)}</b>{' '}
|
||||
Followers
|
||||
</span>
|
||||
{!!createdAt && (
|
||||
<span>
|
||||
Joined:{' '}
|
||||
<b>
|
||||
<time datetime={createdAt}>
|
||||
{Intl.DateTimeFormat('en', {
|
||||
year: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
}).format(new Date(createdAt))}
|
||||
</time>
|
||||
</b>
|
||||
</span>
|
||||
)}
|
||||
</p>
|
||||
<p class="actions">
|
||||
{followedBy ? <span class="tag">Following you</span> : <span />}{' '}
|
||||
{relationshipUIState !== 'loading' && relationship && (
|
||||
<button
|
||||
type="button"
|
||||
class={`${following ? 'light danger' : ''}`}
|
||||
disabled={relationshipUIState === 'loading'}
|
||||
onClick={() => {
|
||||
setRelationshipUIState('loading');
|
||||
(async () => {
|
||||
try {
|
||||
let newRelationship;
|
||||
if (following) {
|
||||
const yes = confirm(
|
||||
'Are you sure that you want to unfollow this account?',
|
||||
);
|
||||
if (yes) {
|
||||
newRelationship = await masto.accounts.unfollow(id);
|
||||
}
|
||||
} else {
|
||||
newRelationship = await masto.accounts.follow(id);
|
||||
}
|
||||
} else {
|
||||
newRelationship = await masto.accounts.follow(id);
|
||||
if (newRelationship) setRelationship(newRelationship);
|
||||
setRelationshipUIState('default');
|
||||
} catch (e) {
|
||||
alert(e);
|
||||
setRelationshipUIState('error');
|
||||
}
|
||||
if (newRelationship) setRelationship(newRelationship);
|
||||
setRelationshipUIState('default');
|
||||
} catch (e) {
|
||||
alert(e);
|
||||
setRelationshipUIState('error');
|
||||
}
|
||||
})();
|
||||
}}
|
||||
>
|
||||
{following ? 'Unfollow…' : 'Follow'}
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
})();
|
||||
}}
|
||||
>
|
||||
{following ? 'Unfollow…' : 'Follow'}
|
||||
</button>
|
||||
)}
|
||||
</p>
|
||||
</main>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -712,6 +712,11 @@ a.card:hover {
|
|||
min-height: 50dvh;
|
||||
}
|
||||
|
||||
#edit-history h2 {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
#edit-history :is(ol, ol li) {
|
||||
list-style: none;
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -1134,46 +1134,50 @@ function EditedAtModal({ statusID, onClose = () => {} }) {
|
|||
|
||||
return (
|
||||
<div id="edit-history" class="sheet">
|
||||
{/* <button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<header>
|
||||
{/* <button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<Icon icon="x" alt="Close" />
|
||||
</button> */}
|
||||
<h2>Edit History</h2>
|
||||
{uiState === 'error' && <p>Failed to load history</p>}
|
||||
{uiState === 'loading' && (
|
||||
<p>
|
||||
<Loader abrupt /> Loading…
|
||||
</p>
|
||||
)}
|
||||
{editHistory.length > 0 && (
|
||||
<ol>
|
||||
{editHistory.map((status) => {
|
||||
const { createdAt } = status;
|
||||
const createdAtDate = new Date(createdAt);
|
||||
return (
|
||||
<li key={createdAt} class="history-item">
|
||||
<h3>
|
||||
<time>
|
||||
{Intl.DateTimeFormat('en', {
|
||||
// Show year if not current year
|
||||
year:
|
||||
createdAtDate.getFullYear() === currentYear
|
||||
? undefined
|
||||
: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
weekday: 'short',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
}).format(createdAtDate)}
|
||||
</time>
|
||||
</h3>
|
||||
<Status status={status} size="s" withinContext readOnly />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
<h2>Edit History</h2>
|
||||
{uiState === 'error' && <p>Failed to load history</p>}
|
||||
{uiState === 'loading' && (
|
||||
<p>
|
||||
<Loader abrupt /> Loading…
|
||||
</p>
|
||||
)}
|
||||
</header>
|
||||
<main>
|
||||
{editHistory.length > 0 && (
|
||||
<ol>
|
||||
{editHistory.map((status) => {
|
||||
const { createdAt } = status;
|
||||
const createdAtDate = new Date(createdAt);
|
||||
return (
|
||||
<li key={createdAt} class="history-item">
|
||||
<h3>
|
||||
<time>
|
||||
{Intl.DateTimeFormat('en', {
|
||||
// Show year if not current year
|
||||
year:
|
||||
createdAtDate.getFullYear() === currentYear
|
||||
? undefined
|
||||
: 'numeric',
|
||||
month: 'short',
|
||||
day: 'numeric',
|
||||
weekday: 'short',
|
||||
hour: 'numeric',
|
||||
minute: '2-digit',
|
||||
second: '2-digit',
|
||||
}).format(createdAtDate)}
|
||||
</time>
|
||||
</h3>
|
||||
<Status status={status} size="s" withinContext readOnly />
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ol>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -24,186 +24,188 @@ function Settings({ onClose }) {
|
|||
|
||||
return (
|
||||
<div id="settings-container" class="sheet">
|
||||
{/* <button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<main>
|
||||
{/* <button type="button" class="close-button plain large" onClick={onClose}>
|
||||
<Icon icon="x" alt="Close" />
|
||||
</button> */}
|
||||
<h2>Accounts</h2>
|
||||
<ul class="accounts-list">
|
||||
{accounts.map((account, i) => {
|
||||
const isCurrent = account.info.id === currentAccount;
|
||||
const isDefault = i === (currentDefault || 0);
|
||||
return (
|
||||
<li>
|
||||
<div>
|
||||
{moreThanOneAccount && (
|
||||
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
|
||||
<Icon icon="check-circle" alt="Current" />
|
||||
</span>
|
||||
)}
|
||||
<Avatar url={account.info.avatarStatic} size="xxl" />
|
||||
<NameText account={account.info} showAcct />
|
||||
</div>
|
||||
<div class="actions">
|
||||
{isDefault && moreThanOneAccount && (
|
||||
<>
|
||||
<span class="tag">Default</span>{' '}
|
||||
</>
|
||||
)}
|
||||
{!isCurrent && (
|
||||
<button
|
||||
type="button"
|
||||
class="light"
|
||||
onClick={() => {
|
||||
store.session.set('currentAccount', account.info.id);
|
||||
location.reload();
|
||||
}}
|
||||
>
|
||||
<Icon icon="transfer" /> Switch
|
||||
</button>
|
||||
)}
|
||||
<h2>Accounts</h2>
|
||||
<ul class="accounts-list">
|
||||
{accounts.map((account, i) => {
|
||||
const isCurrent = account.info.id === currentAccount;
|
||||
const isDefault = i === (currentDefault || 0);
|
||||
return (
|
||||
<li>
|
||||
<div>
|
||||
{!isDefault && moreThanOneAccount && (
|
||||
{moreThanOneAccount && (
|
||||
<span class={`current ${isCurrent ? 'is-current' : ''}`}>
|
||||
<Icon icon="check-circle" alt="Current" />
|
||||
</span>
|
||||
)}
|
||||
<Avatar url={account.info.avatarStatic} size="xxl" />
|
||||
<NameText account={account.info} showAcct />
|
||||
</div>
|
||||
<div class="actions">
|
||||
{isDefault && moreThanOneAccount && (
|
||||
<>
|
||||
<span class="tag">Default</span>{' '}
|
||||
</>
|
||||
)}
|
||||
{!isCurrent && (
|
||||
<button
|
||||
type="button"
|
||||
class="plain small"
|
||||
class="light"
|
||||
onClick={() => {
|
||||
// Move account to the top of the list
|
||||
accounts.splice(i, 1);
|
||||
accounts.unshift(account);
|
||||
store.local.setJSON('accounts', accounts);
|
||||
setCurrentDefault(i);
|
||||
store.session.set('currentAccount', account.info.id);
|
||||
location.reload();
|
||||
}}
|
||||
>
|
||||
Set as default
|
||||
<Icon icon="transfer" /> Switch
|
||||
</button>
|
||||
)}
|
||||
{isCurrent && (
|
||||
<>
|
||||
{' '}
|
||||
<div>
|
||||
{!isDefault && moreThanOneAccount && (
|
||||
<button
|
||||
type="button"
|
||||
class="plain small"
|
||||
onClick={() => {
|
||||
const yes = confirm(
|
||||
'Are you sure you want to log out?',
|
||||
);
|
||||
if (!yes) return;
|
||||
// Move account to the top of the list
|
||||
accounts.splice(i, 1);
|
||||
accounts.unshift(account);
|
||||
store.local.setJSON('accounts', accounts);
|
||||
location.reload();
|
||||
setCurrentDefault(i);
|
||||
}}
|
||||
>
|
||||
Log out
|
||||
Set as default
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
)}
|
||||
{isCurrent && (
|
||||
<>
|
||||
{' '}
|
||||
<button
|
||||
type="button"
|
||||
class="plain small"
|
||||
onClick={() => {
|
||||
const yes = confirm(
|
||||
'Are you sure you want to log out?',
|
||||
);
|
||||
if (!yes) return;
|
||||
accounts.splice(i, 1);
|
||||
store.local.setJSON('accounts', accounts);
|
||||
location.reload();
|
||||
}}
|
||||
>
|
||||
Log out
|
||||
</button>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
{moreThanOneAccount && (
|
||||
<p>
|
||||
<small>
|
||||
Note: <i>Default</i> account will always be used for first load.
|
||||
Switched accounts will persist during the session.
|
||||
</small>
|
||||
</li>
|
||||
);
|
||||
})}
|
||||
</ul>
|
||||
{moreThanOneAccount && (
|
||||
<p>
|
||||
<small>
|
||||
Note: <i>Default</i> account will always be used for first load.
|
||||
Switched accounts will persist during the session.
|
||||
</small>
|
||||
</p>
|
||||
)}
|
||||
<p style={{ textAlign: 'end' }}>
|
||||
<a href="/#/login" class="button" onClick={onClose}>
|
||||
Add new account
|
||||
</a>
|
||||
</p>
|
||||
)}
|
||||
<p style={{ textAlign: 'end' }}>
|
||||
<a href="/#/login" class="button" onClick={onClose}>
|
||||
Add new account
|
||||
</a>
|
||||
</p>
|
||||
<h2>Theme</h2>
|
||||
<form
|
||||
ref={themeFormRef}
|
||||
onInput={(e) => {
|
||||
console.log(e);
|
||||
e.preventDefault();
|
||||
const formData = new FormData(themeFormRef.current);
|
||||
const theme = formData.get('theme');
|
||||
const html = document.documentElement;
|
||||
<h2>Theme</h2>
|
||||
<form
|
||||
ref={themeFormRef}
|
||||
onInput={(e) => {
|
||||
console.log(e);
|
||||
e.preventDefault();
|
||||
const formData = new FormData(themeFormRef.current);
|
||||
const theme = formData.get('theme');
|
||||
const html = document.documentElement;
|
||||
|
||||
if (theme === 'auto') {
|
||||
html.classList.remove('is-light', 'is-dark');
|
||||
} else {
|
||||
html.classList.toggle('is-light', theme === 'light');
|
||||
html.classList.toggle('is-dark', theme === 'dark');
|
||||
}
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
.setAttribute('content', theme);
|
||||
if (theme === 'auto') {
|
||||
html.classList.remove('is-light', 'is-dark');
|
||||
} else {
|
||||
html.classList.toggle('is-light', theme === 'light');
|
||||
html.classList.toggle('is-dark', theme === 'dark');
|
||||
}
|
||||
document
|
||||
.querySelector('meta[name="color-scheme"]')
|
||||
.setAttribute('content', theme);
|
||||
|
||||
if (theme === 'auto') {
|
||||
store.local.del('theme');
|
||||
} else {
|
||||
store.local.set('theme', theme);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="light"
|
||||
defaultChecked={currentTheme === 'light'}
|
||||
/>
|
||||
<span>Light</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="dark"
|
||||
defaultChecked={currentTheme === 'dark'}
|
||||
/>
|
||||
<span>Dark</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="auto"
|
||||
defaultChecked={
|
||||
currentTheme !== 'light' && currentTheme !== 'dark'
|
||||
}
|
||||
/>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<h2>About</h2>
|
||||
<p>
|
||||
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
||||
Built
|
||||
</a>{' '}
|
||||
by{' '}
|
||||
<a href="https://mastodon.social/@cheeaun" target="_blank">
|
||||
@cheeaun
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
{__BUILD_TIME__ && (
|
||||
if (theme === 'auto') {
|
||||
store.local.del('theme');
|
||||
} else {
|
||||
store.local.set('theme', theme);
|
||||
}
|
||||
}}
|
||||
>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="light"
|
||||
defaultChecked={currentTheme === 'light'}
|
||||
/>
|
||||
<span>Light</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="dark"
|
||||
defaultChecked={currentTheme === 'dark'}
|
||||
/>
|
||||
<span>Dark</span>
|
||||
</label>
|
||||
<label>
|
||||
<input
|
||||
type="radio"
|
||||
name="theme"
|
||||
value="auto"
|
||||
defaultChecked={
|
||||
currentTheme !== 'light' && currentTheme !== 'dark'
|
||||
}
|
||||
/>
|
||||
<span>Auto</span>
|
||||
</label>
|
||||
</div>
|
||||
</form>
|
||||
<h2>About</h2>
|
||||
<p>
|
||||
Last build:{' '}
|
||||
<relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
|
||||
{__COMMIT_HASH__ && (
|
||||
<>
|
||||
(
|
||||
<a
|
||||
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
|
||||
target="_blank"
|
||||
>
|
||||
<code>{__COMMIT_HASH__}</code>
|
||||
</a>
|
||||
)
|
||||
</>
|
||||
)}
|
||||
<a href="https://github.com/cheeaun/phanpy" target="_blank">
|
||||
Built
|
||||
</a>{' '}
|
||||
by{' '}
|
||||
<a href="https://mastodon.social/@cheeaun" target="_blank">
|
||||
@cheeaun
|
||||
</a>
|
||||
.
|
||||
</p>
|
||||
)}
|
||||
{__BUILD_TIME__ && (
|
||||
<p>
|
||||
Last build:{' '}
|
||||
<relative-time datetime={new Date(__BUILD_TIME__).toISOString()} />{' '}
|
||||
{__COMMIT_HASH__ && (
|
||||
<>
|
||||
(
|
||||
<a
|
||||
href={`https://github.com/cheeaun/phanpy/commit/${__COMMIT_HASH__}`}
|
||||
target="_blank"
|
||||
>
|
||||
<code>{__COMMIT_HASH__}</code>
|
||||
</a>
|
||||
)
|
||||
</>
|
||||
)}
|
||||
</p>
|
||||
)}
|
||||
</main>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in a new issue