{/*
-
{ dict.clickNow }
*/}
diff --git a/src/app/components/AutoplayCarousel.tsx b/src/app/components/AutoplayCarousel.tsx
new file mode 100644
index 0000000..4d06920
--- /dev/null
+++ b/src/app/components/AutoplayCarousel.tsx
@@ -0,0 +1,83 @@
+import { ReactElement, useEffect, useLayoutEffect } from "react";
+import * as React from "react";
+
+interface Props {
+ Item: (item: T) => ReactElement;
+ showNum: number;
+ speed: number;
+ containerWidth: number;
+ data: T[];
+ hoverStop?: boolean;
+ direction?: "left" | "right";
+}
+
+const fillArray = (arr: any, length: number) => {
+ const result: any = [];
+ while (result.length < length) {
+ result.push(...arr);
+ }
+ return result.concat(result);
+};
+
+function AutoplayCarousel({ Item, showNum, speed, containerWidth, data, hoverStop = false, direction = "left" }: Props) {
+ const showData = fillArray(data, showNum);
+ const length = showData.length;
+ const itemWidth = containerWidth / showNum;
+
+ useLayoutEffect(() => {
+ const style = document.createElement("style");
+
+ let start = "0";
+ let end = `-${(itemWidth * length) / 2}`;
+ if (direction === "right") {
+ start = end;
+ end = "0";
+ }
+
+ const keyframes = `
+ @keyframes templates-partner-moving {
+ 0% {
+ transform: translateX(${start}px);
+ }
+ 100% {
+ transform: translateX(${end}px);
+ }
+ }
+ `;
+
+ const hoverStyles = hoverStop
+ ? `
+ .list:hover {
+ animation-play-state: paused !important;
+ }
+ `
+ : ``;
+
+ style.innerText = keyframes + hoverStyles;
+ document.head.appendChild(style);
+
+ return () => {
+ document.head.removeChild(style);
+ };
+ }, []);
+
+ return (
+
+
+ );
+}
+
+export default AutoplayCarousel;
diff --git a/src/app/components/ChannelSwiper.tsx b/src/app/components/ChannelSwiper.tsx
new file mode 100644
index 0000000..7940118
--- /dev/null
+++ b/src/app/components/ChannelSwiper.tsx
@@ -0,0 +1,41 @@
+"use client";
+import AutoplayCarousel from "./AutoplayCarousel";
+
+interface ItemProps {
+ url: string;
+}
+const data: ItemProps[] = [
+ { url: "logo-yandex.png" },
+ { url: "logo-vungle.png" },
+ { url: "logo-unity.png" },
+ { url: "logo-tiktok.png" },
+ { url: "logo-tapjoy.png" },
+ { url: "logo-pangle.png" },
+ { url: "logo-moloco.png" },
+ { url: "logo-mintegral.png" },
+ { url: "logo-liftoff.png" },
+ { url: "logo-kwai.png" },
+ { url: "logo-google.png" },
+ { url: "logo-facebook.png" },
+ { url: "logo-chartboost.png" },
+ { url: "logo-bigoads.png" },
+ { url: "logo-applovin.png" },
+];
+
+export default function ChannelSwiper() {
+ const Item = (item: ItemProps) => {
+ return (
+
+ {showData.map((item, index) => (
+
+
+
+ ))}
+
+ 
+
+ );
+ };
+
+ return (
+ <>
+
+
+
+ );
+}
diff --git a/src/app/globals.css b/src/app/globals.css
index a895b5b..7bda662 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -3,147 +3,165 @@
@tailwind utilities;
html::-webkit-scrollbar {
- width: 8px;
+ width: 8px;
}
html::-webkit-scrollbar-thumb {
- background-color: rgba(169, 169, 169, 0.729);
- border-radius: 10px;
+ background-color: rgba(169, 169, 169, 0.729);
+ border-radius: 10px;
}
html::-webkit-scrollbar-track {
- background: #fff;
+ background: #fff;
}
-
html {
- font-size: 14.4px;
+ font-size: 14.4px;
}
.menu-item {
- display: block;
+ display: block;
}
@media (min-width: 300px) and (max-width: 350px) {
- html {
- font-size: 3px;
- }
+ html {
+ font-size: 3px;
+ }
}
@media (min-width: 350px) and (max-width: 400px) {
- html {
- font-size: 3.5px;
- }
+ html {
+ font-size: 3.5px;
+ }
}
@media (min-width: 400px) and (max-width: 450px) {
- html {
- font-size: 4px;
- }
+ html {
+ font-size: 4px;
+ }
}
@media (min-width: 450px) and (max-width: 500px) {
- html {
- font-size: 4.5px;
- }
+ html {
+ font-size: 4.5px;
+ }
}
@media (min-width: 500px) and (max-width: 550px) {
- html {
- font-size: 5px;
- }
+ html {
+ font-size: 5px;
+ }
}
@media (min-width: 550px) and (max-width: 600px) {
- html {
- font-size: 5.5px;
- }
+ html {
+ font-size: 5.5px;
+ }
}
@media (min-width: 600px) and (max-width: 650px) {
- html {
- font-size: 6px;
- }
+ html {
+ font-size: 6px;
+ }
}
@media (min-width: 650px) and (max-width: 700px) {
- html {
- font-size: 6.5px;
- }
+ html {
+ font-size: 6.5px;
+ }
}
@media (min-width: 700px) and (max-width: 750px) {
- html {
- font-size: 7px;
- }
+ html {
+ font-size: 7px;
+ }
}
@media (min-width: 750px) and (max-width: 800px) {
- html {
- font-size: 7.6px;
- }
+ html {
+ font-size: 7.6px;
+ }
}
@media (min-width: 800px) and (max-width: 850px) {
- html {
- font-size: 8px;
- }
+ html {
+ font-size: 8px;
+ }
}
@media (min-width: 850px) and (max-width: 900px) {
- html {
- font-size: 8.5px;
- }
+ html {
+ font-size: 8.5px;
+ }
}
@media (min-width: 900px) and (max-width: 950px) {
- html {
- font-size: 9px;
- }
+ html {
+ font-size: 9px;
+ }
}
@media (min-width: 1000px) and (max-width: 1050px) {
- html {
- font-size: 10px;
- }
+ html {
+ font-size: 10px;
+ }
}
@media (min-width: 1050px) and (max-width: 1100px) {
- html {
- font-size: 10.5px;
- }
+ html {
+ font-size: 10.5px;
+ }
}
@media (min-width: 1100px) and (max-width: 1150px) {
- html {
- font-size: 11px;
- }
+ html {
+ font-size: 11px;
+ }
}
@media (min-width: 1150px) and (max-width: 1200px) {
- html {
- font-size: 11.5px;
- }
+ html {
+ font-size: 11.5px;
+ }
}
@media (min-width: 1200px) and (max-width: 1250px) {
- html {
- font-size: 12px;
- }
+ html {
+ font-size: 12px;
+ }
}
@media (min-width: 1250px) and (max-width: 1300px) {
- html {
- font-size: 12.5px;
- }
+ html {
+ font-size: 12.5px;
+ }
}
@media (min-width: 1300px) and (max-width: 1350px) {
- html {
- font-size: 13px;
- }
+ html {
+ font-size: 13px;
+ }
}
@media (min-width: 1350px) and (max-width: 1400px) {
- html {
- font-size: 13.5px;
- }
+ html {
+ font-size: 13.5px;
+ }
}
@media (min-width: 1400px) and (max-width: 1450px) {
- html {
- font-size: 14px;
- }
+ html {
+ font-size: 14px;
+ }
}
@media (min-width: 1440px) {
- html {
- font-size: 14.4px;
- }
+ html {
+ font-size: 14.4px;
+ }
}
@media (max-width: 1440px) {
- .menu-item {
- display: none;
- }
+ .menu-item {
+ display: none;
+ }
}
@media (min-width: 1440px) {
- .menu-item {
- display: block;
- }
+ .menu-item {
+ display: block;
+ }
+}
+
+.wrap {
+ overflow: hidden;
+}
+.wrap .list {
+ position: relative;
+ top: 0px;
+ left: 0px;
+ height: 100%;
+ display: flex;
+}
+
+@media (max-width: 768px) {
+ .wrap .list > div {
+ width: 150px !important;
+ display: flex;
+ justify-content: center;
+ }
}
diff --git a/tsconfig.json b/tsconfig.json
index 7b28589..bce397f 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -1,6 +1,10 @@
{
"compilerOptions": {
- "lib": ["dom", "dom.iterable", "esnext"],
+ "lib": [
+ "dom",
+ "dom.iterable",
+ "esnext"
+ ],
"allowJs": true,
"skipLibCheck": true,
"strict": true,
@@ -11,16 +15,27 @@
"resolveJsonModule": true,
"isolatedModules": true,
"jsx": "preserve",
+ "baseUrl": "./",
"incremental": true,
+ "noImplicitAny": false,
"plugins": [
{
"name": "next"
}
],
"paths": {
- "@/*": ["./src/*"]
+ "@/*": [
+ "./src/*"
+ ]
}
},
- "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"],
- "exclude": ["node_modules"]
-}
+ "include": [
+ "next-env.d.ts",
+ "**/*.ts",
+ "**/*.tsx",
+ ".next/types/**/*.ts"
+ ],
+ "exclude": [
+ "node_modules"
+ ]
+}
\ No newline at end of file