Merge pull request #9 from Accords-Library/develop
Added more grouping options for Library and Contents
This commit is contained in:
DrMint
GitHub
commit
00d9cc8b9d
|
|
@ -11,7 +11,7 @@
|
||||||
"@fontsource/opendyslexic": "^4.5.2",
|
"@fontsource/opendyslexic": "^4.5.2",
|
||||||
"@fontsource/vollkorn": "^4.5.4",
|
"@fontsource/vollkorn": "^4.5.4",
|
||||||
"@fontsource/zen-maru-gothic": "^4.5.5",
|
"@fontsource/zen-maru-gothic": "^4.5.5",
|
||||||
"markdown-to-jsx": "^7.1.6",
|
"markdown-to-jsx": "^7.1.7",
|
||||||
"next": "^12.1.0",
|
"next": "^12.1.0",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
|
|
@ -21,13 +21,13 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/typography": "^0.5.2",
|
"@tailwindcss/typography": "^0.5.2",
|
||||||
"@types/node": "17.0.18",
|
"@types/node": "17.0.21",
|
||||||
"@types/react": "17.0.39",
|
"@types/react": "17.0.40",
|
||||||
"@types/react-dom": "^17.0.11",
|
"@types/react-dom": "^17.0.13",
|
||||||
"eslint": "8.9.0",
|
"eslint": "8.10.0",
|
||||||
"eslint-config-next": "12.1.0",
|
"eslint-config-next": "12.1.0",
|
||||||
"tailwindcss": "^3.0.23",
|
"tailwindcss": "^3.0.23",
|
||||||
"typescript": "4.5.5"
|
"typescript": "4.6.2"
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@babel/code-frame": {
|
"node_modules/@babel/code-frame": {
|
||||||
|
|
@ -162,9 +162,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@eslint/eslintrc": {
|
"node_modules/@eslint/eslintrc": {
|
||||||
"version": "1.1.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.0.tgz",
|
||||||
"integrity": "sha512-C1DfL7XX4nPqGd6jcP01W9pVM1HYCuUkFk1432D7F0v3JSlUIeOYn9oCoi3eoLZ+iwBSb29BMFxxny0YrrEZqg==",
|
"integrity": "sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"ajv": "^6.12.4",
|
"ajv": "^6.12.4",
|
||||||
|
|
@ -476,9 +476,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@types/node": {
|
"node_modules/@types/node": {
|
||||||
"version": "17.0.18",
|
"version": "17.0.21",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
|
||||||
"integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
|
"integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@types/parse-json": {
|
"node_modules/@types/parse-json": {
|
||||||
|
|
@ -494,9 +494,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"node_modules/@types/react": {
|
"node_modules/@types/react": {
|
||||||
"version": "17.0.39",
|
"version": "17.0.40",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz",
|
||||||
"integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
|
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/prop-types": "*",
|
"@types/prop-types": "*",
|
||||||
|
|
@ -505,9 +505,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/@types/react-dom": {
|
"node_modules/@types/react-dom": {
|
||||||
"version": "17.0.11",
|
"version": "17.0.13",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.13.tgz",
|
||||||
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
|
"integrity": "sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
|
|
@ -1302,12 +1302,12 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/eslint": {
|
"node_modules/eslint": {
|
||||||
"version": "8.9.0",
|
"version": "8.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.10.0.tgz",
|
||||||
"integrity": "sha512-PB09IGwv4F4b0/atrbcMFboF/giawbBLVC7fyDamk5Wtey4Jh2K+rYaBhCAbUyEI4QzB1ly09Uglc9iCtFaG2Q==",
|
"integrity": "sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@eslint/eslintrc": "^1.1.0",
|
"@eslint/eslintrc": "^1.2.0",
|
||||||
"@humanwhocodes/config-array": "^0.9.2",
|
"@humanwhocodes/config-array": "^0.9.2",
|
||||||
"ajv": "^6.10.0",
|
"ajv": "^6.10.0",
|
||||||
"chalk": "^4.0.0",
|
"chalk": "^4.0.0",
|
||||||
|
|
@ -2447,9 +2447,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/markdown-to-jsx": {
|
"node_modules/markdown-to-jsx": {
|
||||||
"version": "7.1.6",
|
"version": "7.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz",
|
||||||
"integrity": "sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==",
|
"integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==",
|
||||||
"engines": {
|
"engines": {
|
||||||
"node": ">= 10"
|
"node": ">= 10"
|
||||||
},
|
},
|
||||||
|
|
@ -3529,9 +3529,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"node_modules/typescript": {
|
"node_modules/typescript": {
|
||||||
"version": "4.5.5",
|
"version": "4.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
|
||||||
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
|
"integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"bin": {
|
"bin": {
|
||||||
"tsc": "bin/tsc",
|
"tsc": "bin/tsc",
|
||||||
|
|
@ -3772,9 +3772,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@eslint/eslintrc": {
|
"@eslint/eslintrc": {
|
||||||
"version": "1.1.0",
|
"version": "1.2.0",
|
||||||
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.1.0.tgz",
|
"resolved": "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-1.2.0.tgz",
|
||||||
"integrity": "sha512-C1DfL7XX4nPqGd6jcP01W9pVM1HYCuUkFk1432D7F0v3JSlUIeOYn9oCoi3eoLZ+iwBSb29BMFxxny0YrrEZqg==",
|
"integrity": "sha512-igm9SjJHNEJRiUnecP/1R5T3wKLEJ7pL6e2P+GUSfCd0dGjPYYZve08uzw8L2J8foVHFz+NGu12JxRcU2gGo6w==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"ajv": "^6.12.4",
|
"ajv": "^6.12.4",
|
||||||
|
|
@ -3968,9 +3968,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@types/node": {
|
"@types/node": {
|
||||||
"version": "17.0.18",
|
"version": "17.0.21",
|
||||||
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.18.tgz",
|
"resolved": "https://registry.npmjs.org/@types/node/-/node-17.0.21.tgz",
|
||||||
"integrity": "sha512-eKj4f/BsN/qcculZiRSujogjvp5O/k4lOW5m35NopjZM/QwLOR075a8pJW5hD+Rtdm2DaCVPENS6KtSQnUD6BA==",
|
"integrity": "sha512-DBZCJbhII3r90XbQxI8Y9IjjiiOGlZ0Hr32omXIZvwwZ7p4DMMXGrKXVyPfuoBOri9XNtL0UK69jYIBIsRX3QQ==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@types/parse-json": {
|
"@types/parse-json": {
|
||||||
|
|
@ -3986,9 +3986,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"@types/react": {
|
"@types/react": {
|
||||||
"version": "17.0.39",
|
"version": "17.0.40",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.39.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react/-/react-17.0.40.tgz",
|
||||||
"integrity": "sha512-UVavlfAxDd/AgAacMa60Azl7ygyQNRwC/DsHZmKgNvPmRR5p70AJ5Q9EAmL2NWOJmeV+vVUI4IAP7GZrN8h8Ug==",
|
"integrity": "sha512-UrXhD/JyLH+W70nNSufXqMZNuUD2cXHu6UjCllC6pmOQgBX4SGXOH8fjRka0O0Ee0HrFxapDD8Bwn81Kmiz6jQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/prop-types": "*",
|
"@types/prop-types": "*",
|
||||||
|
|
@ -3997,9 +3997,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"@types/react-dom": {
|
"@types/react-dom": {
|
||||||
"version": "17.0.11",
|
"version": "17.0.13",
|
||||||
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.11.tgz",
|
"resolved": "https://registry.npmjs.org/@types/react-dom/-/react-dom-17.0.13.tgz",
|
||||||
"integrity": "sha512-f96K3k+24RaLGVu/Y2Ng3e1EbZ8/cVJvypZWd7cy0ofCBaf2lcM46xNhycMZ2xGwbBjRql7hOlZ+e2WlJ5MH3Q==",
|
"integrity": "sha512-wEP+B8hzvy6ORDv1QBhcQia4j6ea4SFIBttHYpXKPFZRviBvknq0FRh3VrIxeXUmsPkwuXVZrVGG7KUVONmXCQ==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@types/react": "*"
|
"@types/react": "*"
|
||||||
|
|
@ -4564,12 +4564,12 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"eslint": {
|
"eslint": {
|
||||||
"version": "8.9.0",
|
"version": "8.10.0",
|
||||||
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.9.0.tgz",
|
"resolved": "https://registry.npmjs.org/eslint/-/eslint-8.10.0.tgz",
|
||||||
"integrity": "sha512-PB09IGwv4F4b0/atrbcMFboF/giawbBLVC7fyDamk5Wtey4Jh2K+rYaBhCAbUyEI4QzB1ly09Uglc9iCtFaG2Q==",
|
"integrity": "sha512-tcI1D9lfVec+R4LE1mNDnzoJ/f71Kl/9Cv4nG47jOueCMBrCCKYXr4AUVS7go6mWYGFD4+EoN6+eXSrEbRzXVw==",
|
||||||
"dev": true,
|
"dev": true,
|
||||||
"requires": {
|
"requires": {
|
||||||
"@eslint/eslintrc": "^1.1.0",
|
"@eslint/eslintrc": "^1.2.0",
|
||||||
"@humanwhocodes/config-array": "^0.9.2",
|
"@humanwhocodes/config-array": "^0.9.2",
|
||||||
"ajv": "^6.10.0",
|
"ajv": "^6.10.0",
|
||||||
"chalk": "^4.0.0",
|
"chalk": "^4.0.0",
|
||||||
|
|
@ -5430,9 +5430,9 @@
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
"markdown-to-jsx": {
|
"markdown-to-jsx": {
|
||||||
"version": "7.1.6",
|
"version": "7.1.7",
|
||||||
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.6.tgz",
|
"resolved": "https://registry.npmjs.org/markdown-to-jsx/-/markdown-to-jsx-7.1.7.tgz",
|
||||||
"integrity": "sha512-1wrIGZYwIG2gR3yfRmbr4FlQmhaAKoKTpRo4wur4fp9p0njU1Hi7vR8fj0AUKKIcPduiJmPprzmCB5B/GvlC7g==",
|
"integrity": "sha512-VI3TyyHlGkO8uFle0IOibzpO1c1iJDcXcS/zBrQrXQQvJ2tpdwVzVZ7XdKsyRz1NdRmre4dqQkMZzUHaKIG/1w==",
|
||||||
"requires": {}
|
"requires": {}
|
||||||
},
|
},
|
||||||
"merge2": {
|
"merge2": {
|
||||||
|
|
@ -6153,9 +6153,9 @@
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"typescript": {
|
"typescript": {
|
||||||
"version": "4.5.5",
|
"version": "4.6.2",
|
||||||
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.5.5.tgz",
|
"resolved": "https://registry.npmjs.org/typescript/-/typescript-4.6.2.tgz",
|
||||||
"integrity": "sha512-TCTIul70LyWe6IJWT8QSYeA54WQe8EjQFU4wY52Fasj5UKx88LNYKCgBEHcOMOrFF1rKGbD8v/xcNWVUq9SymA==",
|
"integrity": "sha512-HM/hFigTBHZhLXshn9sN37H085+hQGeJHJ/X7LpBWLID/fbc2acUMfU+lGD98X81sKP+pFa9f0DZmCwB9GnbAg==",
|
||||||
"dev": true
|
"dev": true
|
||||||
},
|
},
|
||||||
"unbox-primitive": {
|
"unbox-primitive": {
|
||||||
|
|
|
||||||
12
package.json
12
package.json
|
|
@ -13,7 +13,7 @@
|
||||||
"@fontsource/opendyslexic": "^4.5.2",
|
"@fontsource/opendyslexic": "^4.5.2",
|
||||||
"@fontsource/vollkorn": "^4.5.4",
|
"@fontsource/vollkorn": "^4.5.4",
|
||||||
"@fontsource/zen-maru-gothic": "^4.5.5",
|
"@fontsource/zen-maru-gothic": "^4.5.5",
|
||||||
"markdown-to-jsx": "^7.1.6",
|
"markdown-to-jsx": "^7.1.7",
|
||||||
"next": "^12.1.0",
|
"next": "^12.1.0",
|
||||||
"react": "17.0.2",
|
"react": "17.0.2",
|
||||||
"react-dom": "17.0.2",
|
"react-dom": "17.0.2",
|
||||||
|
|
@ -23,12 +23,12 @@
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@tailwindcss/typography": "^0.5.2",
|
"@tailwindcss/typography": "^0.5.2",
|
||||||
"@types/node": "17.0.18",
|
"@types/node": "17.0.21",
|
||||||
"@types/react": "17.0.39",
|
"@types/react": "17.0.40",
|
||||||
"@types/react-dom": "^17.0.11",
|
"@types/react-dom": "^17.0.13",
|
||||||
"eslint": "8.9.0",
|
"eslint": "8.10.0",
|
||||||
"eslint-config-next": "12.1.0",
|
"eslint-config-next": "12.1.0",
|
||||||
"tailwindcss": "^3.0.23",
|
"tailwindcss": "^3.0.23",
|
||||||
"typescript": "4.5.5"
|
"typescript": "4.6.2"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -199,7 +199,7 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{/* Sub panel */}
|
{/* Sub panel */}
|
||||||
{subPanel ? (
|
{subPanel && (
|
||||||
<div
|
<div
|
||||||
className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
className={`${subPanelClass} border-r-[1px] mobile:bottom-20 mobile:border-r-0 mobile:border-l-[1px] border-black border-dotted top-0 bottom-0 right-0 left-12 overflow-y-scroll webkit-scrollbar:w-0 [scrollbar-width:none] transition-transform duration-300 bg-light texture-paper-dots
|
||||||
${
|
${
|
||||||
|
|
@ -212,8 +212,6 @@ export default function AppLayout(props: AppLayoutProps): JSX.Element {
|
||||||
>
|
>
|
||||||
{subPanel}
|
{subPanel}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{/* Main panel */}
|
{/* Main panel */}
|
||||||
|
|
|
||||||
|
|
@ -64,15 +64,13 @@ export default function ChronologyItemComponent(
|
||||||
props.item.attributes.day
|
props.item.attributes.day
|
||||||
)}
|
)}
|
||||||
>
|
>
|
||||||
{props.displayYear ? (
|
{props.displayYear && (
|
||||||
<p className="text-lg mt-[-.2em] font-bold">
|
<p className="text-lg mt-[-.2em] font-bold">
|
||||||
{generateYear(
|
{generateYear(
|
||||||
props.item.attributes.displayed_date,
|
props.item.attributes.displayed_date,
|
||||||
props.item.attributes.year
|
props.item.attributes.year
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<p className="col-start-1 text-dark text-sm">
|
<p className="col-start-1 text-dark text-sm">
|
||||||
|
|
@ -108,7 +106,7 @@ export default function ChronologyItemComponent(
|
||||||
{translation.title ? <h3>{translation.title}</h3> : ""}
|
{translation.title ? <h3>{translation.title}</h3> : ""}
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
{translation.description ? (
|
{translation.description && (
|
||||||
<p
|
<p
|
||||||
className={
|
className={
|
||||||
event.translations.length > 1
|
event.translations.length > 1
|
||||||
|
|
@ -118,8 +116,6 @@ export default function ChronologyItemComponent(
|
||||||
>
|
>
|
||||||
{translation.description}
|
{translation.description}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
{translation.note ? (
|
{translation.note ? (
|
||||||
<em>{"Notes: " + translation.note}</em>
|
<em>{"Notes: " + translation.note}</em>
|
||||||
|
|
|
||||||
|
|
@ -53,7 +53,7 @@ export default function ThumbnailHeader(
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div className="grid grid-flow-col gap-8">
|
<div className="grid grid-flow-col gap-8">
|
||||||
{content.type ? (
|
{content.type && (
|
||||||
<div className="grid place-items-center place-content-start gap-2">
|
<div className="grid place-items-center place-content-start gap-2">
|
||||||
<h3 className="text-xl">{langui.type}</h3>
|
<h3 className="text-xl">{langui.type}</h3>
|
||||||
<Button>
|
<Button>
|
||||||
|
|
@ -62,19 +62,15 @@ export default function ThumbnailHeader(
|
||||||
: prettySlug(content.type.data.attributes.slug)}
|
: prettySlug(content.type.data.attributes.slug)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{content.categories.data.length > 0 ? (
|
{content.categories.data.length > 0 && (
|
||||||
<div className="grid place-items-center place-content-start gap-2">
|
<div className="grid place-items-center place-content-start gap-2">
|
||||||
<h3 className="text-xl">{langui.categories}</h3>
|
<h3 className="text-xl">{langui.categories}</h3>
|
||||||
{content.categories.data.map((category) => (
|
{content.categories.data.map((category) => (
|
||||||
<Button key={category.id}>{category.attributes.name}</Button>
|
<Button key={category.id}>{category.attributes.name}</Button>
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{content.titles.length > 0 && content.titles[0].description && (
|
{content.titles.length > 0 && content.titles[0].description && (
|
||||||
|
|
|
||||||
|
|
@ -54,7 +54,7 @@ export default function ContentTOCLine(
|
||||||
? content.attributes.range[0].starting_page
|
? content.attributes.range[0].starting_page
|
||||||
: ""}
|
: ""}
|
||||||
</p>
|
</p>
|
||||||
{content.attributes.content.data ? (
|
{content.attributes.content.data && (
|
||||||
<Chip className="justify-self-end thin:hidden">
|
<Chip className="justify-self-end thin:hidden">
|
||||||
{content.attributes.content.data.attributes.type.data.attributes
|
{content.attributes.content.data.attributes.type.data.attributes
|
||||||
.titles.length > 0
|
.titles.length > 0
|
||||||
|
|
@ -65,8 +65,6 @@ export default function ContentTOCLine(
|
||||||
.attributes.slug
|
.attributes.slug
|
||||||
)}
|
)}
|
||||||
</Chip>
|
</Chip>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div
|
<div
|
||||||
|
|
@ -78,24 +76,20 @@ export default function ContentTOCLine(
|
||||||
subdirectory_arrow_right
|
subdirectory_arrow_right
|
||||||
</span>
|
</span>
|
||||||
|
|
||||||
{content.attributes.scan_set.length > 0 ? (
|
{content.attributes.scan_set.length > 0 && (
|
||||||
<Button
|
<Button
|
||||||
href={`/contents/${content.attributes.content.data.attributes.slug}/scans/`}
|
href={`/contents/${content.attributes.content.data.attributes.slug}/scans/`}
|
||||||
>
|
>
|
||||||
{langui.view_scans}
|
{langui.view_scans}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{content.attributes.content.data ? (
|
{content.attributes.content.data && (
|
||||||
<Button
|
<Button
|
||||||
href={`/contents/${content.attributes.content.data.attributes.slug}`}
|
href={`/contents/${content.attributes.content.data.attributes.slug}`}
|
||||||
>
|
>
|
||||||
{langui.open_content}
|
{langui.open_content}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{content.attributes.scan_set.length === 0 &&
|
{content.attributes.scan_set.length === 0 &&
|
||||||
|
|
|
||||||
|
|
@ -33,14 +33,12 @@ export default function LibraryContentPreview(
|
||||||
)}
|
)}
|
||||||
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute coarse:rounded-b-md bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
||||||
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
<div className="grid grid-flow-col gap-1 overflow-hidden place-content-start">
|
||||||
{item.type.data ? (
|
{item.type.data && (
|
||||||
<Chip>
|
<Chip>
|
||||||
{item.type.data.attributes.titles.length > 0
|
{item.type.data.attributes.titles.length > 0
|
||||||
? item.type.data.attributes.titles[0].title
|
? item.type.data.attributes.titles[0].title
|
||||||
: prettySlug(item.type.data.attributes.slug)}
|
: prettySlug(item.type.data.attributes.slug)}
|
||||||
</Chip>
|
</Chip>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
|
||||||
|
|
@ -16,6 +16,7 @@ export type LibraryItemsPreviewProps = {
|
||||||
title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"];
|
title: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["title"];
|
||||||
subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"];
|
subtitle: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["subtitle"];
|
||||||
price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"];
|
price?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["price"];
|
||||||
|
categories: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["categories"];
|
||||||
release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
|
release_date?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["release_date"];
|
||||||
metadata?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["metadata"];
|
metadata?: GetLibraryItemsPreviewQuery["libraryItems"]["data"][number]["attributes"]["metadata"];
|
||||||
};
|
};
|
||||||
|
|
@ -43,31 +44,36 @@ export default function LibraryItemsPreview(
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
<div className="linearbg-obi fine:drop-shadow-shade-lg fine:absolute place-items-start bottom-2 -inset-x-0.5 opacity-[var(--cover-opacity)] transition-opacity z-20 grid p-4 gap-2">
|
||||||
{item.metadata && item.metadata.length > 0 ? (
|
{item.metadata && item.metadata.length > 0 && (
|
||||||
<div className="flex flex-row gap-1">
|
<div className="flex flex-row gap-1">
|
||||||
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<h2 className="mobile:text-sm text-lg leading-5">{item.title}</h2>
|
<h2 className="mobile:text-sm text-lg leading-5">{item.title}</h2>
|
||||||
<h3 className="mobile:text-xs leading-3">{item.subtitle}</h3>
|
<h3 className="mobile:text-xs leading-3">{item.subtitle}</h3>
|
||||||
</div>
|
</div>
|
||||||
{item.release_date || item.price ? (
|
|
||||||
|
<div className="w-full grid grid-flow-col gap-1 overflow-x-scroll webkit-scrollbar:w-0 [scrollbar-width:none] place-content-start">
|
||||||
|
{item.categories.data.map((category) => (
|
||||||
|
<Chip key={category.id} className="text-sm">
|
||||||
|
{category.attributes.short}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
|
||||||
|
{(item.release_date || item.price) && (
|
||||||
<div className="grid grid-flow-col w-full">
|
<div className="grid grid-flow-col w-full">
|
||||||
{item.release_date ? (
|
{item.release_date && (
|
||||||
<p className="mobile:text-xs text-sm">
|
<p className="mobile:text-xs text-sm">
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
event
|
event
|
||||||
</span>
|
</span>
|
||||||
{prettyDate(item.release_date)}
|
{prettyDate(item.release_date)}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
{item.price && props.currencies ? (
|
{item.price && props.currencies && (
|
||||||
<p className="mobile:text-xs text-sm justify-self-end">
|
<p className="mobile:text-xs text-sm justify-self-end">
|
||||||
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
<span className="material-icons !text-base translate-y-[.15em] mr-1">
|
||||||
shopping_cart
|
shopping_cart
|
||||||
|
|
@ -78,12 +84,8 @@ export default function LibraryItemsPreview(
|
||||||
appLayout.currency
|
appLayout.currency
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -10,10 +10,8 @@ export default function PanelHeader(props: PanelHeaderProps): JSX.Element {
|
||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className="w-full grid place-items-center">
|
<div className="w-full grid place-items-center">
|
||||||
{props.icon ? (
|
{props.icon && (
|
||||||
<span className="material-icons !text-4xl mb-3">{props.icon}</span>
|
<span className="material-icons !text-4xl mb-3">{props.icon}</span>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
<h2 className="text-2xl">{props.title}</h2>
|
<h2 className="text-2xl">{props.title}</h2>
|
||||||
{props.description ? <p>{props.description}</p> : ""}
|
{props.description ? <p>{props.description}</p> : ""}
|
||||||
|
|
|
||||||
|
|
@ -34,8 +34,10 @@ export default function ReturnButton(props: ReturnButtonProps): JSX.Element {
|
||||||
<Button
|
<Button
|
||||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||||
href={props.href}
|
href={props.href}
|
||||||
|
className="grid grid-flow-col gap-2"
|
||||||
>
|
>
|
||||||
❮ {props.langui.return_to} {props.title}
|
<span className="material-icons">navigate_before</span>
|
||||||
|
{props.langui.return_to} {props.title}
|
||||||
</Button>
|
</Button>
|
||||||
{props.horizontalLine && <HorizontalLine />}
|
{props.horizontalLine && <HorizontalLine />}
|
||||||
</div>
|
</div>
|
||||||
|
|
|
||||||
|
|
@ -192,10 +192,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
<p>
|
<p>
|
||||||
{langui.licensing_notice ? (
|
{langui.licensing_notice && (
|
||||||
<Markdown>{langui.licensing_notice}</Markdown>
|
<Markdown>{langui.licensing_notice}</Markdown>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
<a
|
<a
|
||||||
|
|
@ -210,10 +208,8 @@ export default function MainPanel(props: MainPanelProps): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
</a>
|
</a>
|
||||||
<p>
|
<p>
|
||||||
{langui.copyright_notice ? (
|
{langui.copyright_notice && (
|
||||||
<Markdown>{langui.copyright_notice}</Markdown>
|
<Markdown>{langui.copyright_notice}</Markdown>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</p>
|
</p>
|
||||||
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
|
<div className="mt-12 mb-4 grid h-4 grid-flow-col place-content-center gap-8">
|
||||||
|
|
|
||||||
|
|
@ -205,6 +205,15 @@ query getLibraryItemsPreview($language_code: String) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
categories {
|
||||||
|
data {
|
||||||
|
id
|
||||||
|
attributes {
|
||||||
|
name
|
||||||
|
short
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
metadata {
|
metadata {
|
||||||
__typename
|
__typename
|
||||||
... on ComponentMetadataBooks {
|
... on ComponentMetadataBooks {
|
||||||
|
|
@ -354,6 +363,15 @@ query getLibraryItem($slug: String, $language_code: String) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
categories {
|
||||||
|
data {
|
||||||
|
id
|
||||||
|
attributes {
|
||||||
|
name
|
||||||
|
short
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
size {
|
size {
|
||||||
width
|
width
|
||||||
height
|
height
|
||||||
|
|
@ -523,6 +541,15 @@ query getLibraryItem($slug: String, $language_code: String) {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
categories {
|
||||||
|
data {
|
||||||
|
id
|
||||||
|
attributes {
|
||||||
|
name
|
||||||
|
short
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
metadata {
|
metadata {
|
||||||
__typename
|
__typename
|
||||||
... on ComponentMetadataBooks {
|
... on ComponentMetadataBooks {
|
||||||
|
|
@ -666,6 +693,7 @@ query getLibraryItem($slug: String, $language_code: String) {
|
||||||
data {
|
data {
|
||||||
id
|
id
|
||||||
attributes {
|
attributes {
|
||||||
|
name
|
||||||
short
|
short
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
@ -736,6 +764,7 @@ query getContents($language_code: String) {
|
||||||
data {
|
data {
|
||||||
id
|
id
|
||||||
attributes {
|
attributes {
|
||||||
|
name
|
||||||
short
|
short
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -317,6 +317,18 @@ export type GetLibraryItemsPreviewQuery = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
categories: {
|
||||||
|
__typename: "CategoryRelationResponseCollection";
|
||||||
|
data: Array<{
|
||||||
|
__typename: "CategoryEntity";
|
||||||
|
id: string;
|
||||||
|
attributes: {
|
||||||
|
__typename: "Category";
|
||||||
|
name: string;
|
||||||
|
short: string;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
metadata: Array<
|
metadata: Array<
|
||||||
| {
|
| {
|
||||||
__typename: "ComponentMetadataAudio";
|
__typename: "ComponentMetadataAudio";
|
||||||
|
|
@ -510,6 +522,18 @@ export type GetLibraryItemQuery = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
categories: {
|
||||||
|
__typename: "CategoryRelationResponseCollection";
|
||||||
|
data: Array<{
|
||||||
|
__typename: "CategoryEntity";
|
||||||
|
id: string;
|
||||||
|
attributes: {
|
||||||
|
__typename: "Category";
|
||||||
|
name: string;
|
||||||
|
short: string;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
size: {
|
size: {
|
||||||
__typename: "ComponentBasicsSize";
|
__typename: "ComponentBasicsSize";
|
||||||
width: number;
|
width: number;
|
||||||
|
|
@ -726,6 +750,18 @@ export type GetLibraryItemQuery = {
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
categories: {
|
||||||
|
__typename: "CategoryRelationResponseCollection";
|
||||||
|
data: Array<{
|
||||||
|
__typename: "CategoryEntity";
|
||||||
|
id: string;
|
||||||
|
attributes: {
|
||||||
|
__typename: "Category";
|
||||||
|
name: string;
|
||||||
|
short: string;
|
||||||
|
};
|
||||||
|
}>;
|
||||||
|
};
|
||||||
metadata: Array<
|
metadata: Array<
|
||||||
| {
|
| {
|
||||||
__typename: "ComponentMetadataAudio";
|
__typename: "ComponentMetadataAudio";
|
||||||
|
|
@ -897,6 +933,7 @@ export type GetLibraryItemQuery = {
|
||||||
id: string;
|
id: string;
|
||||||
attributes: {
|
attributes: {
|
||||||
__typename: "Category";
|
__typename: "Category";
|
||||||
|
name: string;
|
||||||
short: string;
|
short: string;
|
||||||
};
|
};
|
||||||
}>;
|
}>;
|
||||||
|
|
@ -982,7 +1019,11 @@ export type GetContentsQuery = {
|
||||||
data: Array<{
|
data: Array<{
|
||||||
__typename: "CategoryEntity";
|
__typename: "CategoryEntity";
|
||||||
id: string;
|
id: string;
|
||||||
attributes: { __typename: "Category"; short: string };
|
attributes: {
|
||||||
|
__typename: "Category";
|
||||||
|
name: string;
|
||||||
|
short: string;
|
||||||
|
};
|
||||||
}>;
|
}>;
|
||||||
};
|
};
|
||||||
type: {
|
type: {
|
||||||
|
|
|
||||||
|
|
@ -44,28 +44,22 @@ export default function ContentIndex(props: ContentIndexProps): JSX.Element {
|
||||||
|
|
||||||
<HorizontalLine />
|
<HorizontalLine />
|
||||||
|
|
||||||
{content.text_set.length > 0 ? (
|
{content.text_set.length > 0 && (
|
||||||
<Button href={`/contents/${content.slug}/read/`}>
|
<Button href={`/contents/${content.slug}/read/`}>
|
||||||
{langui.read_content}
|
{langui.read_content}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{content.audio_set.length > 0 ? (
|
{content.audio_set.length > 0 && (
|
||||||
<Button href={`/contents/${content.slug}/listen/`}>
|
<Button href={`/contents/${content.slug}/listen/`}>
|
||||||
{langui.listen_content}
|
{langui.listen_content}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{content.video_set.length > 0 ? (
|
{content.video_set.length > 0 && (
|
||||||
<Button href={`/contents/${content.slug}/watch/`}>
|
<Button href={`/contents/${content.slug}/watch/`}>
|
||||||
{langui.watch_content}
|
{langui.watch_content}
|
||||||
</Button>
|
</Button>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ContentPanel>
|
</ContentPanel>
|
||||||
|
|
|
||||||
|
|
@ -47,7 +47,7 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
horizontalLine
|
horizontalLine
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{content.text_set.length > 0 ? (
|
{content.text_set.length > 0 && (
|
||||||
<div className="grid gap-5">
|
<div className="grid gap-5">
|
||||||
<h2 className="text-xl">
|
<h2 className="text-xl">
|
||||||
{content.text_set[0].source_language.data.attributes.code ===
|
{content.text_set[0].source_language.data.attributes.code ===
|
||||||
|
|
@ -140,8 +140,6 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
|
|
@ -159,10 +157,8 @@ export default function ContentRead(props: ContentReadProps): JSX.Element {
|
||||||
|
|
||||||
<HorizontalLine />
|
<HorizontalLine />
|
||||||
|
|
||||||
{content.text_set.length > 0 ? (
|
{content.text_set.length > 0 && (
|
||||||
<Markdawn text={content.text_set[0].text} />
|
<Markdawn text={content.text_set[0].text} />
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ContentPanel>
|
</ContentPanel>
|
||||||
|
|
|
||||||
|
|
@ -8,15 +8,30 @@ import { getContents } from "graphql/operations";
|
||||||
import PanelHeader from "components/PanelComponents/PanelHeader";
|
import PanelHeader from "components/PanelComponents/PanelHeader";
|
||||||
import AppLayout from "components/AppLayout";
|
import AppLayout from "components/AppLayout";
|
||||||
import LibraryContentPreview from "components/Library/LibraryContentPreview";
|
import LibraryContentPreview from "components/Library/LibraryContentPreview";
|
||||||
import { prettyinlineTitle } from "queries/helpers";
|
import { prettyinlineTitle, prettySlug } from "queries/helpers";
|
||||||
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
import { AppStaticProps, getAppStaticProps } from "queries/getAppStaticProps";
|
||||||
|
import Select from "components/Select";
|
||||||
|
import { useEffect, useState } from "react";
|
||||||
|
|
||||||
interface LibraryProps extends AppStaticProps {
|
interface ContentsProps extends AppStaticProps {
|
||||||
contents: GetContentsQuery["contents"]["data"];
|
contents: GetContentsQuery["contents"]["data"];
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function Library(props: LibraryProps): JSX.Element {
|
type GroupContentItems = Map<string, GetContentsQuery["contents"]["data"]>;
|
||||||
const { langui } = props;
|
|
||||||
|
export default function Contents(props: ContentsProps): JSX.Element {
|
||||||
|
const { langui, contents } = props;
|
||||||
|
|
||||||
|
const [groupingMethod, setGroupingMethod] = useState<number>(-1);
|
||||||
|
|
||||||
|
const [groups, setGroups] = useState<GroupContentItems>(
|
||||||
|
getGroups(groupingMethod, contents)
|
||||||
|
);
|
||||||
|
|
||||||
|
useEffect(() => {
|
||||||
|
setGroups(getGroups(groupingMethod, contents));
|
||||||
|
}, [langui, groupingMethod, contents]);
|
||||||
|
|
||||||
const subPanel = (
|
const subPanel = (
|
||||||
<SubPanel>
|
<SubPanel>
|
||||||
<PanelHeader
|
<PanelHeader
|
||||||
|
|
@ -24,15 +39,45 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
title={langui.contents}
|
title={langui.contents}
|
||||||
description={langui.contents_description}
|
description={langui.contents_description}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
|
<div className="flex flex-row gap-2 place-items-center">
|
||||||
|
<p className="flex-shrink-0">{langui.group_by}:</p>
|
||||||
|
<Select
|
||||||
|
className="w-full"
|
||||||
|
options={[langui.category, langui.type]}
|
||||||
|
state={groupingMethod}
|
||||||
|
setState={setGroupingMethod}
|
||||||
|
allowEmpty
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
);
|
);
|
||||||
const contentPanel = (
|
const contentPanel = (
|
||||||
<ContentPanel width={ContentPanelWidthSizes.large}>
|
<ContentPanel width={ContentPanelWidthSizes.large}>
|
||||||
<div className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
{[...groups].map(([name, items]) => (
|
||||||
{props.contents.map((item) => (
|
<>
|
||||||
<LibraryContentPreview key={item.id} item={item.attributes} />
|
{items.length > 0 && (
|
||||||
))}
|
<>
|
||||||
</div>
|
{name && (
|
||||||
|
<h2
|
||||||
|
key={"h2" + name}
|
||||||
|
className="text-2xl pb-2 pt-10 first-of-type:pt-0"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</h2>
|
||||||
|
)}
|
||||||
|
<div
|
||||||
|
key={"items" + name}
|
||||||
|
className="grid gap-8 items-end grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]"
|
||||||
|
>
|
||||||
|
{items.map((item) => (
|
||||||
|
<LibraryContentPreview key={item.id} item={item.attributes} />
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</>
|
||||||
|
))}
|
||||||
</ContentPanel>
|
</ContentPanel>
|
||||||
);
|
);
|
||||||
return (
|
return (
|
||||||
|
|
@ -72,7 +117,7 @@ export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
return titleA.localeCompare(titleB);
|
return titleA.localeCompare(titleB);
|
||||||
});
|
});
|
||||||
|
|
||||||
const props: LibraryProps = {
|
const props: ContentsProps = {
|
||||||
...(await getAppStaticProps(context)),
|
...(await getAppStaticProps(context)),
|
||||||
contents: contents,
|
contents: contents,
|
||||||
};
|
};
|
||||||
|
|
@ -80,3 +125,61 @@ export const getStaticProps: GetStaticProps = async (context) => {
|
||||||
props: props,
|
props: props,
|
||||||
};
|
};
|
||||||
};
|
};
|
||||||
|
|
||||||
|
function getGroups(
|
||||||
|
groupByType: number,
|
||||||
|
items: ContentsProps["contents"]
|
||||||
|
): GroupContentItems {
|
||||||
|
switch (groupByType) {
|
||||||
|
case 0:
|
||||||
|
const typeGroup = new Map();
|
||||||
|
typeGroup.set("Drakengard 1", []);
|
||||||
|
typeGroup.set("Drakengard 1.3", []);
|
||||||
|
typeGroup.set("Drakengard 2", []);
|
||||||
|
typeGroup.set("Drakengard 3", []);
|
||||||
|
typeGroup.set("Drakengard 4", []);
|
||||||
|
typeGroup.set("NieR Gestalt", []);
|
||||||
|
typeGroup.set("NieR Replicant", []);
|
||||||
|
typeGroup.set("NieR Replicant ver.1.22474487139...", []);
|
||||||
|
typeGroup.set("NieR:Automata", []);
|
||||||
|
typeGroup.set("NieR Re[in]carnation", []);
|
||||||
|
typeGroup.set("SINoALICE", []);
|
||||||
|
typeGroup.set("Voice of Cards", []);
|
||||||
|
typeGroup.set("Final Fantasy XIV", []);
|
||||||
|
typeGroup.set("Thou Shalt Not Die", []);
|
||||||
|
typeGroup.set("Bakuken", []);
|
||||||
|
typeGroup.set("YoRHa", []);
|
||||||
|
typeGroup.set("YoRHa Boys", []);
|
||||||
|
typeGroup.set("No category", []);
|
||||||
|
|
||||||
|
items.map((item) => {
|
||||||
|
if (item.attributes.categories.data.length === 0) {
|
||||||
|
typeGroup.get("No category")?.push(item);
|
||||||
|
} else {
|
||||||
|
item.attributes.categories.data.map((category) => {
|
||||||
|
typeGroup.get(category.attributes.name)?.push(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return typeGroup;
|
||||||
|
|
||||||
|
case 1:
|
||||||
|
const groupType: GroupContentItems = new Map();
|
||||||
|
items.map((item) => {
|
||||||
|
const type =
|
||||||
|
item.attributes.type.data.attributes.titles.length > 0
|
||||||
|
? item.attributes.type.data.attributes.titles[0].title
|
||||||
|
: prettySlug(item.attributes.type.data.attributes.slug);
|
||||||
|
|
||||||
|
if (!groupType.has(type)) groupType.set(type, []);
|
||||||
|
groupType.get(type)?.push(item);
|
||||||
|
});
|
||||||
|
|
||||||
|
return groupType;
|
||||||
|
|
||||||
|
default:
|
||||||
|
const groupDefault: GroupContentItems = new Map();
|
||||||
|
groupDefault.set("", items);
|
||||||
|
return groupDefault;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
|
||||||
|
|
@ -70,15 +70,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{item.gallery.data.length > 0 ? (
|
{item.gallery.data.length > 0 && (
|
||||||
<NavOption
|
<NavOption
|
||||||
title={langui.gallery}
|
title={langui.gallery}
|
||||||
url="#gallery"
|
url="#gallery"
|
||||||
border
|
border
|
||||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<NavOption
|
<NavOption
|
||||||
|
|
@ -88,21 +86,17 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||||
/>
|
/>
|
||||||
|
|
||||||
{item.subitems.data.length > 0 ? (
|
{item.subitems.data.length > 0 && (
|
||||||
<NavOption
|
<NavOption
|
||||||
title={isVariantSet ? langui.variants : langui.subitems}
|
title={isVariantSet ? langui.variants : langui.subitems}
|
||||||
url={isVariantSet ? "#variants" : "#subitems"}
|
url={isVariantSet ? "#variants" : "#subitems"}
|
||||||
border
|
border
|
||||||
onClick={() => appLayout.setSubPanelOpen(false)}
|
onClick={() => appLayout.setSubPanelOpen(false)}
|
||||||
/>
|
/>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.contents.data.length > 0 ? (
|
{item.contents.data.length > 0 && (
|
||||||
<NavOption title={langui.contents} url="#contents" border />
|
<NavOption title={langui.contents} url="#contents" border />
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</SubPanel>
|
</SubPanel>
|
||||||
|
|
@ -134,7 +128,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
|
|
||||||
<InsetBox id="summary" className="grid place-items-center">
|
<InsetBox id="summary" className="grid place-items-center">
|
||||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
|
<div className="w-[clamp(0px,100%,42rem)] grid place-items-center gap-8">
|
||||||
{item.subitem_of.data.length > 0 ? (
|
{item.subitem_of.data.length > 0 && (
|
||||||
<div className="grid place-items-center">
|
<div className="grid place-items-center">
|
||||||
<p>{langui.subitem_of}</p>
|
<p>{langui.subitem_of}</p>
|
||||||
<Button
|
<Button
|
||||||
|
|
@ -147,26 +141,18 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
)}
|
)}
|
||||||
</Button>
|
</Button>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
<div className="grid place-items-center">
|
<div className="grid place-items-center">
|
||||||
<h1 className="text-3xl">{item.title}</h1>
|
<h1 className="text-3xl">{item.title}</h1>
|
||||||
{item.subtitle ? (
|
{item.subtitle && <h2 className="text-2xl">{item.subtitle}</h2>}
|
||||||
<h2 className="text-2xl">{item.subtitle}</h2>
|
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
{item.descriptions.length > 0 ? (
|
{item.descriptions.length > 0 && (
|
||||||
<p className="text-justify">{item.descriptions[0].description}</p>
|
<p className="text-justify">{item.descriptions[0].description}</p>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</InsetBox>
|
</InsetBox>
|
||||||
|
|
||||||
{item.gallery.data.length > 0 ? (
|
{item.gallery.data.length > 0 && (
|
||||||
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
<div id="gallery" className="grid place-items-center gap-8 w-full">
|
||||||
<h2 className="text-2xl">{langui.gallery}</h2>
|
<h2 className="text-2xl">{langui.gallery}</h2>
|
||||||
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
<div className="grid w-full gap-8 items-end grid-cols-[repeat(auto-fill,_minmax(15rem,1fr))]">
|
||||||
|
|
@ -186,15 +172,13 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
<InsetBox id="details" className="grid place-items-center">
|
<InsetBox id="details" className="grid place-items-center">
|
||||||
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
<div className="w-[clamp(0px,100%,42rem)] grid place-items gap-8">
|
||||||
<h2 className="text-2xl text-center">{langui.details}</h2>
|
<h2 className="text-2xl text-center">{langui.details}</h2>
|
||||||
<div className="grid grid-flow-col w-full place-content-between">
|
<div className="grid grid-flow-col w-full place-content-between">
|
||||||
{item.metadata.length > 0 ? (
|
{item.metadata.length > 0 && (
|
||||||
<div className="grid place-items-center place-content-start">
|
<div className="grid place-items-center place-content-start">
|
||||||
<h3 className="text-xl">{langui.type}</h3>
|
<h3 className="text-xl">{langui.type}</h3>
|
||||||
<div className="grid grid-flow-col gap-1">
|
<div className="grid grid-flow-col gap-1">
|
||||||
|
|
@ -203,20 +187,16 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
<Chip>{prettyItemSubType(item.metadata[0])}</Chip>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.release_date ? (
|
{item.release_date && (
|
||||||
<div className="grid place-items-center place-content-start">
|
<div className="grid place-items-center place-content-start">
|
||||||
<h3 className="text-xl">{langui.release_date}</h3>
|
<h3 className="text-xl">{langui.release_date}</h3>
|
||||||
<p>{prettyDate(item.release_date)}</p>
|
<p>{prettyDate(item.release_date)}</p>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.price ? (
|
{item.price && (
|
||||||
<div className="grid place-items-center text-center place-content-start">
|
<div className="grid place-items-center text-center place-content-start">
|
||||||
<h3 className="text-xl">{langui.price}</h3>
|
<h3 className="text-xl">{langui.price}</h3>
|
||||||
<p>
|
<p>
|
||||||
|
|
@ -234,11 +214,23 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
</p>
|
</p>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
{item.size ? (
|
|
||||||
|
{item.categories.data.length > 0 && (
|
||||||
|
<div>
|
||||||
|
<h3 className="text-xl">{langui.categories}</h3>
|
||||||
|
<div className="flex flex-row flex-wrap place-items-center place-content-start gap-2">
|
||||||
|
{item.categories.data.map((category) => (
|
||||||
|
<Chip key={category.id}>
|
||||||
|
{category.attributes.short}
|
||||||
|
</Chip>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
)}
|
||||||
|
|
||||||
|
{item.size && (
|
||||||
<>
|
<>
|
||||||
<h3 className="text-xl">{langui.size}</h3>
|
<h3 className="text-xl">{langui.size}</h3>
|
||||||
<div className="grid grid-flow-col w-full place-content-between">
|
<div className="grid grid-flow-col w-full place-content-between">
|
||||||
|
|
@ -256,7 +248,7 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<p>{convertMmToInch(item.size.height)} in</p>
|
<p>{convertMmToInch(item.size.height)} in</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
{item.size.thickness ? (
|
{item.size.thickness && (
|
||||||
<div className="flex flex-row flex-wrap place-items-start gap-4">
|
<div className="flex flex-row flex-wrap place-items-start gap-4">
|
||||||
<p className="font-bold">{langui.thickness}:</p>
|
<p className="font-bold">{langui.thickness}:</p>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -264,84 +256,68 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
<p>{convertMmToInch(item.size.thickness)} in</p>
|
<p>{convertMmToInch(item.size.thickness)} in</p>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.metadata.length > 0 &&
|
{item.metadata.length > 0 &&
|
||||||
item.metadata[0].__typename !== "ComponentMetadataGroup" &&
|
item.metadata[0].__typename !== "ComponentMetadataGroup" &&
|
||||||
item.metadata[0].__typename !== "ComponentMetadataOther" ? (
|
item.metadata[0].__typename !== "ComponentMetadataOther" && (
|
||||||
<>
|
<>
|
||||||
<h3 className="text-xl">{langui.type_information}</h3>
|
<h3 className="text-xl">{langui.type_information}</h3>
|
||||||
<div className="grid grid-cols-2 w-full place-content-between">
|
<div className="grid grid-cols-2 w-full place-content-between">
|
||||||
{item.metadata[0].__typename === "ComponentMetadataBooks" ? (
|
{item.metadata[0].__typename ===
|
||||||
<>
|
"ComponentMetadataBooks" && (
|
||||||
<div className="flex flex-row place-content-start gap-4">
|
<>
|
||||||
<p className="font-bold">{langui.pages}:</p>
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p>{item.metadata[0].page_count}</p>
|
<p className="font-bold">{langui.pages}:</p>
|
||||||
</div>
|
<p>{item.metadata[0].page_count}</p>
|
||||||
|
</div>
|
||||||
|
|
||||||
<div className="flex flex-row place-content-start gap-4">
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
<p className="font-bold">{langui.binding}:</p>
|
<p className="font-bold">{langui.binding}:</p>
|
||||||
<p>
|
<p>
|
||||||
{item.metadata[0].binding_type ===
|
{item.metadata[0].binding_type ===
|
||||||
Enum_Componentmetadatabooks_Binding_Type.Paperback
|
Enum_Componentmetadatabooks_Binding_Type.Paperback
|
||||||
? langui.paperback
|
? langui.paperback
|
||||||
: item.metadata[0].binding_type ===
|
: item.metadata[0].binding_type ===
|
||||||
Enum_Componentmetadatabooks_Binding_Type.Hardcover
|
Enum_Componentmetadatabooks_Binding_Type.Hardcover
|
||||||
? langui.hardcover
|
? langui.hardcover
|
||||||
: ""}
|
: ""}
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-row place-content-start gap-4">
|
|
||||||
<p className="font-bold">{langui.page_order}:</p>
|
|
||||||
<p>
|
|
||||||
{item.metadata[0].page_order ===
|
|
||||||
Enum_Componentmetadatabooks_Page_Order.LeftToRight
|
|
||||||
? langui.left_to_right
|
|
||||||
: item.metadata[0].page_order ===
|
|
||||||
Enum_Componentmetadatabooks_Page_Order.RightToLeft
|
|
||||||
? langui.right_to_left
|
|
||||||
: ""}
|
|
||||||
</p>
|
|
||||||
</div>
|
|
||||||
|
|
||||||
<div className="flex flex-row place-content-start gap-4">
|
|
||||||
<p className="font-bold">{langui.languages}:</p>
|
|
||||||
{item.metadata[0].languages.data.map((lang) => (
|
|
||||||
<p key={lang.attributes.code}>
|
|
||||||
{lang.attributes.name}
|
|
||||||
</p>
|
</p>
|
||||||
))}
|
</div>
|
||||||
</div>
|
|
||||||
</>
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
) : item.metadata[0].__typename ===
|
<p className="font-bold">{langui.page_order}:</p>
|
||||||
"ComponentMetadataAudio" ? (
|
<p>
|
||||||
<></>
|
{item.metadata[0].page_order ===
|
||||||
) : item.metadata[0].__typename ===
|
Enum_Componentmetadatabooks_Page_Order.LeftToRight
|
||||||
"ComponentMetadataVideo" ? (
|
? langui.left_to_right
|
||||||
<></>
|
: item.metadata[0].page_order ===
|
||||||
) : item.metadata[0].__typename ===
|
Enum_Componentmetadatabooks_Page_Order.RightToLeft
|
||||||
"ComponentMetadataGame" ? (
|
? langui.right_to_left
|
||||||
<></>
|
: ""}
|
||||||
) : (
|
</p>
|
||||||
""
|
</div>
|
||||||
)}
|
|
||||||
</div>
|
<div className="flex flex-row place-content-start gap-4">
|
||||||
</>
|
<p className="font-bold">{langui.languages}:</p>
|
||||||
) : (
|
{item.metadata[0].languages.data.map((lang) => (
|
||||||
""
|
<p key={lang.attributes.code}>
|
||||||
)}
|
{lang.attributes.name}
|
||||||
|
</p>
|
||||||
|
))}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
|
</div>
|
||||||
|
</>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</InsetBox>
|
</InsetBox>
|
||||||
|
|
||||||
{item.subitems.data.length > 0 ? (
|
{item.subitems.data.length > 0 && (
|
||||||
<div
|
<div
|
||||||
id={isVariantSet ? "variants" : "subitems"}
|
id={isVariantSet ? "variants" : "subitems"}
|
||||||
className="grid place-items-center gap-8 w-full"
|
className="grid place-items-center gap-8 w-full"
|
||||||
|
|
@ -358,11 +334,9 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
|
|
||||||
{item.contents.data.length > 0 ? (
|
{item.contents.data.length > 0 && (
|
||||||
<div id="contents" className="w-full grid place-items-center gap-8">
|
<div id="contents" className="w-full grid place-items-center gap-8">
|
||||||
<h2 className="text-2xl">{langui.contents}</h2>
|
<h2 className="text-2xl">{langui.contents}</h2>
|
||||||
<div className="grid gap-4 w-full">
|
<div className="grid gap-4 w-full">
|
||||||
|
|
@ -376,8 +350,6 @@ export default function LibrarySlug(props: LibrarySlugProps): JSX.Element {
|
||||||
))}
|
))}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
) : (
|
|
||||||
""
|
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
</ContentPanel>
|
</ContentPanel>
|
||||||
|
|
|
||||||
|
|
@ -56,7 +56,7 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setSortedItem(sortBy(sortingMethod, filteredItems, currencies));
|
setSortedItem(sortBy(sortingMethod, filteredItems, currencies));
|
||||||
}, [filteredItems, sortingMethod]);
|
}, [currencies, filteredItems, sortingMethod]);
|
||||||
|
|
||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
setGroups(getGroups(langui, groupingMethod, sortedItems));
|
setGroups(getGroups(langui, groupingMethod, sortedItems));
|
||||||
|
|
@ -113,9 +113,16 @@ export default function Library(props: LibraryProps): JSX.Element {
|
||||||
<>
|
<>
|
||||||
{items.length > 0 && (
|
{items.length > 0 && (
|
||||||
<>
|
<>
|
||||||
<h2 className="text-2xl pb-2 pt-10 first-of-type:pt-0">{name}</h2>
|
{name && (
|
||||||
|
<h2
|
||||||
|
key={"h2" + name}
|
||||||
|
className="text-2xl pb-2 pt-10 first-of-type:pt-0"
|
||||||
|
>
|
||||||
|
{name}
|
||||||
|
</h2>
|
||||||
|
)}
|
||||||
<div
|
<div
|
||||||
key={name}
|
key={"items" + name}
|
||||||
className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
className="grid gap-8 items-end mobile:grid-cols-2 desktop:grid-cols-[repeat(auto-fill,_minmax(13rem,1fr))] pb-12 border-b-[3px] border-dotted last-of-type:border-0"
|
||||||
>
|
>
|
||||||
{items.map((item) => (
|
{items.map((item) => (
|
||||||
|
|
@ -163,7 +170,37 @@ function getGroups(
|
||||||
): GroupLibraryItems {
|
): GroupLibraryItems {
|
||||||
switch (groupByType) {
|
switch (groupByType) {
|
||||||
case 0:
|
case 0:
|
||||||
return new Map();
|
const typeGroup = new Map();
|
||||||
|
typeGroup.set("Drakengard 1", []);
|
||||||
|
typeGroup.set("Drakengard 1.3", []);
|
||||||
|
typeGroup.set("Drakengard 2", []);
|
||||||
|
typeGroup.set("Drakengard 3", []);
|
||||||
|
typeGroup.set("Drakengard 4", []);
|
||||||
|
typeGroup.set("NieR Gestalt", []);
|
||||||
|
typeGroup.set("NieR Replicant", []);
|
||||||
|
typeGroup.set("NieR Replicant ver.1.22474487139...", []);
|
||||||
|
typeGroup.set("NieR:Automata", []);
|
||||||
|
typeGroup.set("NieR Re[in]carnation", []);
|
||||||
|
typeGroup.set("SINoALICE", []);
|
||||||
|
typeGroup.set("Voice of Cards", []);
|
||||||
|
typeGroup.set("Final Fantasy XIV", []);
|
||||||
|
typeGroup.set("Thou Shalt Not Die", []);
|
||||||
|
typeGroup.set("Bakuken", []);
|
||||||
|
typeGroup.set("YoRHa", []);
|
||||||
|
typeGroup.set("YoRHa Boys", []);
|
||||||
|
typeGroup.set("No category", []);
|
||||||
|
|
||||||
|
items.map((item) => {
|
||||||
|
if (item.attributes.categories.data.length === 0) {
|
||||||
|
typeGroup.get("No category")?.push(item);
|
||||||
|
} else {
|
||||||
|
item.attributes.categories.data.map((category) => {
|
||||||
|
typeGroup.get(category.attributes.name)?.push(item);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
return typeGroup;
|
||||||
|
|
||||||
case 1:
|
case 1:
|
||||||
const groupType: GroupLibraryItems = new Map();
|
const groupType: GroupLibraryItems = new Map();
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue