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

Gallery image upload #56

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

Gallery image upload #56

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
f88113e
- adding image upload component
zoranmesec Oct 23, 2024
fe3aa2d
- adding progress bar
zoranmesec Oct 23, 2024
5af6202
- improving progress bar
zoranmesec Oct 24, 2024
14cc44d
- bugfixes, code refactoring, linting
zoranmesec Nov 18, 2024
570436c
- use of form action instead of useEffect
zoranmesec Nov 19, 2024
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
1 change: 1 addition & 0 deletions .env.local.example
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
NEXT_PUBLIC_API_URL=http://localhost:3000/graphql
NEXT_PUBLIC_UPLOAD_URL=http://localhost:3000/upload

IMAGES_PROTOCOL=https
IMAGES_HOSTNAME=plezanje.net
Expand Down
1 change: 1 addition & 0 deletions .env.production
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
NEXT_PUBLIC_API_URL=https://plezanje.info/graphql
NEXT_PUBLIC_UPLOAD_URL=https://plezanje.info/upload

IMAGES_PROTOCOL=https
IMAGES_HOSTNAME=plezanje.net
Expand Down
14 changes: 13 additions & 1 deletion src/app/[lang]/crag/[cragSlug]/(crag)/gallery/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,9 @@ import urqlServer from "@/graphql/urql-server";
import NextImage from "next/image";
import { gql } from "urql/core";
import ImageList from "./components/image-list";
import ImageUpload from "@/components/image-upload/image-upload";
import Button from "@/components/ui/button";
import authStatus from "@/utils/auth/auth-status";

type TCragGalleryPageParams = {
cragSlug: string;
Expand All @@ -13,11 +16,20 @@ async function CragGalleryPage({ params }: { params: TCragGalleryPageParams }) {
crag: params.cragSlug,
});

const currentUser = await authStatus();
const images = data.cragBySlug.images as Image[];
const imagesBaseUrl = `${process.env.IMAGES_PROTOCOL}://${process.env.IMAGES_HOSTNAME}${process.env.IMAGES_PATHNAME}`;

return (
<div className="mx-auto mt-18 px-4 2xl:container xs:px-8">
<div className="mx-auto mt-4 px-4 2xl:container xs:px-8">
{currentUser.loggedIn && <div className="flex justify-end mb-4">
<ImageUpload
openTrigger={<Button>Dodaj fotografijo</Button>}
entityType="crag"
entityId={data.cragBySlug.id}
user={currentUser}
/>
</div>}
<ImageList images={images} baseUrl={imagesBaseUrl} />
</div>
);
Expand Down
76 changes: 76 additions & 0 deletions src/app/sandbox/progress-bar/page.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,76 @@
"use client";
import ProgressBar from "@/components/ui/progress-bar";

function ProgressBarPage() {
return (
<div className="m-8">
<h3>Progress bar demo</h3>

<div className="mt-14 w-80">
<h5>At 0%</h5>
<div className="mt-4">
<ProgressBar size="small" value={0} />
</div>
</div>

<div className="mt-14 w-80">
<h5>Size small</h5>
<div className="mt-4">
<ProgressBar size="small" value={0.1} />
</div>
</div>

<div className="mt-14 w-80">
<h5>Default</h5>
<div className="mt-4">
<ProgressBar value={0.2} />
</div>
</div>

<div className="mt-14 w-80">
<h5>Size large</h5>
<div className="mt-4">
<ProgressBar size="large" value={0.3} />
</div>
</div>

<div className="mt-14 w-80">
<h5>Size extra large</h5>
<div className="mt-4">
<ProgressBar size="extra-large" value={0.4} />
</div>
</div>

<div className="mt-14 w-80">
<h5>With label inside </h5>
<div className="mt-4">
<ProgressBar withLabelInside size="extra-large" value={0.5} />
</div>
</div>

<div className="mt-14 w-80">
<h5>With label inside 100%</h5>
<div className="mt-4">
<ProgressBar withLabelInside size="large" value={1} />
</div>
</div>

<div className="mt-14 w-80">
<h5>With label outside 100%</h5>
<div className="mt-4">
<ProgressBar size="extra-large" value={1} />
</div>
</div>

<div className="mt-14 w-80">
<h5>At 0% with label inside</h5>
<div className="mt-4">
<ProgressBar withLabelInside size="large" value={0} />
</div>
</div>

</div>
);
}

export default ProgressBarPage;
Loading