Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: add image gallery #2053

Closed
wants to merge 1 commit into from
Closed

feat: add image gallery #2053

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion app/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,8 @@
<html lang="en">
<head>
<meta charset="utf-8" />
<title>React App</title>
<!-- <title>Portfolio Tasha</title> -->
<title>Tasha's Portfolio</title>
<meta
name="description"
content="The web's most popular Jamstack React template"
Expand Down
3 changes: 1 addition & 2 deletions app/layout/components/AppToolbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,6 @@ import {
} from "@mui/material";
import * as React from "react";
import { Link as NavLink } from "../../common/Link.js";
import { useCurrentUser } from "../../core/auth.js";
import { Logo } from "./Logo.js";
import { NotificationsMenu } from "./NotificationsMenu.js";
import { ThemeButton } from "./ThemeButton.js";
Expand All @@ -23,7 +22,7 @@ import { UserMenu } from "./UserMenu.js";
export function AppToolbar(props: AppToolbarProps): JSX.Element {
const { sx, ...other } = props;
const menuAnchorRef = React.createRef<HTMLButtonElement>();
const me = useCurrentUser();
const me = false; // useCurrentUser();

const [anchorEl, setAnchorEl] = React.useState({
userMenu: null as HTMLElement | null,
Expand Down
30 changes: 30 additions & 0 deletions app/layout/components/ImageGallery/ImageViewer.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,30 @@
.image-gallery {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
}

@media (max-width: 768px) {
.image-gallery {
grid-template-columns: repeat(2, 1fr);
}
}

.image-container {
position: relative;
overflow: hidden;
padding-top: 66.6%; /* 3:2 aspect ratio */

background-size: cover;
background-position: top;
}

.image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-size: cover;
background-position: top;
}
37 changes: 37 additions & 0 deletions app/layout/components/ImageGallery/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,37 @@
import React from 'react';
import './ImageViewer.css';

const ImageViewerComponent: React.FC = () => {
const imageNames = [
'Arabesque.webp',
'Ebroker.webp',
'Foxstudio.webp',
'Gonka.webp',
'IPM.webp',
'OpinionFromUs.webp',
'OptimProject.webp',
'Powerkebab-min.webp',
'Sano.webp',
'Spectrum.webp',
'SPhancesti.webp',
];


return (
<div className="image-gallery">
{imageNames.map((imageName, index) => (
<div
className="image-container"
key={index}
>
<div className="image"
key={ index }
style={{ backgroundImage: `url(images/w/${imageName})` }}>
</div>
</div>
))}
</div>
);
};

export default ImageViewerComponent;
4 changes: 2 additions & 2 deletions app/layout/components/Logo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,6 @@
/* SPDX-License-Identifier: MIT */

import { Typography, TypographyProps } from "@mui/material";
import { config } from "../../core/config.js";

export function Logo(props: TypographyProps): JSX.Element {
const { sx, ...other } = props;
Expand All @@ -19,7 +18,8 @@ export function Logo(props: TypographyProps): JSX.Element {
variant="h1"
{...other}
>
{config.app.name}
Web Design Wonders in Figma
{/* {config.app.name} */}
</Typography>
);
}
5 changes: 3 additions & 2 deletions app/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,8 @@
"react": "^18.2.0",
"react-dom": "^18.2.0",
"react-router-dom": "^6.15.0",
"recoil": "^0.7.7"
"recoil": "^0.7.7",
"viewerjs": "^1.11.4"
},
"devDependencies": {
"@babel/core": "^7.22.10",
Expand All @@ -43,4 +44,4 @@
"vite": "~4.4.9",
"vitest": "~0.33.0"
}
}
}
Binary file added app/public/images/w/Arabesque.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/Ebroker.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/Foxstudio.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/Gonka.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/IPM.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/OpinionFromUs.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/OptimProject.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/Powerkebab-min.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/SPhancesti.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/Sano.webp
View file
Open in desktop
Binary file not shown.
Binary file added app/public/images/w/Spectrum.webp
View file
Open in desktop
Binary file not shown.
4 changes: 2 additions & 2 deletions app/public/site.manifest
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"short_name": "React App",
"name": "React App Sample",
"short_name": "",
"name": "",
"icons": [
{
"src": "favicon.ico",
Expand Down
38 changes: 5 additions & 33 deletions app/routes/dashboard/Dashboard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,45 +1,17 @@
/* SPDX-FileCopyrightText: 2014-present Kriasoft */
/* SPDX-License-Identifier: MIT */

import { Api, GitHub } from "@mui/icons-material";
import { Box, Button, Container, Typography } from "@mui/material";
import { usePageEffect } from "../../core/page.js";
import { Container, Typography } from "@mui/material";
import ImageGallery from "../../layout/components/ImageGallery/index.js";

export function Component(): JSX.Element {
usePageEffect({ title: "React App" });

return (
<Container sx={{ py: "20vh" }} maxWidth="sm">
<Container sx={{ py: "20vh" }} maxWidth="xl">
<Typography sx={{ mb: 2 }} variant="h1" align="center">
Welcome to React Starter Kit!
</Typography>

<Typography sx={{ mb: 4 }} variant="h3" align="center">
The web&apos;s most popular Jamstack React template.
Image Gallery
</Typography>

<Box
sx={{
display: "flex",
justifyContent: "center",
gridGap: "1rem",
}}
>
<Button
variant="outlined"
size="large"
href={`/api`}
children="Explorer API"
startIcon={<Api />}
/>
<Button
variant="outlined"
size="large"
href="https://github.com/kriasoft/react-starter-kit"
children="View on GitHub"
startIcon={<GitHub />}
/>
</Box>
<ImageGallery />
</Container>
);
}
Expand Down
2 changes: 1 addition & 1 deletion env/.local.env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

# Web application settings
APP_ENV=local
APP_NAME=React App
APP_NAME=Portfolio
APP_HOSTNAME=localhost
APP_ORIGIN=http://localhost:5173
API_ORIGIN=https://api-mcfytwakla-uc.a.run.app
Expand Down
2 changes: 1 addition & 1 deletion env/.prod.env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

# Web application settings
APP_ENV=prod
APP_NAME=React App
APP_NAME=Portfolio
APP_HOSTNAME=example.com
APP_ORIGIN=https://example.com
API_ORIGIN=https://example.com
Expand Down
2 changes: 1 addition & 1 deletion env/.test.env
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@

# Web application settings
APP_ENV=test
APP_NAME=React App
APP_NAME=Portfolio
APP_HOSTNAME=test.example.com
APP_ORIGIN=https://test.example.com
API_ORIGIN=https://test.example.com
Expand Down
10 changes: 9 additions & 1 deletion yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2613,9 +2613,10 @@ __metadata:
notistack: "npm:^3.0.1"
react: "npm:^18.2.0"
react-dom: "npm:^18.2.0"
react-router-dom: "npm:^6.15.0"
react-router-dom: "npm:^6.15.0"
recoil: "npm:^0.7.7"
typescript: "npm:~5.1.6"
viewerjs: "npm:^1.11.4"
vite: "npm:~4.4.9"
vitest: "npm:~0.33.0"
languageName: unknown
Expand Down Expand Up @@ -8219,6 +8220,13 @@ __metadata:
languageName: node
linkType: hard

"viewerjs@npm:^1.11.4":
version: 1.11.4
resolution: "viewerjs@npm:1.11.4"
checksum: 49ee3d37522ebda9e912422ac028b9c42476dcda67e136abf239b950aa9eb2335be931a731c1ab08017ed116752e87e1f4d01c64f31090766ec299ba0af78dd5
languageName: node
linkType: hard

"vite-node@npm:0.33.0":
version: 0.33.0
resolution: "vite-node@npm:0.33.0"
Expand Down