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

Tim4 #76

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

Tim4 #76

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
32a8d67
First Commit
Robieeee May 17, 2024
00eaf90
First Commit
Robieeee May 17, 2024
4f53d24
First Commit
Robieeee May 17, 2024
51a9291
Styling
Robieeee May 18, 2024
a31cfbe
Styling Update
Robieeee May 18, 2024
a6a1878
Footer Content Update
Robieeee May 18, 2024
dec3fc2
Styling Update
Robieeee May 18, 2024
98fe871
Styling Update
Robieeee May 18, 2024
43f109f
Styling Update
Robieeee May 18, 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 appsettings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,4 +3,5 @@ module.exports = {
oidcIssuer: process.env['OIDC_ISSUER'] ?? '',
oidcClientId: process.env['OIDC_CLIENT_ID'] ?? '',
oidcScope: process.env['OIDC_SCOPE'] ?? '',
backendNetHost: process.env['BACKEND_NET_HOST'] ?? '',
};
5 changes: 3 additions & 2 deletions components/Title.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,10 +3,11 @@ import Head from 'next/head';

export const Title: React.FC<{
children: string | number
}> = ({ children }) => {
}> = ({children}) => {
return (
<Head>
<title key="title">{children.toString() + '- Accelist Next.js Starter'}</title>
<title key="title">{children.toString()}</title>
</Head>
);
}
// { children }
159 changes: 159 additions & 0 deletions components/carousel.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,159 @@
import React, { useEffect } from "react"
import Glide from "@glidejs/glide"

export default function CarouselControlsInside() {
useEffect(() => {
const slider = new Glide(".glide-01", {
type: "carousel",
focusAt: "center",
perView: 3,
autoplay: 3000,
animationDuration: 700,
gap: 24,
classNames: {
nav: {
active: "[&>*]:bg-wuiSlate-700",
},
},
breakpoints: {
1024: {
perView: 2,
},
640: {
perView: 1,
},
},
}).mount()

return () => {
slider.destroy()
}
}, [])

return (
<>
{/*<!-- Component: Carousel with controls inside --> */}
<div className="glide-01 relative w-full ">
{/* <!-- Slides --> */}
<div className="overflow-hidden" data-glide-el="track">
<ul className="h-96 whitespace-no-wrap flex-no-wrap [backface-visibility: hidden] [transform-style: preserve-3d] [touch-action: pan-Y] [will-change: transform] relative flex w-full overflow-hidden p-0">
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24014600.jpg?version=1"
className="m-auto max-h-full max-w-full object-cover" alt="first"
/>
</li>
<li>
<img
src=" https://cdn.cgv.id/uploads_v2/movie/compressed/24006500.jpg?version=2"
className="m-auto max-h-full max-w-full" alt="Second"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24013100.jpg?version=1"
className="m-auto max-h-full object-cover" alt="Third"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/22024700.jpg?version=1"
className="m-auto max-h-full object-cover" alt="Fourth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24010900.jpg?version=1"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24011300.jpg?version=1"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24012800.jpg?version=2"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24012300.jpg?version=1"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24011500.jpg?version=2"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24012100.jpg?version=1"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
<li>
<img
src="https://cdn.cgv.id/uploads_v2/movie/compressed/24003200.jpg?version=3"
className="m-auto max-h-full object-cover" alt="Fivth"
/>
</li>
</ul>
</div>
{/* <!-- Controls --> */}
<div
className="absolute left-0 top-1/2 flex h-0 w-full items-center justify-between px-4 "
data-glide-el="controls"
>
<button
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-700 bg-white/20 text-slate-700 transition duration-300 hover:border-slate-900 hover:text-slate-900 focus-visible:outline-none lg:h-12 lg:w-12"
data-glide-dir="<"
aria-label="prev slide"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-5 w-5"
>
<title>prev slide</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M6.75 15.75L3 12m0 0l3.75-3.75M3 12h18"
/>
</svg>
</button>
<button
className="inline-flex h-8 w-8 items-center justify-center rounded-full border border-slate-700 bg-white/20 text-slate-700 transition duration-300 hover:border-slate-900 hover:text-slate-900 focus-visible:outline-none lg:h-12 lg:w-12"
data-glide-dir=">"
aria-label="next slide"
>
<svg
xmlns="http://www.w3.org/2000/svg"
fill="none"
viewBox="0 0 24 24"
strokeWidth="1.5"
stroke="currentColor"
className="h-5 w-5"
>
<title>next slide</title>
<path
strokeLinecap="round"
strokeLinejoin="round"
d="M17.25 8.25L21 12m0 0l-3.75 3.75M21 12H3"
/>
</svg>
</button>
</div>
</div>
</>
)
}
Loading
Loading