141 líneas
4.4 KiB
JavaScript
141 líneas
4.4 KiB
JavaScript
import React from 'react';
|
|
import styled from 'styled-components';
|
|
import Header from './Header';
|
|
|
|
const LayoutContainer = styled.div`
|
|
min-height: 100vh;
|
|
background: linear-gradient(180deg, #f8fafc 0%, #e2e8f0 100%);
|
|
`;
|
|
|
|
const MainContent = styled.main`
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem 1rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr 3fr 1fr;
|
|
gap: 2rem;
|
|
|
|
@media (max-width: 1024px) {
|
|
grid-template-columns: 1fr;
|
|
padding: 1rem;
|
|
}
|
|
`;
|
|
|
|
const LeftSidebar = styled.aside`
|
|
@media (max-width: 1024px) {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
const CenterColumn = styled.div`
|
|
min-height: 400px;
|
|
`;
|
|
|
|
const RightSidebar = styled.aside`
|
|
@media (max-width: 1024px) {
|
|
display: none;
|
|
}
|
|
`;
|
|
|
|
const SidebarCard = styled.div`
|
|
background: white;
|
|
border-radius: 12px;
|
|
padding: 1.5rem;
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
margin-bottom: 1rem;
|
|
`;
|
|
|
|
const SidebarTitle = styled.h3`
|
|
margin: 0 0 1rem 0;
|
|
color: #2d3748;
|
|
font-size: 1.1rem;
|
|
`;
|
|
|
|
const Layout = ({ children, user, onLogout }) => {
|
|
return (
|
|
<LayoutContainer>
|
|
<Header user={user} onLogout={onLogout} />
|
|
|
|
<MainContent>
|
|
<LeftSidebar>
|
|
<SidebarCard>
|
|
<SidebarTitle>Navigation</SidebarTitle>
|
|
<div>
|
|
<p>Quick access to different timelines and features.</p>
|
|
</div>
|
|
</SidebarCard>
|
|
|
|
{user && (
|
|
<SidebarCard>
|
|
<SidebarTitle>Your Profile</SidebarTitle>
|
|
<div style={{ textAlign: 'center' }}>
|
|
{user.avatar && (
|
|
<img
|
|
src={user.avatar}
|
|
alt="Avatar"
|
|
style={{
|
|
width: '60px',
|
|
height: '60px',
|
|
borderRadius: '50%',
|
|
marginBottom: '0.5rem'
|
|
}}
|
|
/>
|
|
)}
|
|
<p><strong>{user.display_name || user.username}</strong></p>
|
|
<p style={{ fontSize: '0.9rem', color: '#666' }}>@{user.username}</p>
|
|
<div style={{ display: 'flex', justifyContent: 'space-around', marginTop: '1rem' }}>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<strong>{user.followers_count || 0}</strong>
|
|
<div style={{ fontSize: '0.8rem', color: '#666' }}>Followers</div>
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<strong>{user.following_count || 0}</strong>
|
|
<div style={{ fontSize: '0.8rem', color: '#666' }}>Following</div>
|
|
</div>
|
|
<div style={{ textAlign: 'center' }}>
|
|
<strong>{user.statuses_count || 0}</strong>
|
|
<div style={{ fontSize: '0.8rem', color: '#666' }}>Posts</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</SidebarCard>
|
|
)}
|
|
</LeftSidebar>
|
|
|
|
<CenterColumn>
|
|
{children}
|
|
</CenterColumn>
|
|
|
|
<RightSidebar>
|
|
<SidebarCard>
|
|
<SidebarTitle>About GoToSocial</SidebarTitle>
|
|
<p style={{ fontSize: '0.9rem', color: '#666', lineHeight: '1.5' }}>
|
|
A fast, fun, and small ActivityPub social network server.
|
|
Connect with friends and discover new communities!
|
|
</p>
|
|
</SidebarCard>
|
|
|
|
<SidebarCard>
|
|
<SidebarTitle>Trending</SidebarTitle>
|
|
<div>
|
|
<div style={{ padding: '0.5rem 0', borderBottom: '1px solid #e2e8f0' }}>
|
|
<span style={{ color: '#667eea', fontWeight: 'bold' }}>#opensource</span>
|
|
<div style={{ fontSize: '0.8rem', color: '#666' }}>42 posts</div>
|
|
</div>
|
|
<div style={{ padding: '0.5rem 0', borderBottom: '1px solid #e2e8f0' }}>
|
|
<span style={{ color: '#667eea', fontWeight: 'bold' }}>#federation</span>
|
|
<div style={{ fontSize: '0.8rem', color: '#666' }}>28 posts</div>
|
|
</div>
|
|
<div style={{ padding: '0.5rem 0' }}>
|
|
<span style={{ color: '#667eea', fontWeight: 'bold' }}>#mastodon</span>
|
|
<div style={{ fontSize: '0.8rem', color: '#666' }}>15 posts</div>
|
|
</div>
|
|
</div>
|
|
</SidebarCard>
|
|
</RightSidebar>
|
|
</MainContent>
|
|
</LayoutContainer>
|
|
);
|
|
};
|
|
|
|
export default Layout; |