mirror of
https://github.com/zoriya/Kyoo.git
synced 2026-02-14 15:32:13 -05:00
Setup icons & navbar
This commit is contained in:
Zoe Roux
parent
e3dc2bd531
commit
ef8d4a9281
@ -1,4 +1,4 @@
|
||||
# <img width="24px" src="./icons/icon-256x256.png" alt=""> Kyoo
|
||||
# <img width="24px" src="./front/public/icon-256x256.png" alt=""> Kyoo
|
||||
|
||||
Kyoo is a self-hosted media server focused on video content (Movies, Series & Anime). It is an alternative to Jellyfin or Plex.
|
||||
|
||||
|
||||
@ -12,7 +12,7 @@ export const expo: ExpoConfig = {
|
||||
newArchEnabled: true,
|
||||
platforms: ["web", "ios", "android"],
|
||||
orientation: "default",
|
||||
icon: "./public/icon-256x256.png",
|
||||
icon: "./public/favicon-96x96-dark.png",
|
||||
userInterfaceStyle: "automatic",
|
||||
ios: {
|
||||
supportsTablet: true,
|
||||
@ -20,15 +20,15 @@ export const expo: ExpoConfig = {
|
||||
android: {
|
||||
package: IS_DEV ? "dev.zoriya.kyoo.dev" : "dev.zoriya.kyoo",
|
||||
adaptiveIcon: {
|
||||
foregroundImage: "./public/icon-256x256.png",
|
||||
backgroundColor: "#eff1f5",
|
||||
foregroundImage: "./public/android-adaptive-icon.png",
|
||||
backgroundColor: "#6b00b8",
|
||||
},
|
||||
edgeToEdgeEnabled: true,
|
||||
},
|
||||
web: {
|
||||
favicon: "./public/icon-256x256.png",
|
||||
output: "single",
|
||||
bundler: "metro",
|
||||
favicon: "./public/icon.svg",
|
||||
output: "single",
|
||||
},
|
||||
updates: {
|
||||
url: "https://u.expo.dev/55de6b52-c649-4a15-9a45-569ff5ed036c",
|
||||
@ -56,14 +56,9 @@ export const expo: ExpoConfig = {
|
||||
[
|
||||
"expo-splash-screen",
|
||||
{
|
||||
image: "./public/icon-256x256.png",
|
||||
image: "./public/splash-screen.png",
|
||||
resizeMode: "contain",
|
||||
backgroundColor: "#eff1f5",
|
||||
dark: {
|
||||
image: "./public/icon-256x256.png",
|
||||
resizeMode: "contain",
|
||||
backgroundColor: "#1e1e2e",
|
||||
},
|
||||
backgroundColor: "#6b00b8",
|
||||
},
|
||||
],
|
||||
[
|
||||
|
||||
BIN
front/public/android-adaptive-icon.png
Normal file
BIN
front/public/android-adaptive-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
front/public/apple-touch-icon.png
Normal file
BIN
front/public/apple-touch-icon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 6.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
BIN
front/public/favicon-96x96-dark.png
Normal file
BIN
front/public/favicon-96x96-dark.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.2 KiB |
BIN
front/public/favicon-96x96.png
Normal file
BIN
front/public/favicon-96x96.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 4.3 KiB |
BIN
front/public/favicon-dark.ico
Normal file
BIN
front/public/favicon-dark.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
BIN
front/public/favicon.ico
Normal file
BIN
front/public/favicon.ico
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 15 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 597 B |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
4
front/public/icon-long.svg
Normal file
4
front/public/icon-long.svg
Normal file
@ -0,0 +1,4 @@
|
||||
<svg viewBox="149.28 236.8 531.15 149">
|
||||
<path fill="#f0f2f5" d="M341.3 328c-3.5-4.2-6.8-7.1-9.7-8.8-3-1.6-6.4-2.5-10.5-2.8v30.9h-23.4V236.8h23.4v59c3.8-.1 7-.9 9.7-2.3s5.6-4 8.9-7.8c3.2-3.8 7.7-9.8 13.4-18.1h27.7c-6.3 9.8-11.5 17-15.6 21.8-4.1 4.7-8 8.1-11.7 10s-8.3 3.1-13.7 3.6v6.8c5.7.4 10.6 1.7 14.6 3.9 4.1 2.2 8.2 5.8 12.5 10.9s9.6 12.6 16.1 22.7h-28c-5.6-8.7-10.2-15.2-13.7-19.4Zm65.1 50.4q-9.9-7.5-12-21.9h22c1.9 6.8 7.1 10.3 15.7 10.3s10.7-1.8 13.7-5.3q4.5-5.25 4.5-16.2v-12l-5.4-1.3c-5.1 10.7-13.2 16.1-24.5 16.1s-15.7-3-20.8-9.1c-5.1-6-7.7-14.3-7.7-24.7v-46.7h23.4v42.6c0 6.1 1.5 10.8 4.4 14 3 3.3 7.1 4.9 12.4 4.9s9.6-1.7 12.7-5.1 4.6-8.2 4.6-14.3v-42.1h23.4v77.3c0 13.4-3.4 23.5-10.1 30.5-6.8 6.9-16.7 10.4-29.8 10.4s-19.9-2.5-26.5-7.5ZM506.9 344q-10.5-5.4-16.5-15c-4-6.4-5.9-13.5-5.9-21.4s2-15 5.9-21.4c4-6.4 9.4-11.4 16.5-15q10.5-5.4 23.7-5.4c13.2 0 16.7 1.8 23.7 5.4q10.5 5.4 16.5 15c4 6.4 5.9 13.5 5.9 21.4s-2 15-5.9 21.4c-4 6.4-9.4 11.4-16.5 15q-10.5 5.4-23.7 5.4c-13.2 0-16.7-1.8-23.7-5.4m40.1-20.5q6.3-6 6.3-15.9c0-9.9-2.1-12-6.3-16s-9.7-6.1-16.5-6.1-12.4 2-16.6 6.1-6.3 9.4-6.3 16 2.1 11.8 6.3 15.9 9.8 6.1 16.6 6.1 12.2-2 16.5-6.1m63.6 20.5q-10.5-5.4-16.5-15c-4-6.4-5.9-13.5-5.9-21.4s2-15 5.9-21.4c4-6.4 9.4-11.4 16.5-15q10.5-5.4 23.7-5.4c13.2 0 16.7 1.8 23.7 5.4q10.5 5.4 16.5 15c4 6.4 5.9 13.5 5.9 21.4s-2 15-5.9 21.4c-4 6.4-9.4 11.4-16.5 15q-10.5 5.4-23.7 5.4c-13.2 0-16.7-1.8-23.7-5.4m40.1-20.5q6.3-6 6.3-15.9c0-9.9-2.1-12-6.3-16s-9.7-6.1-16.5-6.1-12.4 2-16.6 6.1-6.3 9.4-6.3 16 2.1 11.8 6.3 15.9 9.8 6.1 16.6 6.1 12.2-2 16.5-6.1m-411.4-16.4c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5-7.5-17.7-17-18.4h-3.2c-9.5.8-17 8.7-17 18.4Zm-90-13c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5 8.3-18.5 18.5-18.5h.3c10-.2 18-8.2 18.2-18.2v-.7c-.2-10.1-8.4-18.2-18.5-18.2-10.2 0-18.5 8.3-18.5 18.5 0 1 0 1.9-.2 2.8 0 .3 0 .5-.1.8-.1.7-.3 1.3-.5 1.9s-.4 1.1-.6 1.6-.5 1-.7 1.5c-.1.2-.3.5-.4.7-.2.3-.3.5-.5.8-.1.2-.2.3-.3.5-.4.6-.8 1.1-1.3 1.6-.1.2-.3.3-.4.4l-1.1 1.1c-.2.1-.3.3-.5.4-.2.2-.4.4-.7.5-.7.5-1.4 1-2.2 1.4-.2.1-.5.3-.7.4s-.4.2-.7.3-.6.3-1 .4c-.2 0-.4.2-.6.2-.4.1-.8.2-1.2.4-.2 0-.4 0-.5.1h-.3c-.3 0-.5.1-.8.2-.3 0-.6 0-.9.1H168c-10.2 0-18.5 8.3-18.5 18.5Zm52.9 50.1c0 10.2 8.3 18.5 18.5 18.5 10.1 0 18.4-8.1 18.5-18.2v-2.4c0-.3 0-.6-.1-.9 0-.3-.1-.6-.2-.9v-.2c0-.2 0-.4-.1-.6 0-.4-.2-.7-.3-1.1 0-.2-.2-.5-.2-.7-.1-.3-.2-.5-.3-.8-.2-.5-.5-1.1-.8-1.6-.1-.2-.3-.5-.4-.7s-.3-.4-.4-.6c-.7-1.1-1.6-2-2.5-2.9l-.4-.4c-.5-.5-1-.9-1.6-1.3-.2-.1-.3-.2-.5-.3-1.5-1-3.1-1.7-4.8-2.3-.3 0-.6-.2-.9-.2-.4 0-.7-.2-1.1-.2-.3 0-.5 0-.8-.1-.9-.1-1.8-.2-2.8-.2-10.2 0-18.5 8.3-18.5 18.5Z" />
|
||||
<path fill="#f0f2f5" d="M157 337.7c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5 8.3-18.5 18.5-18.5c10.1 0 18.4-8.1 18.5-18.2v-.3c0-9.7 7.5-17.7 17-18.4h3.9c8-1 14.4-7.1 15.9-14.9 0-.2 0-.5.1-.7v-3.8c-.5-9.8-8.6-17.6-18.5-17.6s-18 7.8-18.5 17.6v1.1c-.2 10-8.2 18-18.2 18.2h-.3c-10.2 0-18.5 8.3-18.5 18.5s-8.3 18.5-18.5 18.5-18.5 8.3-18.5 18.5Z" />
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.9 KiB |
@ -1,27 +1,11 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="34pt" height="34pt"
|
||||
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128; padding: 2pt;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#121327;stroke:#010202;stroke-width:5;stroke-miterlimit:10;}
|
||||
.st1{fill:#E13E13;}
|
||||
</style>
|
||||
<polygon class="st0" points="121.39,62.34 6.5,8.58 6.5,116.09 "/>
|
||||
<g>
|
||||
<path class="st1" d="M63.09,25.59c-4.59,8.24-9.01,17.92-13.23,29.04c-3.65,9.52-6.53,18.78-8.64,27.78
|
||||
c-1.42,6.05-2.06,9.83-1.91,11.32c0.22,0.58,0.33,1.11,0.33,1.59c0,0.77-0.31,1.15-0.93,1.15c-0.77,0-2.01-0.66-3.72-1.97
|
||||
c-1.9-1.42-2.84-2.59-2.84-3.5c0-0.58,0.16-1.44,0.49-2.57c2.99-10.54,6.71-21.69,11.16-33.47c2.92-7.29,6.09-15.24,9.52-23.84
|
||||
c-10.43,2.55-17.88,5.61-22.37,9.19c-1.64,1.28-2.46,2.5-2.46,3.66c0,0.8,0.36,2.94,1.09,6.4c0.25,1.13-0.15,1.7-1.2,1.7
|
||||
c-0.73,0-1.29-0.35-1.7-1.04c-1.24-1.97-2.52-4.83-3.83-8.59c-0.26-0.84-0.38-1.6-0.38-2.3c0-2.73,2.11-4.96,6.34-6.67
|
||||
c1.49-0.62,9.04-3.17,22.64-7.66c3.21-1.06,5.4-2.31,6.56-3.77c0.84-1.02,1.57-1.53,2.19-1.53c0.58,0,1.31,0.33,2.19,0.98
|
||||
c1.02,0.73,1.53,1.35,1.53,1.86C63.91,23.83,63.63,24.57,63.09,25.59z M95.3,21.22c0.73,0.73,1.09,1.33,1.09,1.8
|
||||
c0,0.58-0.77,1.82-2.3,3.72c-4.01,4.96-9.92,11.28-17.72,18.98c-7.47,7.36-12.54,11.94-15.2,13.73c3.32,4.7,6.63,9.42,9.95,14.16
|
||||
c5.07,7.15,9.44,11.94,13.13,14.38c1.6,1.09,3.04,1.64,4.32,1.64c1.28,0,2.77-0.62,4.48-1.86c0.36-0.25,0.71-0.38,1.04-0.38
|
||||
c0.77,0,1.15,0.38,1.15,1.15c0,0.44-0.16,0.89-0.49,1.37c-1.09,1.71-3.48,4.21-7.16,7.49c-0.84,0.77-1.66,1.15-2.46,1.15
|
||||
c-0.95,0-2.02-0.49-3.23-1.48c-4.48-3.57-9.52-9.28-15.09-17.12c-5.83-8.2-9.88-13.29-12.14-15.26c-1.17,0.47-2.1,0.71-2.79,0.71
|
||||
c-1.28,0-1.99-0.95-2.13-2.84c-0.04-0.58-0.05-1.08-0.05-1.48c0-1.53,0.41-2.65,1.23-3.36s2.49-1.34,5-1.89
|
||||
c0.91-0.18,1.6,0.05,2.08,0.71c4.3-3.32,9.17-7.78,14.6-13.4c5.36-5.5,8.6-9.37,9.73-11.59c-2.3-1.35-3.45-2.46-3.45-3.34
|
||||
c0-0.69,0.66-1.18,1.97-1.48c1.82-1.28,3.99-3.34,6.51-6.18c1.06-1.2,2.19-1.8,3.39-1.8C92.14,18.76,93.66,19.58,95.3,21.22z"/>
|
||||
</g>
|
||||
<svg viewBox="284.57 156.08 296.15 289.35">
|
||||
<style>
|
||||
.primary { fill: #1f1e2f; }
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.primary { fill: #f0f2f5; }
|
||||
}
|
||||
</style>
|
||||
<path class="primary" d="M494.3 315.9c0 23.8 19.3 43.2 43.2 43.2 23.8 0 43.2-19.3 43.2-43.2 0-22.6-17.4-41.2-39.5-43-1.2-.1-2.4-.2-3.6-.2s-2.4 0-3.6.2c-22.1 1.8-39.5 20.4-39.5 43Zm-209.7-30.4c0 23.8 19.3 43.2 43.2 43.2 23.8 0 43.2-19.3 43.2-43.2 0-23.8 19.3-43.2 43.2-43.2h.7c23.3-.4 42-19.2 42.4-42.4v-1.4c-.4-23.5-19.6-42.4-43.2-42.4-23.8 0-43.2 19.3-43.2 43.2 0 2.2-.2 4.4-.5 6.5 0 .6-.2 1.2-.3 1.8-.3 1.5-.7 3.1-1.1 4.5-.4 1.3-.9 2.6-1.4 3.8v.2c-.5 1.2-1.1 2.4-1.7 3.6-.3.6-.6 1.1-.9 1.7-.4.6-.8 1.2-1.2 1.9-.3.4-.5.8-.8 1.1-.9 1.3-1.9 2.6-3 3.7-.3.4-.6.7-1 1-.8.9-1.7 1.7-2.6 2.5-.4.3-.8.7-1.1 1-.5.4-1 .8-1.6 1.2-1.6 1.2-3.3 2.3-5 3.3-.6.3-1.1.6-1.7.9-.5.3-1 .5-1.6.7-.7.3-1.5.6-2.3.9-.5.2-1 .4-1.5.5-.9.3-1.8.6-2.7.8-.4.1-.8.2-1.3.3-.2 0-.5.1-.8.2-.6.1-1.3.3-1.9.4l-2.1.3c-.6 0-1.3.1-1.9.2h-3.1c-23.8 0-43.2 19.3-43.2 43.2m123.3 116.7c0 23.8 19.3 43.2 43.2 43.2 23.6 0 42.8-18.9 43.2-42.4v-3.8c0-.7-.1-1.3-.2-2 0-.7-.2-1.4-.3-2.1s-.2-1.3-.4-2c0-.2 0-.4-.1-.5-.1-.5-.2-1-.3-1.4-.2-.9-.5-1.7-.8-2.6-.2-.5-.4-1.1-.6-1.6-.2-.6-.5-1.3-.8-1.9-.5-1.3-1.2-2.5-1.8-3.7-.3-.6-.7-1.2-1-1.7 0 0 0-.1-.1-.2-.3-.5-.6-1-1-1.5-1.7-2.5-3.7-4.8-5.8-6.8-.3-.3-.7-.6-1-1-1.2-1.1-2.4-2.1-3.8-3-.4-.3-.7-.5-1.1-.8-3.4-2.3-7.1-4.1-11.1-5.3-.7-.2-1.3-.4-2-.6-.8-.2-1.6-.4-2.5-.6l-1.8-.3c-2.1-.3-4.3-.5-6.5-.5-23.8 0-43.2 19.3-43.2 43.2Z"/>
|
||||
<path class="primary" d="M302.6 387.1c0 23.8 19.3 43.1 43.2 43.2 23.8 0 43.2-19.3 43.2-43.2 0-23.8 19.3-43.2 43.2-43.2 23.6 0 42.8-18.9 43.2-42.4v-.7c0-22.6 17.4-41.2 39.5-43 1.2.1 2.4.2 3.6.2s2.4 0 3.6-.2c.6 0 1.2-.1 1.7-.2 18.6-2.3 33.5-16.5 37-34.7.1-.6.2-1.1.3-1.7 0-.5.2-1.1.2-1.6 0-.4.1-.9.1-1.3 0-.5 0-1 .1-1.6v-4.1c-1.2-22.8-20-40.9-43.1-40.9s-41.9 18.1-43.1 40.9v2.6c-.4 23.3-19.2 42-42.4 42.4h-.7c-23.8 0-43.2 19.3-43.2 43.2 0 23.8-19.3 43.2-43.2 43.2-23.8 0-43.2 19.3-43.2 43.2Z"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 2.2 KiB After Width: | Height: | Size: 1.9 KiB |
21
front/public/site.webmanifest
Normal file
21
front/public/site.webmanifest
Normal file
@ -0,0 +1,21 @@
|
||||
{
|
||||
"name": "Kyoo",
|
||||
"short_name": "Kyoo",
|
||||
"icons": [
|
||||
{
|
||||
"src": "/web-app-manifest-192x192.png",
|
||||
"sizes": "192x192",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
},
|
||||
{
|
||||
"src": "/web-app-manifest-512x512.png",
|
||||
"sizes": "512x512",
|
||||
"type": "image/png",
|
||||
"purpose": "maskable"
|
||||
}
|
||||
],
|
||||
"theme_color": "#6b00b8",
|
||||
"background_color": "#6b00b8",
|
||||
"display": "standalone"
|
||||
}
|
||||
BIN
front/public/splash-screen.png
Normal file
BIN
front/public/splash-screen.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 16 KiB |
BIN
front/public/web-app-manifest-192x192.png
Normal file
BIN
front/public/web-app-manifest-192x192.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 7.0 KiB |
BIN
front/public/web-app-manifest-512x512.png
Normal file
BIN
front/public/web-app-manifest-512x512.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 25 KiB |
@ -1,13 +1,13 @@
|
||||
import { getFocusedRouteNameFromRoute } from "@react-navigation/native";
|
||||
import { Stack } from "expo-router";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import { useTheme } from "yoshiki/native";
|
||||
import { useCSSVariable } from "uniwind";
|
||||
import { ErrorConsumer } from "~/providers/error-consumer";
|
||||
import { NavbarRight, NavbarTitle } from "~/ui/navbar";
|
||||
|
||||
export default function Layout() {
|
||||
const insets = useSafeAreaInsets();
|
||||
const theme = useTheme();
|
||||
const accent = useCSSVariable("--color-accent");
|
||||
|
||||
return (
|
||||
<ErrorConsumer scope="app">
|
||||
@ -20,7 +20,7 @@ export default function Layout() {
|
||||
paddingRight: insets.right,
|
||||
},
|
||||
headerStyle: {
|
||||
backgroundColor: theme.accent,
|
||||
backgroundColor: accent as string,
|
||||
},
|
||||
}}
|
||||
>
|
||||
|
||||
@ -18,36 +18,38 @@ export default function Root({ children }: PropsWithChildren) {
|
||||
/>
|
||||
<meta httpEquiv="X-UA-Compatible" content="IE=edge" />
|
||||
|
||||
<link rel="icon" type="image/svg+xml" href="/icon.svg" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="16x16"
|
||||
href="/icon-16x16.png"
|
||||
rel="shortcut icon"
|
||||
href="/favicon.ico"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="32x32"
|
||||
href="/icon-32x32.png"
|
||||
href="/favicon-96x96.png"
|
||||
sizes="96x96"
|
||||
media="(prefers-color-scheme: light)"
|
||||
/>
|
||||
<link
|
||||
rel="shortcut icon"
|
||||
href="/favicon-dark.ico"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="64x64"
|
||||
href="/icon-64x64.png"
|
||||
href="/favicon-96x96-dark.png"
|
||||
sizes="96x96"
|
||||
media="(prefers-color-scheme: dark)"
|
||||
/>
|
||||
<meta name="apple-mobile-web-app-title" content="Kyoo" />
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="128x128"
|
||||
href="/icon-128x128.png"
|
||||
/>
|
||||
<link
|
||||
rel="icon"
|
||||
type="image/png"
|
||||
sizes="256x256"
|
||||
href="/icon-256x256.png"
|
||||
rel="apple-touch-icon"
|
||||
sizes="180x180"
|
||||
href="/apple-touch-icon.png"
|
||||
/>
|
||||
<link rel="manifest" href="/site.webmanifest" />
|
||||
|
||||
<ScrollViewStyleReset />
|
||||
</head>
|
||||
|
||||
@ -6,21 +6,7 @@ import "../global.css";
|
||||
import { Tooltip } from "~/primitives";
|
||||
import "~/fonts.web.css";
|
||||
|
||||
const GlobalCssTheme = () => {
|
||||
// background-color: ${theme.background};
|
||||
return (
|
||||
<>
|
||||
{/* <SkeletonCss /> */}
|
||||
{/* <TouchOnlyCss /> */}
|
||||
{/* <HiddenIfNoJs /> */}
|
||||
</>
|
||||
);
|
||||
};
|
||||
|
||||
export default function Layout() {
|
||||
// const registry = createStyleRegistry();
|
||||
// useServerHeadInsertion(() => registry.flushToComponent());
|
||||
|
||||
return (
|
||||
<Providers>
|
||||
<Slot />
|
||||
|
||||
@ -7,6 +7,9 @@
|
||||
--color-card: #e3e4e5;
|
||||
--color-popover: #c6c6c6;
|
||||
|
||||
--color-light: #f0f2f5;
|
||||
--color-dark: #1f1f2e;
|
||||
|
||||
--font-sans: "Poppins";
|
||||
--font-headers: "Sora";
|
||||
}
|
||||
|
||||
@ -1,8 +1,6 @@
|
||||
import AccountCircle from "@material-symbols/svg-400/rounded/account_circle-fill.svg";
|
||||
import { type ComponentType, forwardRef, type RefAttributes } from "react";
|
||||
import { Image, type ImageProps, View, type ViewStyle } from "react-native";
|
||||
import { px, type Stylable, useYoshiki } from "yoshiki/native";
|
||||
import { Icon } from "./icons";
|
||||
import type { ComponentType } from "react";
|
||||
import { Image, View, type ViewProps, type ViewStyle } from "react-native";
|
||||
import { cn } from "~/utils";
|
||||
import { Skeleton } from "./skeleton";
|
||||
import { P } from "./text";
|
||||
|
||||
@ -21,91 +19,50 @@ const stringToColor = (string: string) => {
|
||||
return color;
|
||||
};
|
||||
|
||||
const AvatarC = forwardRef<
|
||||
View,
|
||||
{
|
||||
src?: string;
|
||||
alt?: string;
|
||||
size?: number;
|
||||
placeholder?: string;
|
||||
color?: string;
|
||||
fill?: boolean;
|
||||
as?: ComponentType<{ style?: ViewStyle } & RefAttributes<View>>;
|
||||
} & Stylable
|
||||
>(function AvatarI(
|
||||
{ src, alt, size = px(24), color, placeholder, fill = false, as, ...props },
|
||||
ref,
|
||||
) {
|
||||
const { css, theme } = useYoshiki();
|
||||
const col = color ?? theme.overlay0;
|
||||
|
||||
// TODO: Support dark themes when fill === true
|
||||
export const Avatar = <AsProps = ViewProps>({
|
||||
src,
|
||||
alt,
|
||||
placeholder,
|
||||
className,
|
||||
style,
|
||||
as,
|
||||
...props
|
||||
}: {
|
||||
src?: string;
|
||||
alt?: string;
|
||||
placeholder?: string;
|
||||
className?: string;
|
||||
style?: ViewStyle;
|
||||
as?: ComponentType<AsProps>;
|
||||
} & AsProps) => {
|
||||
const Container = as ?? View;
|
||||
return (
|
||||
<Container
|
||||
ref={ref}
|
||||
{...css(
|
||||
[
|
||||
{
|
||||
borderRadius: 999999,
|
||||
overflow: "hidden",
|
||||
height: size,
|
||||
width: size,
|
||||
},
|
||||
fill && {
|
||||
bg: col,
|
||||
},
|
||||
placeholder && {
|
||||
bg: stringToColor(placeholder),
|
||||
},
|
||||
],
|
||||
props,
|
||||
)}
|
||||
className={cn("h-6 w-6 overflow-hidden rounded-full", className)}
|
||||
style={
|
||||
placeholder
|
||||
? { backgroundColor: stringToColor(placeholder), ...style }
|
||||
: style
|
||||
}
|
||||
{...(props as AsProps)}
|
||||
>
|
||||
{placeholder ? (
|
||||
<P
|
||||
{...css({
|
||||
marginVertical: 0,
|
||||
lineHeight: size,
|
||||
textAlign: "center",
|
||||
})}
|
||||
>
|
||||
{placeholder && (
|
||||
<P className="text-center text-slate-200 dark:text-slate-200">
|
||||
{placeholder[0]}
|
||||
</P>
|
||||
) : (
|
||||
<Icon
|
||||
icon={AccountCircle}
|
||||
size={size}
|
||||
color={fill ? col : theme.colors.white}
|
||||
/>
|
||||
)}
|
||||
<Image
|
||||
resizeMode="cover"
|
||||
source={{ uri: src, width: size, height: size }}
|
||||
source={{ uri: src }}
|
||||
alt={alt}
|
||||
width={size}
|
||||
height={size}
|
||||
{...(css({ position: "absolute" }) as ImageProps)}
|
||||
className="absolute inset-0"
|
||||
/>
|
||||
</Container>
|
||||
);
|
||||
});
|
||||
|
||||
const AvatarLoader = ({ size = px(24), ...props }: { size?: number }) => {
|
||||
const { css } = useYoshiki();
|
||||
|
||||
return (
|
||||
<Skeleton
|
||||
variant="round"
|
||||
{...css(
|
||||
{
|
||||
height: size,
|
||||
width: size,
|
||||
},
|
||||
props,
|
||||
)}
|
||||
/>
|
||||
);
|
||||
};
|
||||
|
||||
export const Avatar = Object.assign(AvatarC, { Loader: AvatarLoader });
|
||||
Avatar.Loader = ({ className, ...props }: { className?: string }) => {
|
||||
return (
|
||||
<Skeleton variant="round" className={cn("h-6 w-6", className)} {...props} />
|
||||
);
|
||||
};
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
import { type ComponentProps, type ComponentType, useState } from "react";
|
||||
import { Animated, type PressableProps } from "react-native";
|
||||
import type { SvgProps } from "react-native-svg";
|
||||
import RSvg, { type SvgProps } from "react-native-svg";
|
||||
import { withUniwind } from "uniwind";
|
||||
import { cn } from "~/utils";
|
||||
import { PressableFeedback } from "./links";
|
||||
@ -31,6 +31,25 @@ const BaseIcon = withUniwind(IconWrapper, {
|
||||
},
|
||||
});
|
||||
|
||||
export const Svg = withUniwind(RSvg, {
|
||||
stroke: {
|
||||
fromClassName: "className",
|
||||
styleProperty: "accentColor",
|
||||
},
|
||||
fill: {
|
||||
fromClassName: "className",
|
||||
styleProperty: "fill",
|
||||
},
|
||||
width: {
|
||||
fromClassName: "className",
|
||||
styleProperty: "width",
|
||||
},
|
||||
height: {
|
||||
fromClassName: "className",
|
||||
styleProperty: "height",
|
||||
},
|
||||
});
|
||||
|
||||
export const Icon = ({
|
||||
className,
|
||||
...props
|
||||
|
||||
@ -1,67 +1,33 @@
|
||||
import { type ReactNode, type Ref, useState } from "react";
|
||||
import {
|
||||
TextInput,
|
||||
type TextInputProps,
|
||||
View,
|
||||
type ViewStyle,
|
||||
} from "react-native";
|
||||
import { px, type Theme, useYoshiki } from "yoshiki/native";
|
||||
import type { YoshikiEnhanced } from "./image";
|
||||
import { focusReset, ts } from "./utils";
|
||||
import type { ReactNode, Ref } from "react";
|
||||
import { TextInput, type TextInputProps, View } from "react-native";
|
||||
import { cn } from "~/utils";
|
||||
|
||||
export const Input = ({
|
||||
placeholderTextColor,
|
||||
variant = "small",
|
||||
right,
|
||||
containerStyle,
|
||||
containerClassName,
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: {
|
||||
variant?: "small" | "big";
|
||||
right?: ReactNode;
|
||||
containerStyle?: YoshikiEnhanced<ViewStyle>;
|
||||
containerClassName?: string;
|
||||
ref?: Ref<TextInput>;
|
||||
} & TextInputProps) => {
|
||||
const [focused, setFocused] = useState(false);
|
||||
const { css, theme } = useYoshiki();
|
||||
|
||||
return (
|
||||
<View
|
||||
{...css([
|
||||
{
|
||||
borderColor: (theme) => theme.accent,
|
||||
borderRadius: ts(1),
|
||||
borderWidth: px(1),
|
||||
borderStyle: "solid",
|
||||
padding: ts(0.5),
|
||||
flexDirection: "row",
|
||||
alignContent: "center",
|
||||
alignItems: "center",
|
||||
},
|
||||
variant === "big" && {
|
||||
borderRadius: ts(4),
|
||||
p: ts(1),
|
||||
},
|
||||
focused && {
|
||||
borderWidth: px(2),
|
||||
},
|
||||
containerStyle,
|
||||
])}
|
||||
className={cn(
|
||||
"shrink flex-row content-center items-center rounded-xl border border-accent p-1",
|
||||
"focus-within:border-2",
|
||||
containerClassName,
|
||||
)}
|
||||
>
|
||||
<TextInput
|
||||
ref={ref}
|
||||
placeholderTextColor={placeholderTextColor ?? theme.paragraph}
|
||||
onFocus={() => setFocused(true)}
|
||||
onBlur={() => setFocused(false)}
|
||||
{...css(
|
||||
{
|
||||
flexGrow: 1,
|
||||
color: (theme: Theme) => theme.paragraph,
|
||||
borderWidth: 0,
|
||||
...focusReset,
|
||||
},
|
||||
props,
|
||||
className={cn(
|
||||
"flex-1 font-sans text-base text-slate-600 outline-0 dark:text-slate-400",
|
||||
className,
|
||||
)}
|
||||
{...props}
|
||||
/>
|
||||
{right}
|
||||
</View>
|
||||
|
||||
@ -1,35 +1,35 @@
|
||||
import {
|
||||
H1 as EH1,
|
||||
H2 as EH2,
|
||||
H3 as EH3,
|
||||
H4 as EH4,
|
||||
H5 as EH5,
|
||||
H6 as EH6,
|
||||
P as EP,
|
||||
} from "@expo/html-elements";
|
||||
import ExpandMore from "@material-symbols/svg-400/rounded/keyboard_arrow_down-fill.svg";
|
||||
import ExpandLess from "@material-symbols/svg-400/rounded/keyboard_arrow_up-fill.svg";
|
||||
import {
|
||||
type ComponentProps,
|
||||
type ComponentType,
|
||||
type Ref,
|
||||
useLayoutEffect,
|
||||
useRef,
|
||||
useState,
|
||||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { Platform, Text, View, type ViewProps } from "react-native";
|
||||
import {
|
||||
Platform,
|
||||
Text,
|
||||
type TextProps,
|
||||
View,
|
||||
type ViewProps,
|
||||
} from "react-native";
|
||||
import { cn } from "~/utils";
|
||||
import { IconButton } from "./icons";
|
||||
import { tooltip } from "./tooltip";
|
||||
|
||||
const styleText = (
|
||||
Component: ComponentType<ComponentProps<typeof EP>>,
|
||||
type?: "header" | "sub",
|
||||
custom?: string,
|
||||
type: "header" | "sub" | null,
|
||||
{ className: custom, ...customProps }: TextProps,
|
||||
) => {
|
||||
const Text = ({ className, style, ...props }: ComponentProps<typeof EP>) => {
|
||||
const Wrapped = ({
|
||||
className,
|
||||
style,
|
||||
...props
|
||||
}: { ref?: Ref<Text> } & TextProps) => {
|
||||
return (
|
||||
<Component
|
||||
<Text
|
||||
className={cn(
|
||||
"shrink font-sans text-base text-slate-600 dark:text-slate-400",
|
||||
type === "header" &&
|
||||
@ -38,22 +38,49 @@ const styleText = (
|
||||
custom,
|
||||
className,
|
||||
)}
|
||||
{...customProps}
|
||||
{...props}
|
||||
/>
|
||||
);
|
||||
};
|
||||
return Text;
|
||||
return Wrapped;
|
||||
};
|
||||
|
||||
export const H1 = styleText(EH1, "header", cn("font-extrabold text-5xl"));
|
||||
export const H2 = styleText(EH2, "header", cn("text-2xl"));
|
||||
export const H3 = styleText(EH3, "header");
|
||||
export const H4 = styleText(EH4, "header");
|
||||
export const H5 = styleText(EH5, "header");
|
||||
export const H6 = styleText(EH6, "header");
|
||||
export const Heading = styleText(Text as any, "header");
|
||||
export const P = styleText(Text as any, undefined);
|
||||
export const SubP = styleText(Text as any, "sub");
|
||||
export const H1 = styleText("header", {
|
||||
className: cn("font-extrabold text-5xl"),
|
||||
role: "heading",
|
||||
// @ts-expect-error not yet added to ts
|
||||
"aria-level": 1,
|
||||
});
|
||||
export const H2 = styleText("header", {
|
||||
className: cn("text-2xl"),
|
||||
role: "heading",
|
||||
// @ts-expect-error not yet added to ts
|
||||
"aria-level": 2,
|
||||
});
|
||||
export const H3 = styleText("header", {
|
||||
role: "heading",
|
||||
// @ts-expect-error not yet added to ts
|
||||
"aria-level": 3,
|
||||
});
|
||||
export const H4 = styleText("header", {
|
||||
role: "heading",
|
||||
// @ts-expect-error not yet added to ts
|
||||
"aria-level": 4,
|
||||
});
|
||||
export const H5 = styleText("header", {
|
||||
role: "heading",
|
||||
// @ts-expect-error not yet added to ts
|
||||
"aria-level": 5,
|
||||
});
|
||||
export const H6 = styleText("header", {
|
||||
role: "heading",
|
||||
// @ts-expect-error not yet added to ts
|
||||
"aria-level": 6,
|
||||
});
|
||||
export const Heading = styleText("header", { role: "heading" });
|
||||
export const P = styleText(null, {});
|
||||
export const SubP = styleText("sub", {});
|
||||
|
||||
export const LI = ({
|
||||
children,
|
||||
|
||||
@ -5,7 +5,13 @@ import {
|
||||
import { HydrationBoundary, QueryClientProvider } from "@tanstack/react-query";
|
||||
import { type ReactNode, useState } from "react";
|
||||
import { useColorScheme } from "react-native";
|
||||
import { useTheme } from "yoshiki/native";
|
||||
import { SafeAreaListener } from "react-native-safe-area-context";
|
||||
import {
|
||||
Uniwind,
|
||||
useCSSVariable,
|
||||
useResolveClassNames,
|
||||
useUniwind,
|
||||
} from "uniwind";
|
||||
import { ThemeSelector } from "~/primitives/theme";
|
||||
import { createQueryClient } from "~/query";
|
||||
import { AccountProvider } from "./account-provider";
|
||||
@ -13,8 +19,6 @@ import { ErrorConsumer } from "./error-consumer";
|
||||
import { ErrorProvider } from "./error-provider";
|
||||
import { NativeProviders } from "./native-providers";
|
||||
import { TranslationsProvider } from "./translations.native";
|
||||
import { SafeAreaListener } from "react-native-safe-area-context";
|
||||
import { Uniwind } from "uniwind";
|
||||
|
||||
function getServerData(_key: string) {}
|
||||
|
||||
@ -34,37 +38,45 @@ const ThemeProvider = ({ children }: { children: ReactNode }) => {
|
||||
const userTheme = useColorScheme();
|
||||
|
||||
return (
|
||||
<SafeAreaListener
|
||||
onChange={({ insets }) => {
|
||||
Uniwind.updateInsets(insets);
|
||||
}}
|
||||
>
|
||||
<ThemeSelector theme={userTheme ?? "light"} font={{ normal: "inherit" }}>
|
||||
{children}
|
||||
</ThemeSelector>
|
||||
</SafeAreaListener>
|
||||
<ThemeSelector theme={userTheme ?? "light"} font={{ normal: "inherit" }}>
|
||||
{children}
|
||||
</ThemeSelector>
|
||||
);
|
||||
};
|
||||
|
||||
const RnTheme = ({ children }: { children: ReactNode }) => {
|
||||
const theme = useTheme();
|
||||
const { theme } = useUniwind();
|
||||
const [accent, background, card, popover] = useCSSVariable([
|
||||
"--color-accent",
|
||||
"--color-background",
|
||||
"--color-card",
|
||||
"--color-popover",
|
||||
]) as string[];
|
||||
const { color } = useResolveClassNames("text-slate-600 dark:text-slate-400");
|
||||
|
||||
return (
|
||||
<RNThemeProvider
|
||||
value={{
|
||||
dark: theme.mode === "dark",
|
||||
dark: theme === "dark",
|
||||
colors: {
|
||||
primary: theme.accent,
|
||||
card: theme.variant.background,
|
||||
text: theme.paragraph,
|
||||
border: theme.background,
|
||||
notification: theme.background,
|
||||
background: theme.background,
|
||||
primary: accent,
|
||||
card: card,
|
||||
text: color as string,
|
||||
border: background,
|
||||
notification: popover,
|
||||
background: background,
|
||||
},
|
||||
fonts: DefaultTheme.fonts,
|
||||
}}
|
||||
>
|
||||
{children}
|
||||
<SafeAreaListener
|
||||
onChange={({ insets }) => {
|
||||
Uniwind.updateInsets(insets);
|
||||
}}
|
||||
>
|
||||
{" "}
|
||||
{children}
|
||||
</SafeAreaListener>
|
||||
</RNThemeProvider>
|
||||
);
|
||||
};
|
||||
|
||||
@ -293,7 +293,7 @@ const Description = ({
|
||||
</P>
|
||||
<View className="basis-1/5 flex-row xl:mt-[-100px]">
|
||||
<HR orientation="vertical" className="max-sm:hidden" />
|
||||
<View className="flex-1 items-center max-sm:flex-row">
|
||||
<View className="flex-1 max-sm:flex-row">
|
||||
<H2>{t("show.genre")}</H2>
|
||||
{genres.length ? (
|
||||
<UL className="flex-1 flex-wrap max-sm:flex-row max-sm:items-center max-sm:text-center">
|
||||
|
||||
@ -2,27 +2,15 @@ import type { ComponentProps } from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import { View } from "react-native";
|
||||
import { useSafeAreaInsets } from "react-native-safe-area-context";
|
||||
import RSvg, { Path } from "react-native-svg";
|
||||
import { withUniwind } from "uniwind";
|
||||
import { Path } from "react-native-svg";
|
||||
import { EntryLine, entryDisplayNumber } from "~/components/entries";
|
||||
import type { Entry, Serie } from "~/models";
|
||||
import { Container, H2 } from "~/primitives";
|
||||
import { Container, H2, Svg } from "~/primitives";
|
||||
import { Fetch } from "~/query";
|
||||
import { useQueryState } from "~/utils";
|
||||
import { Header } from "./header";
|
||||
import { EntryList } from "./season";
|
||||
|
||||
export const Svg = withUniwind(RSvg, {
|
||||
stroke: {
|
||||
fromClassName: "className",
|
||||
styleProperty: "accentColor",
|
||||
},
|
||||
fill: {
|
||||
fromClassName: "className",
|
||||
styleProperty: "fill",
|
||||
},
|
||||
});
|
||||
|
||||
export const SvgWave = (props: ComponentProps<typeof Svg>) => {
|
||||
// aspect-[width/height]: width/height of the svg
|
||||
return (
|
||||
|
||||
@ -1,66 +1,15 @@
|
||||
import Svg, { Path, type SvgProps } from "react-native-svg";
|
||||
import { useYoshiki } from "yoshiki/native";
|
||||
import type { ComponentProps } from "react";
|
||||
import { View } from "react-native";
|
||||
import { Path } from "react-native-svg";
|
||||
import { Svg } from "~/primitives";
|
||||
|
||||
/* export const KyooLogo = (props: SvgProps) => ( */
|
||||
/* <Svg viewBox="0 0 128 128" {...props}> */
|
||||
/* <Path */
|
||||
/* d="M121.39 62.34 6.5 8.58v107.51z" */
|
||||
/* fill="#121327" */
|
||||
/* stroke="#010202" */
|
||||
/* strokeWidth={5} */
|
||||
/* strokeMiterlimit={10} */
|
||||
/* /> */
|
||||
/* <Path */
|
||||
/* d="M63.09 25.59c-4.59 8.24-9.01 17.92-13.23 29.04-3.65 9.52-6.53 18.78-8.64 27.78-1.42 6.05-2.06 9.83-1.91 11.32.22.58.33 1.11.33 1.59 0 .77-.31 1.15-.93 1.15-.77 0-2.01-.66-3.72-1.97-1.9-1.42-2.84-2.59-2.84-3.5 0-.58.16-1.44.49-2.57 2.99-10.54 6.71-21.69 11.16-33.47 2.92-7.29 6.09-15.24 9.52-23.84-10.43 2.55-17.88 5.61-22.37 9.19-1.64 1.28-2.46 2.5-2.46 3.66 0 .8.36 2.94 1.09 6.4.25 1.13-.15 1.7-1.2 1.7-.73 0-1.29-.35-1.7-1.04-1.24-1.97-2.52-4.83-3.83-8.59-.26-.84-.38-1.6-.38-2.3 0-2.73 2.11-4.96 6.34-6.67 1.49-.62 9.04-3.17 22.64-7.66 3.21-1.06 5.4-2.31 6.56-3.77.84-1.02 1.57-1.53 2.19-1.53.58 0 1.31.33 2.19.98 1.02.73 1.53 1.35 1.53 1.86-.01.48-.29 1.22-.83 2.24zm32.21-4.37c.73.73 1.09 1.33 1.09 1.8 0 .58-.77 1.82-2.3 3.72-4.01 4.96-9.92 11.28-17.72 18.98-7.47 7.36-12.54 11.94-15.2 13.73 3.32 4.7 6.63 9.42 9.95 14.16 5.07 7.15 9.44 11.94 13.13 14.38 1.6 1.09 3.04 1.64 4.32 1.64 1.28 0 2.77-.62 4.48-1.86.36-.25.71-.38 1.04-.38.77 0 1.15.38 1.15 1.15 0 .44-.16.89-.49 1.37-1.09 1.71-3.48 4.21-7.16 7.49-.84.77-1.66 1.15-2.46 1.15-.95 0-2.02-.49-3.23-1.48-4.48-3.57-9.52-9.28-15.09-17.12-5.83-8.2-9.88-13.29-12.14-15.26-1.17.47-2.1.71-2.79.71-1.28 0-1.99-.95-2.13-2.84-.04-.58-.05-1.08-.05-1.48 0-1.53.41-2.65 1.23-3.36s2.49-1.34 5-1.89c.91-.18 1.6.05 2.08.71 4.3-3.32 9.17-7.78 14.6-13.4 5.36-5.5 8.6-9.37 9.73-11.59-2.3-1.35-3.45-2.46-3.45-3.34 0-.69.66-1.18 1.97-1.48 1.82-1.28 3.99-3.34 6.51-6.18 1.06-1.2 2.19-1.8 3.39-1.8 1.38.01 2.9.83 4.54 2.47z" */
|
||||
/* fill="#e13e13" */
|
||||
/* /> */
|
||||
/* </Svg> */
|
||||
/* ); */
|
||||
|
||||
export const KyooLongLogo = ({
|
||||
height = 24,
|
||||
...props
|
||||
}: Omit<SvgProps, "width" | "height"> & { height?: number }) => {
|
||||
const { theme } = useYoshiki();
|
||||
const textColor = theme.contrast;
|
||||
export const KyooLongLogo = (props: ComponentProps<typeof Svg>) => {
|
||||
return (
|
||||
<Svg
|
||||
viewBox="49.954 131.833 318.13 108.676"
|
||||
height={height}
|
||||
width={height * 2.9272}
|
||||
{...props}
|
||||
>
|
||||
<Path
|
||||
d="m164.844 186.759-114.89-53.76v107.51l114.89-53.75Z"
|
||||
fill="#121327"
|
||||
stroke="#010202"
|
||||
strokeWidth={5}
|
||||
strokeMiterlimit={10}
|
||||
/>
|
||||
<Path
|
||||
d="M106.544 150.009c-4.59 8.24-9.01 17.92-13.23 29.04-3.65 9.52-6.53 18.78-8.64 27.78-1.42 6.05-2.06 9.83-1.91 11.32.22.58.33 1.11.33 1.59 0 .77-.31 1.15-.93 1.15-.77 0-2.01-.66-3.72-1.97-1.9-1.42-2.84-2.59-2.84-3.5 0-.58.16-1.44.49-2.57 2.99-10.54 6.71-21.69 11.16-33.47 2.92-7.29 6.09-15.24 9.52-23.84-10.43 2.55-17.88 5.61-22.37 9.19-1.64 1.28-2.46 2.5-2.46 3.66 0 .8.36 2.94 1.09 6.4.25 1.13-.15 1.7-1.2 1.7-.73 0-1.29-.35-1.7-1.04-1.24-1.97-2.52-4.83-3.83-8.59-.26-.84-.38-1.6-.38-2.3 0-2.73 2.11-4.96 6.34-6.67 1.49-.62 9.04-3.17 22.64-7.66 3.21-1.06 5.4-2.31 6.56-3.77.84-1.02 1.57-1.53 2.19-1.53.58 0 1.31.33 2.19.98 1.02.73 1.53 1.35 1.53 1.86-.01.48-.29 1.22-.83 2.24Zm32.21-4.37c.73.73 1.09 1.33 1.09 1.8 0 .58-.77 1.82-2.3 3.72-4.01 4.96-9.92 11.28-17.72 18.98-7.47 7.36-12.54 11.94-15.2 13.73 3.32 4.7 6.63 9.42 9.95 14.16 5.07 7.15 9.44 11.94 13.13 14.38 1.6 1.09 3.04 1.64 4.32 1.64 1.28 0 2.77-.62 4.48-1.86.36-.25.71-.38 1.04-.38.77 0 1.15.38 1.15 1.15 0 .44-.16.89-.49 1.37-1.09 1.71-3.48 4.21-7.16 7.49-.84.77-1.66 1.15-2.46 1.15-.95 0-2.02-.49-3.23-1.48-4.48-3.57-9.52-9.28-15.09-17.12-5.83-8.2-9.88-13.29-12.14-15.26-1.17.47-2.1.71-2.79.71-1.28 0-1.99-.95-2.13-2.84-.04-.58-.05-1.08-.05-1.48 0-1.53.41-2.65 1.23-3.36.82-.71 2.49-1.34 5-1.89.91-.18 1.6.05 2.08.71 4.3-3.32 9.17-7.78 14.6-13.4 5.36-5.5 8.6-9.37 9.73-11.59-2.3-1.35-3.45-2.46-3.45-3.34 0-.69.66-1.18 1.97-1.48 1.82-1.28 3.99-3.34 6.51-6.18 1.06-1.2 2.19-1.8 3.39-1.8 1.38.01 2.9.83 4.54 2.47Z"
|
||||
fill="#e13e13"
|
||||
/>
|
||||
<Path
|
||||
d="m213.414 212.784-18.219-23.932v23.932h-13.202V158.59h13.202v23.777l18.064-23.777h15.518l-20.999 26.556 21.771 27.638Z"
|
||||
fill={textColor}
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<Path
|
||||
d="m271.063 158.59-18.759 36.284v17.91h-13.202v-17.91l-18.759-36.284h14.977l10.499 22.696 10.422-22.696Z"
|
||||
fill={textColor}
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<Path
|
||||
d="M290.814 213.324q-7.642 0-14.011-3.551-6.369-3.551-10.114-9.92-3.744-6.369-3.744-14.321 0-7.951 3.744-14.282 3.745-6.33 10.114-9.881 6.369-3.551 14.011-3.551 7.643 0 14.012 3.551 6.369 3.551 10.036 9.881 3.667 6.331 3.667 14.282 0 7.952-3.705 14.321-3.706 6.369-10.036 9.92-6.331 3.551-13.974 3.551Zm0-12.043q6.485 0 10.384-4.323 3.898-4.323 3.898-11.426 0-7.179-3.898-11.464-3.899-4.284-10.384-4.284-6.562 0-10.46 4.246-3.899 4.246-3.899 11.502 0 7.18 3.899 11.465 3.898 4.284 10.46 4.284Z"
|
||||
fill={textColor}
|
||||
strokeWidth={0}
|
||||
/>
|
||||
<Path
|
||||
d="M340.285 213.324q-7.643 0-14.012-3.551-6.369-3.551-10.113-9.92-3.744-6.369-3.744-14.321 0-7.951 3.744-14.282 3.744-6.33 10.113-9.881t14.012-3.551q7.643 0 14.012 3.551 6.369 3.551 10.036 9.881Q368 177.581 368 185.532q0 7.952-3.706 14.321-3.705 6.369-10.036 9.92-6.33 3.551-13.973 3.551Zm0-12.043q6.485 0 10.383-4.323 3.899-4.323 3.899-11.426 0-7.179-3.899-11.464-3.898-4.284-10.383-4.284-6.562 0-10.461 4.246-3.898 4.246-3.898 11.502 0 7.18 3.898 11.465 3.899 4.284 10.461 4.284Z"
|
||||
fill={textColor}
|
||||
strokeWidth={0}
|
||||
/>
|
||||
</Svg>
|
||||
<View className="aspect-[531.15/149] h-full">
|
||||
<Svg viewBox="149.28 236.8 531.15 149" {...props}>
|
||||
<Path strokeWidth={3} d="M341.3 328c-3.5-4.2-6.8-7.1-9.7-8.8-3-1.6-6.4-2.5-10.5-2.8v30.9h-23.4V236.8h23.4v59c3.8-.1 7-.9 9.7-2.3s5.6-4 8.9-7.8c3.2-3.8 7.7-9.8 13.4-18.1h27.7c-6.3 9.8-11.5 17-15.6 21.8-4.1 4.7-8 8.1-11.7 10s-8.3 3.1-13.7 3.6v6.8c5.7.4 10.6 1.7 14.6 3.9 4.1 2.2 8.2 5.8 12.5 10.9s9.6 12.6 16.1 22.7h-28c-5.6-8.7-10.2-15.2-13.7-19.4Zm65.1 50.4q-9.9-7.5-12-21.9h22c1.9 6.8 7.1 10.3 15.7 10.3s10.7-1.8 13.7-5.3q4.5-5.25 4.5-16.2v-12l-5.4-1.3c-5.1 10.7-13.2 16.1-24.5 16.1s-15.7-3-20.8-9.1c-5.1-6-7.7-14.3-7.7-24.7v-46.7h23.4v42.6c0 6.1 1.5 10.8 4.4 14 3 3.3 7.1 4.9 12.4 4.9s9.6-1.7 12.7-5.1 4.6-8.2 4.6-14.3v-42.1h23.4v77.3c0 13.4-3.4 23.5-10.1 30.5-6.8 6.9-16.7 10.4-29.8 10.4s-19.9-2.5-26.5-7.5ZM506.9 344q-10.5-5.4-16.5-15c-4-6.4-5.9-13.5-5.9-21.4s2-15 5.9-21.4c4-6.4 9.4-11.4 16.5-15q10.5-5.4 23.7-5.4c13.2 0 16.7 1.8 23.7 5.4q10.5 5.4 16.5 15c4 6.4 5.9 13.5 5.9 21.4s-2 15-5.9 21.4c-4 6.4-9.4 11.4-16.5 15q-10.5 5.4-23.7 5.4c-13.2 0-16.7-1.8-23.7-5.4m40.1-20.5q6.3-6 6.3-15.9c0-9.9-2.1-12-6.3-16s-9.7-6.1-16.5-6.1-12.4 2-16.6 6.1-6.3 9.4-6.3 16 2.1 11.8 6.3 15.9 9.8 6.1 16.6 6.1 12.2-2 16.5-6.1m63.6 20.5q-10.5-5.4-16.5-15c-4-6.4-5.9-13.5-5.9-21.4s2-15 5.9-21.4c4-6.4 9.4-11.4 16.5-15q10.5-5.4 23.7-5.4c13.2 0 16.7 1.8 23.7 5.4q10.5 5.4 16.5 15c4 6.4 5.9 13.5 5.9 21.4s-2 15-5.9 21.4c-4 6.4-9.4 11.4-16.5 15q-10.5 5.4-23.7 5.4c-13.2 0-16.7-1.8-23.7-5.4m40.1-20.5q6.3-6 6.3-15.9c0-9.9-2.1-12-6.3-16s-9.7-6.1-16.5-6.1-12.4 2-16.6 6.1-6.3 9.4-6.3 16 2.1 11.8 6.3 15.9 9.8 6.1 16.6 6.1 12.2-2 16.5-6.1m-411.4-16.4c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5-7.5-17.7-17-18.4h-3.2c-9.5.8-17 8.7-17 18.4Zm-90-13c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5 8.3-18.5 18.5-18.5h.3c10-.2 18-8.2 18.2-18.2v-.7c-.2-10.1-8.4-18.2-18.5-18.2-10.2 0-18.5 8.3-18.5 18.5 0 1 0 1.9-.2 2.8 0 .3 0 .5-.1.8-.1.7-.3 1.3-.5 1.9s-.4 1.1-.6 1.6-.5 1-.7 1.5c-.1.2-.3.5-.4.7-.2.3-.3.5-.5.8-.1.2-.2.3-.3.5-.4.6-.8 1.1-1.3 1.6-.1.2-.3.3-.4.4l-1.1 1.1c-.2.1-.3.3-.5.4-.2.2-.4.4-.7.5-.7.5-1.4 1-2.2 1.4-.2.1-.5.3-.7.4s-.4.2-.7.3-.6.3-1 .4c-.2 0-.4.2-.6.2-.4.1-.8.2-1.2.4-.2 0-.4 0-.5.1h-.3c-.3 0-.5.1-.8.2-.3 0-.6 0-.9.1H168c-10.2 0-18.5 8.3-18.5 18.5Zm52.9 50.1c0 10.2 8.3 18.5 18.5 18.5 10.1 0 18.4-8.1 18.5-18.2v-2.4c0-.3 0-.6-.1-.9 0-.3-.1-.6-.2-.9v-.2c0-.2 0-.4-.1-.6 0-.4-.2-.7-.3-1.1 0-.2-.2-.5-.2-.7-.1-.3-.2-.5-.3-.8-.2-.5-.5-1.1-.8-1.6-.1-.2-.3-.5-.4-.7s-.3-.4-.4-.6c-.7-1.1-1.6-2-2.5-2.9l-.4-.4c-.5-.5-1-.9-1.6-1.3-.2-.1-.3-.2-.5-.3-1.5-1-3.1-1.7-4.8-2.3-.3 0-.6-.2-.9-.2-.4 0-.7-.2-1.1-.2-.3 0-.5 0-.8-.1-.9-.1-1.8-.2-2.8-.2-10.2 0-18.5 8.3-18.5 18.5Z" />
|
||||
<Path strokeWidth={3} d="M157 337.7c0 10.2 8.3 18.5 18.5 18.5s18.5-8.3 18.5-18.5 8.3-18.5 18.5-18.5c10.1 0 18.4-8.1 18.5-18.2v-.3c0-9.7 7.5-17.7 17-18.4h3.9c8-1 14.4-7.1 15.9-14.9 0-.2 0-.5.1-.7v-3.8c-.5-9.8-8.6-17.6-18.5-17.6s-18 7.8-18.5 17.6v1.1c-.2 10-8.2 18-18.2 18.2h-.3c-10.2 0-18.5 8.3-18.5 18.5s-8.3 18.5-18.5 18.5-18.5 8.3-18.5 18.5Z" />
|
||||
</Svg>
|
||||
</View>
|
||||
);
|
||||
};
|
||||
|
||||
@ -5,16 +5,21 @@ import Logout from "@material-symbols/svg-400/rounded/logout.svg";
|
||||
import Search from "@material-symbols/svg-400/rounded/search-fill.svg";
|
||||
import Settings from "@material-symbols/svg-400/rounded/settings.svg";
|
||||
import { useGlobalSearchParams, usePathname, useRouter } from "expo-router";
|
||||
import { type Ref, useEffect, useRef, useState } from "react";
|
||||
import {
|
||||
type Ref,
|
||||
useEffect,
|
||||
useRef,
|
||||
useState,
|
||||
type ComponentProps,
|
||||
} from "react";
|
||||
import { useTranslation } from "react-i18next";
|
||||
import {
|
||||
Platform,
|
||||
type TextInput,
|
||||
type TextInputProps,
|
||||
View,
|
||||
type ViewProps,
|
||||
type PressableProps,
|
||||
} from "react-native";
|
||||
import { type Theme, useYoshiki } from "yoshiki/native";
|
||||
import {
|
||||
A,
|
||||
Avatar,
|
||||
@ -25,32 +30,36 @@ import {
|
||||
Menu,
|
||||
PressableFeedback,
|
||||
tooltip,
|
||||
ts,
|
||||
} from "~/primitives";
|
||||
import { useAccount, useAccounts } from "~/providers/account-context";
|
||||
import { logout } from "~/ui/login/logic";
|
||||
import { cn } from "~/utils";
|
||||
import { KyooLongLogo } from "./icon";
|
||||
|
||||
export const NavbarTitle = (props: { onLayout?: ViewProps["onLayout"] }) => {
|
||||
export const NavbarTitle = ({
|
||||
className,
|
||||
...props
|
||||
}: ComponentProps<typeof A>) => {
|
||||
const { t } = useTranslation();
|
||||
|
||||
return (
|
||||
<A
|
||||
href="/"
|
||||
aria-label={t("navbar.home")}
|
||||
className={cn("m-4 flex-1", className)}
|
||||
{...tooltip(t("navbar.home"))}
|
||||
{...props}
|
||||
>
|
||||
<KyooLongLogo />
|
||||
<KyooLongLogo className="fill-light accent-dark" />
|
||||
</A>
|
||||
);
|
||||
};
|
||||
|
||||
const SearchBar = ({
|
||||
ref,
|
||||
className,
|
||||
...props
|
||||
}: TextInputProps & { ref?: Ref<TextInput> }) => {
|
||||
const { theme } = useYoshiki();
|
||||
const { t } = useTranslation();
|
||||
const params = useGlobalSearchParams();
|
||||
const [query, setQuery] = useState((params.q as string) ?? "");
|
||||
@ -78,12 +87,8 @@ const SearchBar = ({
|
||||
else router.setParams({ q });
|
||||
}}
|
||||
placeholder={t("navbar.search")}
|
||||
placeholderTextColor={theme.contrast}
|
||||
containerStyle={{
|
||||
height: ts(4),
|
||||
flexShrink: 1,
|
||||
borderColor: (theme: Theme) => theme.contrast,
|
||||
}}
|
||||
containerClassName="border-light"
|
||||
className={cn("text-slate-200 dark:text-slate-200", className)}
|
||||
{...tooltip(t("navbar.search"))}
|
||||
{...props}
|
||||
/>
|
||||
@ -97,21 +102,18 @@ const getDisplayUrl = (url: string) => {
|
||||
};
|
||||
|
||||
export const NavbarProfile = () => {
|
||||
const { css, theme } = useYoshiki();
|
||||
const { t } = useTranslation();
|
||||
const account = useAccount();
|
||||
const accounts = useAccounts();
|
||||
|
||||
return (
|
||||
<Menu
|
||||
Trigger={Avatar}
|
||||
Trigger={Avatar<PressableProps>}
|
||||
as={PressableFeedback}
|
||||
src={account?.logo}
|
||||
placeholder={account?.username}
|
||||
alt={t("navbar.login")}
|
||||
size={24}
|
||||
color={theme.colors.white}
|
||||
{...css({ margin: ts(1), justifyContent: "center" })}
|
||||
className="m-2"
|
||||
{...tooltip(account?.username ?? t("navbar.login"))}
|
||||
>
|
||||
{accounts?.map((x) => (
|
||||
@ -122,7 +124,9 @@ export const NavbarProfile = () => {
|
||||
? x.username
|
||||
: `${x.username} - ${getDisplayUrl(x.apiUrl)}`
|
||||
}
|
||||
left={<Avatar placeholder={x.username} src={x.logo} />}
|
||||
left={
|
||||
<Avatar placeholder={x.username} src={x.logo} className="mx-2" />
|
||||
}
|
||||
selected={x.selected}
|
||||
onSelect={() => x.select()}
|
||||
/>
|
||||
@ -156,31 +160,28 @@ export const NavbarProfile = () => {
|
||||
);
|
||||
};
|
||||
export const NavbarRight = () => {
|
||||
const { css, theme } = useYoshiki();
|
||||
const { t } = useTranslation();
|
||||
const isAdmin = false; //useHasPermission(AdminPage.requiredPermissions);
|
||||
|
||||
return (
|
||||
<View
|
||||
{...css({ flexDirection: "row", alignItems: "center", flexShrink: 1 })}
|
||||
>
|
||||
<View className="shrink flex-row items-center">
|
||||
{Platform.OS === "web" ? (
|
||||
<SearchBar />
|
||||
) : (
|
||||
<IconButton
|
||||
icon={Search}
|
||||
color={theme.colors.white}
|
||||
as={Link}
|
||||
href={"/browse"}
|
||||
className="fill-slate-200 dark:fill-slate-200"
|
||||
{...tooltip(t("navbar.search"))}
|
||||
/>
|
||||
)}
|
||||
{isAdmin && (
|
||||
<IconButton
|
||||
icon={Admin}
|
||||
color={theme.colors.white}
|
||||
as={Link}
|
||||
href={"/admin"}
|
||||
className="fill-slate-200 dark:fill-slate-200"
|
||||
{...tooltip(t("navbar.admin"))}
|
||||
/>
|
||||
)}
|
||||
|
||||
BIN
icons/banner.png
BIN
icons/banner.png
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 597 B |
Binary file not shown.
|
Before Width: | Height: | Size: 105 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 7.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 1.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
@ -1,27 +0,0 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 24.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<svg version="1.1" id="Calque_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
width="34pt" height="34pt"
|
||||
viewBox="0 0 128 128" style="enable-background:new 0 0 128 128; padding: 2pt;" xml:space="preserve">
|
||||
<style type="text/css">
|
||||
.st0{fill:#121327;stroke:#010202;stroke-width:5;stroke-miterlimit:10;}
|
||||
.st1{fill:#E13E13;}
|
||||
</style>
|
||||
<polygon class="st0" points="121.39,62.34 6.5,8.58 6.5,116.09 "/>
|
||||
<g>
|
||||
<path class="st1" d="M63.09,25.59c-4.59,8.24-9.01,17.92-13.23,29.04c-3.65,9.52-6.53,18.78-8.64,27.78
|
||||
c-1.42,6.05-2.06,9.83-1.91,11.32c0.22,0.58,0.33,1.11,0.33,1.59c0,0.77-0.31,1.15-0.93,1.15c-0.77,0-2.01-0.66-3.72-1.97
|
||||
c-1.9-1.42-2.84-2.59-2.84-3.5c0-0.58,0.16-1.44,0.49-2.57c2.99-10.54,6.71-21.69,11.16-33.47c2.92-7.29,6.09-15.24,9.52-23.84
|
||||
c-10.43,2.55-17.88,5.61-22.37,9.19c-1.64,1.28-2.46,2.5-2.46,3.66c0,0.8,0.36,2.94,1.09,6.4c0.25,1.13-0.15,1.7-1.2,1.7
|
||||
c-0.73,0-1.29-0.35-1.7-1.04c-1.24-1.97-2.52-4.83-3.83-8.59c-0.26-0.84-0.38-1.6-0.38-2.3c0-2.73,2.11-4.96,6.34-6.67
|
||||
c1.49-0.62,9.04-3.17,22.64-7.66c3.21-1.06,5.4-2.31,6.56-3.77c0.84-1.02,1.57-1.53,2.19-1.53c0.58,0,1.31,0.33,2.19,0.98
|
||||
c1.02,0.73,1.53,1.35,1.53,1.86C63.91,23.83,63.63,24.57,63.09,25.59z M95.3,21.22c0.73,0.73,1.09,1.33,1.09,1.8
|
||||
c0,0.58-0.77,1.82-2.3,3.72c-4.01,4.96-9.92,11.28-17.72,18.98c-7.47,7.36-12.54,11.94-15.2,13.73c3.32,4.7,6.63,9.42,9.95,14.16
|
||||
c5.07,7.15,9.44,11.94,13.13,14.38c1.6,1.09,3.04,1.64,4.32,1.64c1.28,0,2.77-0.62,4.48-1.86c0.36-0.25,0.71-0.38,1.04-0.38
|
||||
c0.77,0,1.15,0.38,1.15,1.15c0,0.44-0.16,0.89-0.49,1.37c-1.09,1.71-3.48,4.21-7.16,7.49c-0.84,0.77-1.66,1.15-2.46,1.15
|
||||
c-0.95,0-2.02-0.49-3.23-1.48c-4.48-3.57-9.52-9.28-15.09-17.12c-5.83-8.2-9.88-13.29-12.14-15.26c-1.17,0.47-2.1,0.71-2.79,0.71
|
||||
c-1.28,0-1.99-0.95-2.13-2.84c-0.04-0.58-0.05-1.08-0.05-1.48c0-1.53,0.41-2.65,1.23-3.36s2.49-1.34,5-1.89
|
||||
c0.91-0.18,1.6,0.05,2.08,0.71c4.3-3.32,9.17-7.78,14.6-13.4c5.36-5.5,8.6-9.37,9.73-11.59c-2.3-1.35-3.45-2.46-3.45-3.34
|
||||
c0-0.69,0.66-1.18,1.97-1.48c1.82-1.28,3.99-3.34,6.51-6.18c1.06-1.2,2.19-1.8,3.39-1.8C92.14,18.76,93.66,19.58,95.3,21.22z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.2 KiB |
Loading…
x
Reference in New Issue
Block a user