OkunElya/uni-web-site
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

main content done

Browse Source
This commit is contained in:
OkunElya
2026-04-14 10:04:37 +10:00
parent d091b04910
commit de9748a33c
6 changed files with 95 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files

5
site/src/App.tsx
View File

@@ -1,9 +1,11 @@
import NavBar from './components/Navbar'
import Gallery from "./components/Gallery";
// import Content from "./components/Content";
import MainContent from "./components/Content";
import CustomFooter from "./components/CustomFooter";
import {Container} from "@mui/material";
import './styles/App.css'
function App() {
@@ -11,6 +13,7 @@ function App() {
<>
<NavBar active='1'/>
<Gallery />
<MainContent />
<CustomFooter/>
</>
)

81
site/src/components/BigCard.tsx Normal file
View File

@@ -0,0 +1,81 @@
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardHeader from '@mui/material/CardHeader';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
interface ComponentProps {
data: {
img: string,
title: string,
description: string[]
},
cardNum: number;
}
const StyledTypography = styled(Typography)(({ theme }) => ({
color: theme.palette.text.secondary,
textAlign: 'justify',
marginBottom: '1em',
}));
function BigCard({ data, cardNum }: ComponentProps) {
const reverseModifier = cardNum % 2 == 0 ? "-reverse" : "";
let textA = data.description.slice(0, -data.description.length / 2);
let textB = data.description.slice(-data.description.length / 2);
// if(reverseModifier){
// [textA,textB] = [textB,textA];
// }
return (
<Card>
<CardHeader title={data.title} />
<Box sx={{
display: 'flex',
'flexDirection': {
xs: 'column' + reverseModifier,
md: 'row' + reverseModifier
}
}}>
<CardContent sx={{order:reverseModifier?2:""}}>
{textA.map((item, ind) => (
<StyledTypography key={ind} variant="body2">
{item}
</StyledTypography>
))}
</CardContent>
<Box sx={{ display: 'flex', alignItems: 'center', justifyContent: 'center', maxWidth: { xs: '100%', md: "50%" }, bgcolor:"#0581f513" }} >
<CardMedia
component="img"
alt={data.title}
image={data.img}
sx={{ maxWidth: '100%', objectFit: 'contain' }}
/>
</Box>
<Box sx={{ display: 'flex', flexDirection: 'column', justifyContent: 'space-between', order: reverseModifier ? 1 : 3 }} >
<CardContent>
{textB.map((item, ind) => (
<StyledTypography key={ind} variant="body2">
{item}
</StyledTypography>
))}
</CardContent>
<CardActions sx={{ justifyContent: cardNum % 2 != 0 ? 'end' : "start", alignContent: "flex-end" }} >
<Button size="small">Check it out</Button>
</CardActions>
</Box>
</Box>
</Card>
)
}
export default BigCard;

53
site/src/components/BuildCard.tsx
View File

@@ -1,53 +0,0 @@
import Card from '@mui/material/Card';
import CardActions from '@mui/material/CardActions';
import CardContent from '@mui/material/CardContent';
import CardMedia from '@mui/material/CardMedia';
import Button from '@mui/material/Button';
import Typography from '@mui/material/Typography';
import Box from '@mui/material/Box';
import { styled } from '@mui/material/styles';
interface ComponentProps {
building: {
img: string,
title: string,
description: string[]
},
cardNum: number;
}
const StyledTypography = styled(Typography)(({ theme }) => ({
color: theme.palette.text.secondary,
textAlign: 'justify',
marginBottom: '1em',
}));
function BuildCard({ building,cardNum} : ComponentProps) {
return (
<Card style={cardNum%2==0?{'flexDirection':'row-reverse'}:{}}sx={{ display: 'flex' }} >
<CardMedia
component="img"
alt={ building.title }
image={ building.img }
/>
<Box>
<CardContent>
<Typography gutterBottom variant="h5" >
{ building.title }
</Typography>
{ building.description.map((item, ind) => (
<StyledTypography key={ind} variant="body2">
{ item }
</StyledTypography>
))}
</CardContent>
<CardActions sx={{ justifyContent: cardNum%2!=0?'end':"start"}} >
<Button size="small">Подробнее</Button>
</CardActions>
</Box>
</Card>
)
}
export default BuildCard;

18
site/src/components/Content.tsx
View File

@@ -1,19 +1,17 @@
import Container from '@mui/material/Container';
import Grid from '@mui/material/Grid';
import structures from "../data";
import BuildCard from "./BuildCard"
const cardData = [structures[3], structures[6], structures[9], structures[7]]
import {mainCards} from "../data";
import BigCard from "./BigCard"
const cardData = mainCards
function Content() {
return (
<Container maxWidth="xl">
<Grid container spacing={{ xs: 3, md: 6 }}>
{cardData.map((item, index) => (
<Grid key={index} size={{ xs: 12, md: 6 }} >
<BuildCard building={ item } cardNum={index} />
</Grid>
))}
</Grid>
{cardData.map((item, index) => (
<Grid key={index} size={{ xs: 12, md: 6 }} >
<BigCard data={ item } cardNum={index} />
</Grid>
))}
</Container>
);
}

2
site/src/components/Gallery.tsx
View File

@@ -9,7 +9,7 @@ const imgData = realPhotos.slice(0,3)
function Gallery() {
return (
<Container maxWidth="lg">
<Box sx={{ width: "90%", height: 'min-content', m: '20px auto' } }>
<Box sx={{ width: {xs:"100%", sm:"90%"}, height: 'min-content', m: '20px auto' } }>
<ImageList
variant="masonry"
sx={{

2
site/src/data.tsx
View File

@@ -10,7 +10,7 @@ import playbackVideo from "./images/photos/playback.mp4";
const realPhotos = [
{ img: irlPhoto0, title: "Sunset" },
{ img: irlPhoto1, title: "building with louds on bg" },
{ img: irlPhoto1, title: "building with clouds on bg" },
{ img: irlPhoto2, title: "moon" },
{ img: irlPhoto3, title: "dragonfly" },
{ img: irlPhoto4, title: "maple leaves" },