Showing preview only (2,409K chars total). Download the full file or copy to clipboard to get everything.
Repository: Khanhtran47/Sora
Branch: master
Commit: 14f97398c59e
Files: 367
Total size: 2.2 MB
Directory structure:
gitextract_90coe0g6/
├── .eslintrc.json
├── .gitignore
├── .husky/
│ └── pre-commit
├── .prettierignore
├── .prettierrc
├── LICENSE.txt
├── README.md
├── app/
│ ├── assets/
│ │ ├── icons/
│ │ │ ├── AnilistStatIcon.tsx
│ │ │ ├── AnimeIcon.tsx
│ │ │ ├── ArrowIcon.tsx
│ │ │ ├── BrushIcon.tsx
│ │ │ ├── CategoryIcon.tsx
│ │ │ ├── ChevronDownIcon.tsx
│ │ │ ├── ChevronLeftIcon.tsx
│ │ │ ├── ChevronRightIcon.tsx
│ │ │ ├── ChevronUpIcon.tsx
│ │ │ ├── CloseIcon.tsx
│ │ │ ├── DiscoverIcon.tsx
│ │ │ ├── ExpandIcon.tsx
│ │ │ ├── FilterIcon.tsx
│ │ │ ├── FlipIcon.tsx
│ │ │ ├── GlobalIcon.tsx
│ │ │ ├── HistoryIcon.tsx
│ │ │ ├── HomeIcon.tsx
│ │ │ ├── InfoIcon.tsx
│ │ │ ├── LibraryIcon.tsx
│ │ │ ├── LogInIcon.tsx
│ │ │ ├── LogOutIcon.tsx
│ │ │ ├── MailEditIcon.tsx
│ │ │ ├── MenuIcon.tsx
│ │ │ ├── MoonIcon.tsx
│ │ │ ├── MovieIcon.tsx
│ │ │ ├── NextIcon.tsx
│ │ │ ├── PaperPlusIcon.tsx
│ │ │ ├── Password.tsx
│ │ │ ├── PauseIcon.tsx
│ │ │ ├── PhotoIcon.tsx
│ │ │ ├── PlayIcon.tsx
│ │ │ ├── PreviousIcon.tsx
│ │ │ ├── RatioIcon.tsx
│ │ │ ├── RefreshIcon.tsx
│ │ │ ├── SearchIcon.tsx
│ │ │ ├── SettingsIcon.tsx
│ │ │ ├── ShareIcon.tsx
│ │ │ ├── SortIcon.tsx
│ │ │ ├── StarIcon.tsx
│ │ │ ├── StopIcon.tsx
│ │ │ ├── SubtitleIcon.tsx
│ │ │ ├── SunIcon.tsx
│ │ │ ├── TickIcon.tsx
│ │ │ ├── TrendingUpIcon.tsx
│ │ │ ├── TvIcon.tsx
│ │ │ ├── TwoUsersIcon.tsx
│ │ │ ├── UserIcon.tsx
│ │ │ ├── ViewGridCardIcon.tsx
│ │ │ ├── ViewGridDetailIcon.tsx
│ │ │ ├── ViewGridTableIcon.tsx
│ │ │ ├── VolumeOffIcon.tsx
│ │ │ └── VolumeUpIcon.tsx
│ │ └── lotties/
│ │ ├── external-link-black.json
│ │ ├── external-link-white.json
│ │ ├── lottieflow-arrow-08-1-000000-easey.json
│ │ ├── lottieflow-arrow-08-1-0072F5-easey.json
│ │ ├── lottieflow-arrow-08-1-FFFFFF-easey.json
│ │ ├── lottieflow-arrow-08-2-000000-easey.json
│ │ ├── lottieflow-arrow-08-2-FFFFFF-easey.json
│ │ ├── lottieflow-dropdown-03-0072F5-easey.json
│ │ ├── lottieflow-dropdown-08-0072F5-easey.json
│ │ ├── lottieflow-menu-nav-11-6-000000-easey.json
│ │ ├── lottieflow-menu-nav-11-6-FFFFFF-easey.json
│ │ ├── lottieflow-social-networks-15-10-000000-easey.json
│ │ ├── lottieflow-social-networks-15-10-FFFFFF-easey.json
│ │ ├── lottieflow-social-networks-15-4-000000-easey.json
│ │ ├── lottieflow-social-networks-15-4-FFFFFF-easey.json
│ │ ├── lottieflow-social-networks-15-5-000000-easey.json
│ │ └── lottieflow-social-networks-15-5-FFFFFF-easey.json
│ ├── components/
│ │ ├── elements/
│ │ │ ├── AspectRatio.tsx
│ │ │ ├── Breadcrumb.tsx
│ │ │ ├── Dialog.tsx
│ │ │ ├── Image.tsx
│ │ │ ├── NavigationMenu.tsx
│ │ │ ├── Popover.tsx
│ │ │ ├── ScrollArea.tsx
│ │ │ ├── SearchForm.tsx
│ │ │ ├── Select.tsx
│ │ │ ├── Sheet.tsx
│ │ │ ├── Slider.tsx
│ │ │ ├── dialog/
│ │ │ │ ├── AddSubtitleDialog.tsx
│ │ │ │ ├── SearchSubtitleDialog.tsx
│ │ │ │ ├── SelectProviderDialog.tsx
│ │ │ │ └── WatchTrailerDialog.tsx
│ │ │ ├── player/
│ │ │ │ ├── ArtPlayer.tsx
│ │ │ │ ├── PlayerError.tsx
│ │ │ │ ├── PlayerHotkey.ts
│ │ │ │ ├── PlayerSettings.tsx
│ │ │ │ └── playerStyles.ts
│ │ │ ├── shared/
│ │ │ │ ├── AuthForm.tsx
│ │ │ │ ├── ErrorBoundaryView.tsx
│ │ │ │ ├── Filter.tsx
│ │ │ │ ├── ListEpisodes.tsx
│ │ │ │ ├── ListViewChangeButton.tsx
│ │ │ │ ├── Rating.tsx
│ │ │ │ ├── ResizablePanel.tsx
│ │ │ │ └── WatchDetail.tsx
│ │ │ └── tab/
│ │ │ ├── TabLink.tsx
│ │ │ └── Tabs.tsx
│ │ ├── layouts/
│ │ │ ├── ActionButtons.tsx
│ │ │ ├── BottomNav.tsx
│ │ │ ├── ControlNavigation.tsx
│ │ │ ├── GlobalPlayer.tsx
│ │ │ ├── Header.tsx
│ │ │ ├── Layout.tsx
│ │ │ ├── MobileHeader.tsx
│ │ │ ├── MultiLevelDropdown.tsx
│ │ │ ├── SideBar.tsx
│ │ │ └── TailwindIndicator.tsx
│ │ ├── media/
│ │ │ ├── MediaDetail.tsx
│ │ │ ├── MediaList.tsx
│ │ │ ├── PeopleDetail.tsx
│ │ │ ├── item/
│ │ │ │ ├── BannerItem.tsx
│ │ │ │ ├── BannerItemCompact.tsx
│ │ │ │ ├── BannerItemDesktop.tsx
│ │ │ │ ├── BannerItemMobile.tsx
│ │ │ │ ├── CardItem.tsx
│ │ │ │ ├── HistoryItem.tsx
│ │ │ │ └── index.tsx
│ │ │ └── list/
│ │ │ ├── MediaListBanner.tsx
│ │ │ ├── MediaListCard.tsx
│ │ │ ├── MediaListGrid.tsx
│ │ │ └── index.tsx
│ │ └── styles/
│ │ ├── nprogress.css
│ │ └── primitives.ts
│ ├── constants/
│ │ ├── episodeTypes.ts
│ │ ├── featuredList.ts
│ │ ├── filterItems.ts
│ │ ├── languages.ts
│ │ ├── settings.ts
│ │ └── tabLinks.ts
│ ├── context/
│ │ └── isbot.context.tsx
│ ├── entry.client.tsx
│ ├── entry.server.tsx
│ ├── entry.worker.ts
│ ├── root.tsx
│ ├── routes/
│ │ ├── [manifest.webmanifest].ts
│ │ ├── _auth+/
│ │ │ ├── sign-in.tsx
│ │ │ ├── sign-out.tsx
│ │ │ └── sign-up.tsx
│ │ ├── _index.tsx
│ │ ├── admin+/
│ │ │ ├── cache.tsx
│ │ │ └── cache_.$cacheKey.ts
│ │ ├── anime+/
│ │ │ ├── $animeId+/
│ │ │ │ ├── _index.tsx
│ │ │ │ ├── characters.tsx
│ │ │ │ ├── episodes.tsx
│ │ │ │ └── staff.tsx
│ │ │ ├── $animeId.tsx
│ │ │ ├── $animeId_.episode.$episodeId.watch.tsx
│ │ │ ├── _index.tsx
│ │ │ ├── popular.tsx
│ │ │ ├── random.tsx
│ │ │ ├── recent-episodes.tsx
│ │ │ └── trending.tsx
│ │ ├── anime.tsx
│ │ ├── api+/
│ │ │ ├── color-palette.ts
│ │ │ ├── history.ts
│ │ │ ├── image.ts
│ │ │ ├── media.ts
│ │ │ ├── ogimage.tsx
│ │ │ ├── provider.ts
│ │ │ ├── subtitles.download.ts
│ │ │ ├── subtitles.search.ts
│ │ │ └── youtube-video.ts
│ │ ├── design-system+/
│ │ │ ├── accordion.tsx
│ │ │ ├── avatar.tsx
│ │ │ ├── badge.tsx
│ │ │ ├── button.tsx
│ │ │ ├── card.tsx
│ │ │ ├── colors.tsx
│ │ │ ├── dialog.tsx
│ │ │ ├── divider.tsx
│ │ │ ├── icons.tsx
│ │ │ ├── image.tsx
│ │ │ ├── input.tsx
│ │ │ ├── pagination.tsx
│ │ │ ├── popover.tsx
│ │ │ ├── progress.tsx
│ │ │ ├── scroll-area.tsx
│ │ │ ├── select.tsx
│ │ │ ├── skeleton.tsx
│ │ │ ├── slider.tsx
│ │ │ ├── switch.tsx
│ │ │ ├── tabs.tsx
│ │ │ ├── toast.tsx
│ │ │ ├── tooltip.tsx
│ │ │ ├── typography.tsx
│ │ │ └── video-player.tsx
│ │ ├── design-system.tsx
│ │ ├── discover+/
│ │ │ ├── _index.tsx
│ │ │ ├── anime.tsx
│ │ │ ├── movies.tsx
│ │ │ └── tv-shows.tsx
│ │ ├── discover.tsx
│ │ ├── genres+/
│ │ │ ├── anime.tsx
│ │ │ ├── movie.tsx
│ │ │ └── tv.tsx
│ │ ├── genres.tsx
│ │ ├── lists+/
│ │ │ ├── $listId.tsx
│ │ │ └── _index.tsx
│ │ ├── movies+/
│ │ │ ├── $movieId+/
│ │ │ │ ├── _index.tsx
│ │ │ │ ├── cast.tsx
│ │ │ │ ├── crew.tsx
│ │ │ │ ├── photos.tsx
│ │ │ │ ├── recommendations.tsx
│ │ │ │ ├── similar.tsx
│ │ │ │ └── videos.tsx
│ │ │ ├── $movieId.tsx
│ │ │ ├── $movieId_.watch.tsx
│ │ │ ├── _index.tsx
│ │ │ ├── now-playing.tsx
│ │ │ ├── popular.tsx
│ │ │ ├── top-rated.tsx
│ │ │ └── upcoming.tsx
│ │ ├── movies.tsx
│ │ ├── people+/
│ │ │ ├── $peopleId+/
│ │ │ │ ├── _index.tsx
│ │ │ │ ├── credits.tsx
│ │ │ │ └── media.tsx
│ │ │ ├── $peopleId.tsx
│ │ │ └── _index.tsx
│ │ ├── robots[.txt].tsx
│ │ ├── search+/
│ │ │ ├── _index.tsx
│ │ │ ├── anime+/
│ │ │ │ ├── $animeKeyword.tsx
│ │ │ │ └── _index.tsx
│ │ │ ├── movie+/
│ │ │ │ ├── $movieKeyword.tsx
│ │ │ │ └── _index.tsx
│ │ │ ├── people+/
│ │ │ │ ├── $peopleKeyword.tsx
│ │ │ │ └── _index.tsx
│ │ │ └── tv+/
│ │ │ ├── $tvKeyword.tsx
│ │ │ └── _index.tsx
│ │ ├── search.tsx
│ │ ├── settings.tsx
│ │ ├── sitemap[.]xml.tsx
│ │ ├── test.tsx
│ │ ├── trending+/
│ │ │ ├── $mediaType+/
│ │ │ │ ├── today.tsx
│ │ │ │ └── week.tsx
│ │ │ ├── $mediaType.tsx
│ │ │ └── _index.tsx
│ │ ├── trending.tsx
│ │ ├── tv-shows+/
│ │ │ ├── $tvId+/
│ │ │ │ ├── _index.tsx
│ │ │ │ ├── cast.tsx
│ │ │ │ ├── crew.tsx
│ │ │ │ ├── photos.tsx
│ │ │ │ ├── recommendations.tsx
│ │ │ │ ├── similar.tsx
│ │ │ │ └── videos.tsx
│ │ │ ├── $tvId.tsx
│ │ │ ├── $tvId_.season.$seasonId+/
│ │ │ │ ├── _index.tsx
│ │ │ │ ├── cast.tsx
│ │ │ │ ├── crew.tsx
│ │ │ │ ├── photos.tsx
│ │ │ │ └── videos.tsx
│ │ │ ├── $tvId_.season.$seasonId.tsx
│ │ │ ├── $tvId_.season.$seasonId_.episode.$episodeId.watch.tsx
│ │ │ ├── _index.tsx
│ │ │ ├── airing-today.tsx
│ │ │ ├── on-the-air.tsx
│ │ │ ├── popular.tsx
│ │ │ └── top-rated.tsx
│ │ ├── tv-shows.tsx
│ │ └── watch-history.tsx
│ ├── services/
│ │ ├── aniskip/
│ │ │ └── aniskip.server.ts
│ │ ├── configs.server.ts
│ │ ├── consumet/
│ │ │ ├── anilist/
│ │ │ │ ├── anilist.server.ts
│ │ │ │ ├── anilist.types.ts
│ │ │ │ └── utils.server.ts
│ │ │ └── bilibili/
│ │ │ ├── bilibili.server.ts
│ │ │ ├── bilibili.types.ts
│ │ │ └── utils.server.ts
│ │ ├── i18n/
│ │ │ ├── i18n.config.ts
│ │ │ ├── i18next.server.ts
│ │ │ └── index.ts
│ │ ├── kisskh/
│ │ │ ├── kisskh.server.ts
│ │ │ ├── kisskh.types.ts
│ │ │ └── utils.server.ts
│ │ ├── loklok/
│ │ │ ├── index.ts
│ │ │ ├── loklok.type.ts
│ │ │ ├── media.server.ts
│ │ │ ├── movie.server.ts
│ │ │ ├── tv.server.ts
│ │ │ └── utils.server.ts
│ │ ├── open-subtitles/
│ │ │ ├── open-subtitles.server.ts
│ │ │ ├── open-subtitles.types.ts
│ │ │ └── utils.server.ts
│ │ ├── provider.server.ts
│ │ ├── supabase/
│ │ │ ├── auth.server.ts
│ │ │ ├── client.server.ts
│ │ │ ├── cookie.server.ts
│ │ │ ├── index.ts
│ │ │ ├── table.server.ts
│ │ │ └── tables.sql
│ │ ├── tmdb/
│ │ │ ├── tmdb.server.ts
│ │ │ ├── tmdb.types.ts
│ │ │ └── utils.server.ts
│ │ └── youtube/
│ │ ├── utils.server.ts
│ │ ├── youtube.server.ts
│ │ └── youtube.types.ts
│ ├── store/
│ │ ├── card/
│ │ │ └── useCardHoverStore.ts
│ │ ├── layout/
│ │ │ ├── useHeaderStyle.ts
│ │ │ ├── useHistoryStack.ts
│ │ │ └── useLayout.ts
│ │ └── player/
│ │ └── usePlayerState.ts
│ ├── styles/
│ │ ├── tailwind.css
│ │ └── themes.config.ts
│ ├── types/
│ │ ├── handle.ts
│ │ └── media.ts
│ └── utils/
│ ├── client/
│ │ ├── gtags.client.ts
│ │ ├── meta-tags.client.ts
│ │ └── update-history.ts
│ ├── encode.ts
│ ├── file.ts
│ ├── function.ts
│ ├── index.ts
│ ├── media.ts
│ ├── merge-meta.ts
│ ├── misc.ts
│ ├── object.ts
│ ├── react/
│ │ ├── ClientOnly.tsx
│ │ └── hooks/
│ │ ├── useColorDarkenLighten.ts
│ │ ├── useGlobalNavigationState.ts
│ │ ├── useHeader.ts
│ │ ├── useHydrated.ts
│ │ ├── useIsomorphicLayoutEffect.ts
│ │ ├── useLocalStorage.ts
│ │ ├── useSplitArrayIntoPage.ts
│ │ ├── useToast.ts
│ │ └── useTypedRouteLoaderData.ts
│ └── server/
│ ├── cache.server.ts
│ ├── http.ts
│ ├── og.server.tsx
│ ├── singleton.server.ts
│ └── toast-session.server.ts
├── package.json
├── postcss.config.js
├── public/
│ └── locales/
│ ├── en/
│ │ ├── auth.json
│ │ ├── common.json
│ │ ├── discover.json
│ │ ├── genres.json
│ │ ├── header.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ ├── fr/
│ │ ├── auth.json
│ │ ├── common.json
│ │ ├── discover.json
│ │ ├── genres.json
│ │ ├── header.json
│ │ ├── settings.json
│ │ └── sidebar.json
│ └── vi/
│ ├── auth.json
│ ├── common.json
│ ├── discover.json
│ ├── genres.json
│ ├── header.json
│ ├── settings.json
│ └── sidebar.json
├── remix.config.js
├── remix.env.d.ts
├── tailwind.config.js
├── tsconfig.json
└── vercel.json
================================================
FILE CONTENTS
================================================
================================================
FILE: .eslintrc.json
================================================
{
"extends": [
"prettier",
"plugin:prettier/recommended",
"plugin:tailwindcss/recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"eslint:recommended",
"plugin:@typescript-eslint/recommended",
"@remix-run/eslint-config",
"@remix-run/eslint-config/node"
],
"parser": "@typescript-eslint/parser",
"parserOptions": {
"project": ["./tsconfig.json"]
},
"env": {
"browser": true,
"node": true,
"commonjs": true,
"es2021": true
},
"rules": {
"arrow-body-style": 0,
"comma-dangle": 0,
"consistent-return": 0,
"func-names": 0,
"jsx-a11y/accessible-emoji": 0,
"jsx-a11y/anchor-is-valid": ["warn", { "aspects": ["invalidHref"] }],
"jsx-a11y/href-no-hash": "off",
"max-len": 0,
"no-alert": 0,
"no-console": "warn",
"no-debugger": 0,
"no-empty-function": "off",
"no-nested-ternary": "off",
"no-param-reassign": [2, { "props": false }],
"no-shadow": "off",
"no-throw-literal": "off",
"no-underscore-dangle": 0,
"no-unused-expressions": [2, { "allowTaggedTemplates": true }],
"prefer-const": ["error", { "destructuring": "all" }],
"prettier/prettier": [
"error",
{
"trailingComma": "all",
"singleQuote": true,
"semi": true,
"printWidth": 100,
"endOfLine": "auto"
}
],
"quotes": [2, "single", { "avoidEscape": true, "allowTemplateLiterals": true }],
"radix": 0,
"react-hooks/rules-of-hooks": "error",
"react/display-name": 1,
"react/forbid-prop-types": 0,
"react/function-component-definition": 0,
"react/jsx-filename-extension": ["warn", { "extensions": [".tsx"] }],
"react/jsx-props-no-spreading": 0,
"react/no-array-index-key": 0,
"react/no-unescaped-entities": 0,
"react/prefer-stateless-function": 0,
"react/prop-types": 0,
"react/react-in-jsx-scope": 0,
"react/require-default-props": 0,
"space-before-function-paren": 0,
// @typescript-eslint
"@typescript-eslint/no-empty-interface": "off",
"@typescript-eslint/no-throw-literal": "off",
"@typescript-eslint/ban-ts-comment": "off",
"@typescript-eslint/consistent-type-imports": "error",
"@typescript-eslint/no-empty-function": "off",
"@typescript-eslint/no-unused-vars": [
"warn",
{
"vars": "all",
"args": "all",
"argsIgnorePattern": "^_",
"destructuredArrayIgnorePattern": "^_",
"ignoreRestSiblings": false
}
],
//import
"import/no-cycle": "error",
"import/prefer-default-export": "off",
"import/extensions": ["error", "ignorePackages", { "ts": "never", "tsx": "never" }],
"import/no-extraneous-dependencies": ["error", { "devDependencies": true }],
"import/no-duplicates": "error",
"sort-imports": "off",
"tailwindcss/no-custom-classname": "off"
},
"ignorePatterns": [
"node_modules",
".cache",
"public",
".vscode",
"api",
"*.config.js",
"*.lock",
"*.json",
"*.yaml",
"server.ts",
"build"
],
"overrides": [
{
"files": [
"./app/entry.client.tsx",
"./app/entry.server.tsx",
"./app/entry.worker.ts",
"./app/services/**/*.ts",
"./app/utils/**/*.ts"
],
"rules": {
"no-console": "off"
}
}
],
"plugins": ["prettier", "react", "react-hooks", "@typescript-eslint", "jsx-a11y", "tailwindcss"],
"settings": {
"tailwindcss": {
"callees": ["tv", "classNames", "cn"]
},
"import/resolver": { "typescript": {} },
"react": { "version": "detect" }
}
}
================================================
FILE: .gitignore
================================================
node_modules
.cache
.vercel
.output
.env
.vscode
.node-persist
public/build
public/sw.js
/api
build
================================================
FILE: .husky/pre-commit
================================================
#!/bin/sh
. "$(dirname "$0")/_/husky.sh"
# check lint/format on staged files
echo "Run pre-commit tasks"
pnpm lint-staged --quiet || (
echo "Please lint and format your code before commit!";
false;
)
================================================
FILE: .prettierignore
================================================
/server/index.js
/public/build
.cache
.env
.env-example
.vercel
.output
.node-persist
/build/
/api
node_modules
/.husky
.vscode/
pnpm-lock.yaml
remix.config.js
tsconfig.json
================================================
FILE: .prettierrc
================================================
{
"trailingComma": "all",
"singleQuote": true,
"semi": true,
"printWidth": 100,
"endOfLine": "auto",
"importOrder": [
"^(react/(.*)$)|^(react$)",
"<THIRD_PARTY_MODULES>",
"",
"^types$",
"^~/types/(.*)$",
"^~/routes/(.*)$",
"^~/services/(.*)$",
"^~/utils/(.*)$",
"^~/context/(.*)$",
"^~/store/(.*)$",
"^~/constants/(.*)$",
"^~/components/layouts/(.*)$",
"^~/components/media/(.*)$",
"^~/components/elements/(.*)$",
"^~/components/styles/(.*)$",
"^~/components/(.*)$",
"^~/assets/(.*)$",
"^~/styles/(.*)$",
"",
"^[./]"
],
"importOrderParserPlugins": ["typescript", "jsx", "decorators-legacy"],
"importOrderTypeScriptVersion": "5.0.0",
"plugins": ["@ianvs/prettier-plugin-sort-imports"]
}
================================================
FILE: LICENSE.txt
================================================
GNU GENERAL PUBLIC LICENSE
Version 3, 29 June 2007
Copyright (C) 2007 Free Software Foundation, Inc. <https://fsf.org/>
Everyone is permitted to copy and distribute verbatim copies
of this license document, but changing it is not allowed.
Preamble
The GNU General Public License is a free, copyleft license for
software and other kinds of works.
The licenses for most software and other practical works are designed
to take away your freedom to share and change the works. By contrast,
the GNU General Public License is intended to guarantee your freedom to
share and change all versions of a program--to make sure it remains free
software for all its users. We, the Free Software Foundation, use the
GNU General Public License for most of our software; it applies also to
any other work released this way by its authors. You can apply it to
your programs, too.
When we speak of free software, we are referring to freedom, not
price. Our General Public Licenses are designed to make sure that you
have the freedom to distribute copies of free software (and charge for
them if you wish), that you receive source code or can get it if you
want it, that you can change the software or use pieces of it in new
free programs, and that you know you can do these things.
To protect your rights, we need to prevent others from denying you
these rights or asking you to surrender the rights. Therefore, you have
certain responsibilities if you distribute copies of the software, or if
you modify it: responsibilities to respect the freedom of others.
For example, if you distribute copies of such a program, whether
gratis or for a fee, you must pass on to the recipients the same
freedoms that you received. You must make sure that they, too, receive
or can get the source code. And you must show them these terms so they
know their rights.
Developers that use the GNU GPL protect your rights with two steps:
(1) assert copyright on the software, and (2) offer you this License
giving you legal permission to copy, distribute and/or modify it.
For the developers' and authors' protection, the GPL clearly explains
that there is no warranty for this free software. For both users' and
authors' sake, the GPL requires that modified versions be marked as
changed, so that their problems will not be attributed erroneously to
authors of previous versions.
Some devices are designed to deny users access to install or run
modified versions of the software inside them, although the manufacturer
can do so. This is fundamentally incompatible with the aim of
protecting users' freedom to change the software. The systematic
pattern of such abuse occurs in the area of products for individuals to
use, which is precisely where it is most unacceptable. Therefore, we
have designed this version of the GPL to prohibit the practice for those
products. If such problems arise substantially in other domains, we
stand ready to extend this provision to those domains in future versions
of the GPL, as needed to protect the freedom of users.
Finally, every program is threatened constantly by software patents.
States should not allow patents to restrict development and use of
software on general-purpose computers, but in those that do, we wish to
avoid the special danger that patents applied to a free program could
make it effectively proprietary. To prevent this, the GPL assures that
patents cannot be used to render the program non-free.
The precise terms and conditions for copying, distribution and
modification follow.
TERMS AND CONDITIONS
0. Definitions.
"This License" refers to version 3 of the GNU General Public License.
"Copyright" also means copyright-like laws that apply to other kinds of
works, such as semiconductor masks.
"The Program" refers to any copyrightable work licensed under this
License. Each licensee is addressed as "you". "Licensees" and
"recipients" may be individuals or organizations.
To "modify" a work means to copy from or adapt all or part of the work
in a fashion requiring copyright permission, other than the making of an
exact copy. The resulting work is called a "modified version" of the
earlier work or a work "based on" the earlier work.
A "covered work" means either the unmodified Program or a work based
on the Program.
To "propagate" a work means to do anything with it that, without
permission, would make you directly or secondarily liable for
infringement under applicable copyright law, except executing it on a
computer or modifying a private copy. Propagation includes copying,
distribution (with or without modification), making available to the
public, and in some countries other activities as well.
To "convey" a work means any kind of propagation that enables other
parties to make or receive copies. Mere interaction with a user through
a computer network, with no transfer of a copy, is not conveying.
An interactive user interface displays "Appropriate Legal Notices"
to the extent that it includes a convenient and prominently visible
feature that (1) displays an appropriate copyright notice, and (2)
tells the user that there is no warranty for the work (except to the
extent that warranties are provided), that licensees may convey the
work under this License, and how to view a copy of this License. If
the interface presents a list of user commands or options, such as a
menu, a prominent item in the list meets this criterion.
1. Source Code.
The "source code" for a work means the preferred form of the work
for making modifications to it. "Object code" means any non-source
form of a work.
A "Standard Interface" means an interface that either is an official
standard defined by a recognized standards body, or, in the case of
interfaces specified for a particular programming language, one that
is widely used among developers working in that language.
The "System Libraries" of an executable work include anything, other
than the work as a whole, that (a) is included in the normal form of
packaging a Major Component, but which is not part of that Major
Component, and (b) serves only to enable use of the work with that
Major Component, or to implement a Standard Interface for which an
implementation is available to the public in source code form. A
"Major Component", in this context, means a major essential component
(kernel, window system, and so on) of the specific operating system
(if any) on which the executable work runs, or a compiler used to
produce the work, or an object code interpreter used to run it.
The "Corresponding Source" for a work in object code form means all
the source code needed to generate, install, and (for an executable
work) run the object code and to modify the work, including scripts to
control those activities. However, it does not include the work's
System Libraries, or general-purpose tools or generally available free
programs which are used unmodified in performing those activities but
which are not part of the work. For example, Corresponding Source
includes interface definition files associated with source files for
the work, and the source code for shared libraries and dynamically
linked subprograms that the work is specifically designed to require,
such as by intimate data communication or control flow between those
subprograms and other parts of the work.
The Corresponding Source need not include anything that users
can regenerate automatically from other parts of the Corresponding
Source.
The Corresponding Source for a work in source code form is that
same work.
2. Basic Permissions.
All rights granted under this License are granted for the term of
copyright on the Program, and are irrevocable provided the stated
conditions are met. This License explicitly affirms your unlimited
permission to run the unmodified Program. The output from running a
covered work is covered by this License only if the output, given its
content, constitutes a covered work. This License acknowledges your
rights of fair use or other equivalent, as provided by copyright law.
You may make, run and propagate covered works that you do not
convey, without conditions so long as your license otherwise remains
in force. You may convey covered works to others for the sole purpose
of having them make modifications exclusively for you, or provide you
with facilities for running those works, provided that you comply with
the terms of this License in conveying all material for which you do
not control copyright. Those thus making or running the covered works
for you must do so exclusively on your behalf, under your direction
and control, on terms that prohibit them from making any copies of
your copyrighted material outside their relationship with you.
Conveying under any other circumstances is permitted solely under
the conditions stated below. Sublicensing is not allowed; section 10
makes it unnecessary.
3. Protecting Users' Legal Rights From Anti-Circumvention Law.
No covered work shall be deemed part of an effective technological
measure under any applicable law fulfilling obligations under article
11 of the WIPO copyright treaty adopted on 20 December 1996, or
similar laws prohibiting or restricting circumvention of such
measures.
When you convey a covered work, you waive any legal power to forbid
circumvention of technological measures to the extent such circumvention
is effected by exercising rights under this License with respect to
the covered work, and you disclaim any intention to limit operation or
modification of the work as a means of enforcing, against the work's
users, your or third parties' legal rights to forbid circumvention of
technological measures.
4. Conveying Verbatim Copies.
You may convey verbatim copies of the Program's source code as you
receive it, in any medium, provided that you conspicuously and
appropriately publish on each copy an appropriate copyright notice;
keep intact all notices stating that this License and any
non-permissive terms added in accord with section 7 apply to the code;
keep intact all notices of the absence of any warranty; and give all
recipients a copy of this License along with the Program.
You may charge any price or no price for each copy that you convey,
and you may offer support or warranty protection for a fee.
5. Conveying Modified Source Versions.
You may convey a work based on the Program, or the modifications to
produce it from the Program, in the form of source code under the
terms of section 4, provided that you also meet all of these conditions:
a) The work must carry prominent notices stating that you modified
it, and giving a relevant date.
b) The work must carry prominent notices stating that it is
released under this License and any conditions added under section
7. This requirement modifies the requirement in section 4 to
"keep intact all notices".
c) You must license the entire work, as a whole, under this
License to anyone who comes into possession of a copy. This
License will therefore apply, along with any applicable section 7
additional terms, to the whole of the work, and all its parts,
regardless of how they are packaged. This License gives no
permission to license the work in any other way, but it does not
invalidate such permission if you have separately received it.
d) If the work has interactive user interfaces, each must display
Appropriate Legal Notices; however, if the Program has interactive
interfaces that do not display Appropriate Legal Notices, your
work need not make them do so.
A compilation of a covered work with other separate and independent
works, which are not by their nature extensions of the covered work,
and which are not combined with it such as to form a larger program,
in or on a volume of a storage or distribution medium, is called an
"aggregate" if the compilation and its resulting copyright are not
used to limit the access or legal rights of the compilation's users
beyond what the individual works permit. Inclusion of a covered work
in an aggregate does not cause this License to apply to the other
parts of the aggregate.
6. Conveying Non-Source Forms.
You may convey a covered work in object code form under the terms
of sections 4 and 5, provided that you also convey the
machine-readable Corresponding Source under the terms of this License,
in one of these ways:
a) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by the
Corresponding Source fixed on a durable physical medium
customarily used for software interchange.
b) Convey the object code in, or embodied in, a physical product
(including a physical distribution medium), accompanied by a
written offer, valid for at least three years and valid for as
long as you offer spare parts or customer support for that product
model, to give anyone who possesses the object code either (1) a
copy of the Corresponding Source for all the software in the
product that is covered by this License, on a durable physical
medium customarily used for software interchange, for a price no
more than your reasonable cost of physically performing this
conveying of source, or (2) access to copy the
Corresponding Source from a network server at no charge.
c) Convey individual copies of the object code with a copy of the
written offer to provide the Corresponding Source. This
alternative is allowed only occasionally and noncommercially, and
only if you received the object code with such an offer, in accord
with subsection 6b.
d) Convey the object code by offering access from a designated
place (gratis or for a charge), and offer equivalent access to the
Corresponding Source in the same way through the same place at no
further charge. You need not require recipients to copy the
Corresponding Source along with the object code. If the place to
copy the object code is a network server, the Corresponding Source
may be on a different server (operated by you or a third party)
that supports equivalent copying facilities, provided you maintain
clear directions next to the object code saying where to find the
Corresponding Source. Regardless of what server hosts the
Corresponding Source, you remain obligated to ensure that it is
available for as long as needed to satisfy these requirements.
e) Convey the object code using peer-to-peer transmission, provided
you inform other peers where the object code and Corresponding
Source of the work are being offered to the general public at no
charge under subsection 6d.
A separable portion of the object code, whose source code is excluded
from the Corresponding Source as a System Library, need not be
included in conveying the object code work.
A "User Product" is either (1) a "consumer product", which means any
tangible personal property which is normally used for personal, family,
or household purposes, or (2) anything designed or sold for incorporation
into a dwelling. In determining whether a product is a consumer product,
doubtful cases shall be resolved in favor of coverage. For a particular
product received by a particular user, "normally used" refers to a
typical or common use of that class of product, regardless of the status
of the particular user or of the way in which the particular user
actually uses, or expects or is expected to use, the product. A product
is a consumer product regardless of whether the product has substantial
commercial, industrial or non-consumer uses, unless such uses represent
the only significant mode of use of the product.
"Installation Information" for a User Product means any methods,
procedures, authorization keys, or other information required to install
and execute modified versions of a covered work in that User Product from
a modified version of its Corresponding Source. The information must
suffice to ensure that the continued functioning of the modified object
code is in no case prevented or interfered with solely because
modification has been made.
If you convey an object code work under this section in, or with, or
specifically for use in, a User Product, and the conveying occurs as
part of a transaction in which the right of possession and use of the
User Product is transferred to the recipient in perpetuity or for a
fixed term (regardless of how the transaction is characterized), the
Corresponding Source conveyed under this section must be accompanied
by the Installation Information. But this requirement does not apply
if neither you nor any third party retains the ability to install
modified object code on the User Product (for example, the work has
been installed in ROM).
The requirement to provide Installation Information does not include a
requirement to continue to provide support service, warranty, or updates
for a work that has been modified or installed by the recipient, or for
the User Product in which it has been modified or installed. Access to a
network may be denied when the modification itself materially and
adversely affects the operation of the network or violates the rules and
protocols for communication across the network.
Corresponding Source conveyed, and Installation Information provided,
in accord with this section must be in a format that is publicly
documented (and with an implementation available to the public in
source code form), and must require no special password or key for
unpacking, reading or copying.
7. Additional Terms.
"Additional permissions" are terms that supplement the terms of this
License by making exceptions from one or more of its conditions.
Additional permissions that are applicable to the entire Program shall
be treated as though they were included in this License, to the extent
that they are valid under applicable law. If additional permissions
apply only to part of the Program, that part may be used separately
under those permissions, but the entire Program remains governed by
this License without regard to the additional permissions.
When you convey a copy of a covered work, you may at your option
remove any additional permissions from that copy, or from any part of
it. (Additional permissions may be written to require their own
removal in certain cases when you modify the work.) You may place
additional permissions on material, added by you to a covered work,
for which you have or can give appropriate copyright permission.
Notwithstanding any other provision of this License, for material you
add to a covered work, you may (if authorized by the copyright holders of
that material) supplement the terms of this License with terms:
a) Disclaiming warranty or limiting liability differently from the
terms of sections 15 and 16 of this License; or
b) Requiring preservation of specified reasonable legal notices or
author attributions in that material or in the Appropriate Legal
Notices displayed by works containing it; or
c) Prohibiting misrepresentation of the origin of that material, or
requiring that modified versions of such material be marked in
reasonable ways as different from the original version; or
d) Limiting the use for publicity purposes of names of licensors or
authors of the material; or
e) Declining to grant rights under trademark law for use of some
trade names, trademarks, or service marks; or
f) Requiring indemnification of licensors and authors of that
material by anyone who conveys the material (or modified versions of
it) with contractual assumptions of liability to the recipient, for
any liability that these contractual assumptions directly impose on
those licensors and authors.
All other non-permissive additional terms are considered "further
restrictions" within the meaning of section 10. If the Program as you
received it, or any part of it, contains a notice stating that it is
governed by this License along with a term that is a further
restriction, you may remove that term. If a license document contains
a further restriction but permits relicensing or conveying under this
License, you may add to a covered work material governed by the terms
of that license document, provided that the further restriction does
not survive such relicensing or conveying.
If you add terms to a covered work in accord with this section, you
must place, in the relevant source files, a statement of the
additional terms that apply to those files, or a notice indicating
where to find the applicable terms.
Additional terms, permissive or non-permissive, may be stated in the
form of a separately written license, or stated as exceptions;
the above requirements apply either way.
8. Termination.
You may not propagate or modify a covered work except as expressly
provided under this License. Any attempt otherwise to propagate or
modify it is void, and will automatically terminate your rights under
this License (including any patent licenses granted under the third
paragraph of section 11).
However, if you cease all violation of this License, then your
license from a particular copyright holder is reinstated (a)
provisionally, unless and until the copyright holder explicitly and
finally terminates your license, and (b) permanently, if the copyright
holder fails to notify you of the violation by some reasonable means
prior to 60 days after the cessation.
Moreover, your license from a particular copyright holder is
reinstated permanently if the copyright holder notifies you of the
violation by some reasonable means, this is the first time you have
received notice of violation of this License (for any work) from that
copyright holder, and you cure the violation prior to 30 days after
your receipt of the notice.
Termination of your rights under this section does not terminate the
licenses of parties who have received copies or rights from you under
this License. If your rights have been terminated and not permanently
reinstated, you do not qualify to receive new licenses for the same
material under section 10.
9. Acceptance Not Required for Having Copies.
You are not required to accept this License in order to receive or
run a copy of the Program. Ancillary propagation of a covered work
occurring solely as a consequence of using peer-to-peer transmission
to receive a copy likewise does not require acceptance. However,
nothing other than this License grants you permission to propagate or
modify any covered work. These actions infringe copyright if you do
not accept this License. Therefore, by modifying or propagating a
covered work, you indicate your acceptance of this License to do so.
10. Automatic Licensing of Downstream Recipients.
Each time you convey a covered work, the recipient automatically
receives a license from the original licensors, to run, modify and
propagate that work, subject to this License. You are not responsible
for enforcing compliance by third parties with this License.
An "entity transaction" is a transaction transferring control of an
organization, or substantially all assets of one, or subdividing an
organization, or merging organizations. If propagation of a covered
work results from an entity transaction, each party to that
transaction who receives a copy of the work also receives whatever
licenses to the work the party's predecessor in interest had or could
give under the previous paragraph, plus a right to possession of the
Corresponding Source of the work from the predecessor in interest, if
the predecessor has it or can get it with reasonable efforts.
You may not impose any further restrictions on the exercise of the
rights granted or affirmed under this License. For example, you may
not impose a license fee, royalty, or other charge for exercise of
rights granted under this License, and you may not initiate litigation
(including a cross-claim or counterclaim in a lawsuit) alleging that
any patent claim is infringed by making, using, selling, offering for
sale, or importing the Program or any portion of it.
11. Patents.
A "contributor" is a copyright holder who authorizes use under this
License of the Program or a work on which the Program is based. The
work thus licensed is called the contributor's "contributor version".
A contributor's "essential patent claims" are all patent claims
owned or controlled by the contributor, whether already acquired or
hereafter acquired, that would be infringed by some manner, permitted
by this License, of making, using, or selling its contributor version,
but do not include claims that would be infringed only as a
consequence of further modification of the contributor version. For
purposes of this definition, "control" includes the right to grant
patent sublicenses in a manner consistent with the requirements of
this License.
Each contributor grants you a non-exclusive, worldwide, royalty-free
patent license under the contributor's essential patent claims, to
make, use, sell, offer for sale, import and otherwise run, modify and
propagate the contents of its contributor version.
In the following three paragraphs, a "patent license" is any express
agreement or commitment, however denominated, not to enforce a patent
(such as an express permission to practice a patent or covenant not to
sue for patent infringement). To "grant" such a patent license to a
party means to make such an agreement or commitment not to enforce a
patent against the party.
If you convey a covered work, knowingly relying on a patent license,
and the Corresponding Source of the work is not available for anyone
to copy, free of charge and under the terms of this License, through a
publicly available network server or other readily accessible means,
then you must either (1) cause the Corresponding Source to be so
available, or (2) arrange to deprive yourself of the benefit of the
patent license for this particular work, or (3) arrange, in a manner
consistent with the requirements of this License, to extend the patent
license to downstream recipients. "Knowingly relying" means you have
actual knowledge that, but for the patent license, your conveying the
covered work in a country, or your recipient's use of the covered work
in a country, would infringe one or more identifiable patents in that
country that you have reason to believe are valid.
If, pursuant to or in connection with a single transaction or
arrangement, you convey, or propagate by procuring conveyance of, a
covered work, and grant a patent license to some of the parties
receiving the covered work authorizing them to use, propagate, modify
or convey a specific copy of the covered work, then the patent license
you grant is automatically extended to all recipients of the covered
work and works based on it.
A patent license is "discriminatory" if it does not include within
the scope of its coverage, prohibits the exercise of, or is
conditioned on the non-exercise of one or more of the rights that are
specifically granted under this License. You may not convey a covered
work if you are a party to an arrangement with a third party that is
in the business of distributing software, under which you make payment
to the third party based on the extent of your activity of conveying
the work, and under which the third party grants, to any of the
parties who would receive the covered work from you, a discriminatory
patent license (a) in connection with copies of the covered work
conveyed by you (or copies made from those copies), or (b) primarily
for and in connection with specific products or compilations that
contain the covered work, unless you entered into that arrangement,
or that patent license was granted, prior to 28 March 2007.
Nothing in this License shall be construed as excluding or limiting
any implied license or other defenses to infringement that may
otherwise be available to you under applicable patent law.
12. No Surrender of Others' Freedom.
If conditions are imposed on you (whether by court order, agreement or
otherwise) that contradict the conditions of this License, they do not
excuse you from the conditions of this License. If you cannot convey a
covered work so as to satisfy simultaneously your obligations under this
License and any other pertinent obligations, then as a consequence you may
not convey it at all. For example, if you agree to terms that obligate you
to collect a royalty for further conveying from those to whom you convey
the Program, the only way you could satisfy both those terms and this
License would be to refrain entirely from conveying the Program.
13. Use with the GNU Affero General Public License.
Notwithstanding any other provision of this License, you have
permission to link or combine any covered work with a work licensed
under version 3 of the GNU Affero General Public License into a single
combined work, and to convey the resulting work. The terms of this
License will continue to apply to the part which is the covered work,
but the special requirements of the GNU Affero General Public License,
section 13, concerning interaction through a network will apply to the
combination as such.
14. Revised Versions of this License.
The Free Software Foundation may publish revised and/or new versions of
the GNU General Public License from time to time. Such new versions will
be similar in spirit to the present version, but may differ in detail to
address new problems or concerns.
Each version is given a distinguishing version number. If the
Program specifies that a certain numbered version of the GNU General
Public License "or any later version" applies to it, you have the
option of following the terms and conditions either of that numbered
version or of any later version published by the Free Software
Foundation. If the Program does not specify a version number of the
GNU General Public License, you may choose any version ever published
by the Free Software Foundation.
If the Program specifies that a proxy can decide which future
versions of the GNU General Public License can be used, that proxy's
public statement of acceptance of a version permanently authorizes you
to choose that version for the Program.
Later license versions may give you additional or different
permissions. However, no additional obligations are imposed on any
author or copyright holder as a result of your choosing to follow a
later version.
15. Disclaimer of Warranty.
THERE IS NO WARRANTY FOR THE PROGRAM, TO THE EXTENT PERMITTED BY
APPLICABLE LAW. EXCEPT WHEN OTHERWISE STATED IN WRITING THE COPYRIGHT
HOLDERS AND/OR OTHER PARTIES PROVIDE THE PROGRAM "AS IS" WITHOUT WARRANTY
OF ANY KIND, EITHER EXPRESSED OR IMPLIED, INCLUDING, BUT NOT LIMITED TO,
THE IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
PURPOSE. THE ENTIRE RISK AS TO THE QUALITY AND PERFORMANCE OF THE PROGRAM
IS WITH YOU. SHOULD THE PROGRAM PROVE DEFECTIVE, YOU ASSUME THE COST OF
ALL NECESSARY SERVICING, REPAIR OR CORRECTION.
16. Limitation of Liability.
IN NO EVENT UNLESS REQUIRED BY APPLICABLE LAW OR AGREED TO IN WRITING
WILL ANY COPYRIGHT HOLDER, OR ANY OTHER PARTY WHO MODIFIES AND/OR CONVEYS
THE PROGRAM AS PERMITTED ABOVE, BE LIABLE TO YOU FOR DAMAGES, INCLUDING ANY
GENERAL, SPECIAL, INCIDENTAL OR CONSEQUENTIAL DAMAGES ARISING OUT OF THE
USE OR INABILITY TO USE THE PROGRAM (INCLUDING BUT NOT LIMITED TO LOSS OF
DATA OR DATA BEING RENDERED INACCURATE OR LOSSES SUSTAINED BY YOU OR THIRD
PARTIES OR A FAILURE OF THE PROGRAM TO OPERATE WITH ANY OTHER PROGRAMS),
EVEN IF SUCH HOLDER OR OTHER PARTY HAS BEEN ADVISED OF THE POSSIBILITY OF
SUCH DAMAGES.
17. Interpretation of Sections 15 and 16.
If the disclaimer of warranty and limitation of liability provided
above cannot be given local legal effect according to their terms,
reviewing courts shall apply local law that most closely approximates
an absolute waiver of all civil liability in connection with the
Program, unless a warranty or assumption of liability accompanies a
copy of the Program in return for a fee.
END OF TERMS AND CONDITIONS
How to Apply These Terms to Your New Programs
If you develop a new program, and you want it to be of the greatest
possible use to the public, the best way to achieve this is to make it
free software which everyone can redistribute and change under these terms.
To do so, attach the following notices to the program. It is safest
to attach them to the start of each source file to most effectively
state the exclusion of warranty; and each file should have at least
the "copyright" line and a pointer to where the full notice is found.
<one line to give the program's name and a brief idea of what it does.>
Copyright (C) <year> <name of author>
This program is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
This program is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with this program. If not, see <https://www.gnu.org/licenses/>.
Also add information on how to contact you by electronic and paper mail.
If the program does terminal interaction, make it output a short
notice like this when it starts in an interactive mode:
<program> Copyright (C) <year> <name of author>
This program comes with ABSOLUTELY NO WARRANTY; for details type `show w'.
This is free software, and you are welcome to redistribute it
under certain conditions; type `show c' for details.
The hypothetical commands `show w' and `show c' should show the appropriate
parts of the General Public License. Of course, your program's commands
might be different; for a GUI interface, you would use an "about box".
You should also get your employer (if you work as a programmer) or school,
if any, to sign a "copyright disclaimer" for the program, if necessary.
For more information on this, and how to apply and follow the GNU GPL, see
<https://www.gnu.org/licenses/>.
The GNU General Public License does not permit incorporating your program
into proprietary programs. If your program is a subroutine library, you
may consider it more useful to permit linking proprietary applications with
the library. If this is what you want to do, use the GNU Lesser General
Public License instead of this License. But first, please read
<https://www.gnu.org/licenses/why-not-lgpl.html>.
================================================
FILE: README.md
================================================
<a name="readme-top"></a>
<!-- PROJECT LOGO -->
<br />
<div align="center">
<a href="https://github.com/Khanhtran47/remix-movie">
<img src="app/assets/images/logo_loading.png" alt="Logo" width="80" height="80">
</a>
<h2 align="center">SORA</h2>
<p align="center">
A web app for exploring, watching movies, tv shows and anime built with Remix and NextUI.
<br />
</p>
</div>
> **Warning**
> This app is a work in progress.
> <br/>
<!-- TABLE OF CONTENTS -->
<details>
<summary>Table of Contents</summary>
<ol>
<li><a href="#tech-stack">Tech Stack</a></li>
<li><a href="#development">Development</a></li>
<li><a href="#license">License</a></li>
</ol>
</details>
<br/>
<div align="center">
<a href="https://github.com/Khanhtran47/remix-movie">
<img src="public/images/screenshot.png" alt="screenshot">
</a>
</div>
<br/>
<!-- TECH STACK -->
## Tech Stack
- **Remix** with Typescript
- **NextUI** for pre-made components and themes
- Styled using **TailwindCSS** and **Stitches**
- **SwiperJS** for touch slider
- Internationalization using **i18n**
- Authentication, database using **Supabase**
- UI Components built using **Radix UI**
- Animation using **Framer Motion**
- State management using **Zustand**
- Custom media player using **Artplayer**
- Cache using **LRU Cache**
- Color manipulation and conversion using **Tinycolor**
<p align="right">(<a href="#readme-top">back to top</a>)</p>
<!-- DEVELOPMENT -->
## Development
<br/>
1. Install dependencies using pnpm
```sh
pnpm install
```
2. Copy `.env-example` and update the variables
3. Start the development server
```sh
pnpm dev
```
<p align="right">(<a href="#readme-top">back to top</a>)</p>
<!-- LICENSE -->
## License
Distributed under the MIT License. See [LICENSE.txt](https://github.com/Khanhtran47/Sora/blob/master/LICENSE.txt) for more information.
<p align="right">(<a href="#readme-top">back to top</a>)</p>
================================================
FILE: app/assets/icons/AnilistStatIcon.tsx
================================================
const Good = () => (
<path
fill="rgb(93,193,47)"
stroke="none"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160 0c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm4 72.6c-20.8 25-51.5 39.4-84 39.4s-63.2-14.3-84-39.4c-8.5-10.2-23.7-11.5-33.8-3.1-10.2 8.5-11.5 23.6-3.1 33.8 30 36 74.1 56.6 120.9 56.6s90.9-20.6 120.9-56.6c8.5-10.2 7.1-25.3-3.1-33.8-10.1-8.4-25.3-7.1-33.8 3.1z"
/>
);
const Average = () => (
<path
fill="rgb(247,154,99)"
stroke="none"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm8 144H160c-13.2 0-24 10.8-24 24s10.8 24 24 24h176c13.2 0 24-10.8 24-24s-10.8-24-24-24z"
/>
);
const Bad = () => (
<path
fill="rgb(232,93,117)"
stroke="none"
d="M248 8C111 8 0 119 0 256s111 248 248 248 248-111 248-248S385 8 248 8zm0 448c-110.3 0-200-89.7-200-200S137.7 56 248 56s200 89.7 200 200-89.7 200-200 200zm-80-216c17.7 0 32-14.3 32-32s-14.3-32-32-32-32 14.3-32 32 14.3 32 32 32zm160-64c-17.7 0-32 14.3-32 32s14.3 32 32 32 32-14.3 32-32-14.3-32-32-32zm-80 128c-40.2 0-78 17.7-103.8 48.6-8.5 10.2-7.1 25.3 3.1 33.8 10.2 8.4 25.3 7.1 33.8-3.1 16.6-19.9 41-31.4 66.9-31.4s50.3 11.4 66.9 31.4c8.1 9.7 23.1 11.9 33.8 3.1 10.2-8.5 11.5-23.6 3.1-33.8C326 321.7 288.2 304 248 304z"
/>
);
interface IAnilistStatProps {
/**
* The stat to display
* @default 'good'
* @type 'good' | 'average' | 'bad'
* @example 'good'
* @example 'average'
* @example 'bad'
*/
stat?: 'good' | 'average' | 'bad';
/**
* The size of the icon
* @default 24
* @type number
* @example 24
* @example 32
* @example 48
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
* @example 24
* @example 32
* @example 48
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* @example 24
* @example 32
* @example 48
*/
width?: number;
}
const AnilistStat = ({
stat = 'good',
size = 24,
height = 24,
width = 24,
...props
}: IAnilistStatProps) => {
switch (stat) {
case 'average':
return (
<svg
className="inline"
width={width || size}
height={height || size}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<Average />
</svg>
);
case 'bad':
return (
<svg
className="inline"
width={width || size}
height={height || size}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<Bad />
</svg>
);
default:
return (
<svg
className="inline"
width={width || size}
height={height || size}
viewBox="0 0 512 512"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<Good />
</svg>
);
}
};
export default AnilistStat;
================================================
FILE: app/assets/icons/AnimeIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
fill={color}
d="M18.223 3.086a1.25 1.25 0 0 1 0 1.768L17.08 5.996h1.17A3.75 3.75 0 0 1 22 9.747v7.5a3.75 3.75 0 0 1-3.75 3.75H5.75A3.75 3.75 0 0 1 2 17.247v-7.5a3.75 3.75 0 0 1 3.75-3.75h1.166L5.775 4.855a1.25 1.25 0 1 1 1.767-1.768l2.652 2.652c.079.079.145.165.198.257h3.213c.053-.092.12-.18.199-.258l2.651-2.652a1.25 1.25 0 0 1 1.768 0zm.027 5.42H5.75a1.25 1.25 0 0 0-1.247 1.157l-.003.094v7.5c0 .659.51 1.199 1.157 1.246l.093.004h12.5a1.25 1.25 0 0 0 1.247-1.157l.003-.093v-7.5c0-.69-.56-1.25-1.25-1.25zm-10 2.5c.69 0 1.25.56 1.25 1.25v1.25a1.25 1.25 0 1 1-2.5 0v-1.25c0-.69.56-1.25 1.25-1.25zm7.5 0c.69 0 1.25.56 1.25 1.25v1.25a1.25 1.25 0 1 1-2.5 0v-1.25c0-.69.56-1.25 1.25-1.25z"
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
fill={color}
d="M7.172 2.757L10.414 6h3.171l3.243-3.242a1 1 0 0 1 1.415 1.415L16.414 6H18.5A3.5 3.5 0 0 1 22 9.5v8a3.5 3.5 0 0 1-3.5 3.5h-13A3.5 3.5 0 0 1 2 17.5v-8A3.5 3.5 0 0 1 5.5 6h2.085L5.757 4.171a1 1 0 0 1 1.415-1.415zM18.5 8h-13a1.5 1.5 0 0 0-1.493 1.356L4 9.5v8a1.5 1.5 0 0 0 1.356 1.493L5.5 19h13a1.5 1.5 0 0 0 1.493-1.356L20 17.5v-8A1.5 1.5 0 0 0 18.5 8zM8 11a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1zm8 0a1 1 0 0 1 1 1v2a1 1 0 0 1-2 0v-2a1 1 0 0 1 1-1z"
/>
</g>
);
interface IAnimeProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Anime = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IAnimeProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Anime.displayName = 'AnimeIcon';
export default Anime;
================================================
FILE: app/assets/icons/ArrowIcon.tsx
================================================
const Right = ({ color }: { color: string }) => (
<path
d="M8.91156 20.6695C8.72156 20.6695 8.53156 20.5995 8.38156 20.4495C8.09156 20.1595 8.09156 19.6795 8.38156 19.3895L14.9016 12.8695C15.3816 12.3895 15.3816 11.6095 14.9016 11.1295L8.38156 4.60953C8.09156 4.31953 8.09156 3.83953 8.38156 3.54953C8.67156 3.25953 9.15156 3.25953 9.44156 3.54953L15.9616 10.0695C16.4716 10.5795 16.7616 11.2695 16.7616 11.9995C16.7616 12.7295 16.4816 13.4195 15.9616 13.9295L9.44156 20.4495C9.29156 20.5895 9.10156 20.6695 8.91156 20.6695Z"
fill={color}
/>
);
const Left = ({ color }: { color: string }) => (
<path
d="M15.0013 20.6695C14.8113 20.6695 14.6213 20.5995 14.4713 20.4495L7.95125 13.9295C6.89125 12.8695 6.89125 11.1295 7.95125 10.0695L14.4713 3.54953C14.7613 3.25953 15.2413 3.25953 15.5312 3.54953C15.8212 3.83953 15.8212 4.31953 15.5312 4.60953L9.01125 11.1295C8.53125 11.6095 8.53125 12.3895 9.01125 12.8695L15.5312 19.3895C15.8212 19.6795 15.8212 20.1595 15.5312 20.4495C15.3813 20.5895 15.1912 20.6695 15.0013 20.6695Z"
fill={color}
/>
);
const Up = ({ color }: { color: string }) => (
<path
d="M19.9195 15.7981C19.7295 15.7981 19.5395 15.7281 19.3895 15.5781L12.8695 9.05813C12.3895 8.57813 11.6095 8.57813 11.1295 9.05813L4.60953 15.5781C4.31953 15.8681 3.83953 15.8681 3.54953 15.5781C3.25953 15.2881 3.25953 14.8081 3.54953 14.5181L10.0695 7.99812C11.1295 6.93813 12.8595 6.93813 13.9295 7.99812L20.4495 14.5181C20.7395 14.8081 20.7395 15.2881 20.4495 15.5781C20.2995 15.7181 20.1095 15.7981 19.9195 15.7981Z"
fill={color}
/>
);
const Down = ({ color }: { color: string }) => (
<path
d="M11.9995 16.8006C11.2995 16.8006 10.5995 16.5306 10.0695 16.0006L3.54953 9.48062C3.25953 9.19062 3.25953 8.71062 3.54953 8.42063C3.83953 8.13063 4.31953 8.13063 4.60953 8.42063L11.1295 14.9406C11.6095 15.4206 12.3895 15.4206 12.8695 14.9406L19.3895 8.42063C19.6795 8.13063 20.1595 8.13063 20.4495 8.42063C20.7395 8.71062 20.7395 9.19062 20.4495 9.48062L13.9295 16.0006C13.3995 16.5306 12.6995 16.8006 11.9995 16.8006Z"
fill={color}
/>
);
interface IArrowProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The direction of the icon
* @default 'right'
* @type 'right' | 'left' | 'up' | 'down'
*/
direction?: 'right' | 'left' | 'up' | 'down';
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Arrow = ({
fill = 'currentColor',
direction = 'right',
size = 24,
height = 24,
width = 24,
...props
}: IArrowProps) => {
switch (direction) {
case 'right':
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Right color={fill} />
</svg>
);
case 'left':
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Left color={fill} />
</svg>
);
case 'up':
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Up color={fill} />
</svg>
);
case 'down':
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Down color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Right color={fill} />
</svg>
);
}
};
Arrow.displayName = 'ArrowIcon';
export default Arrow;
================================================
FILE: app/assets/icons/BrushIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g data-name="Layer 2">
<g data-name="brush">
<rect width="24" height="24" opacity="0" />
<path
d="M7.12 12.55a4 4 0 0 0-3.07 3.86v3.11a.47.47 0 0 0 .48.48l3.24-.06a3.78 3.78 0 0 0 3.44-2.2 3.65 3.65 0 0 0-4.09-5.19z"
fill={color}
/>
<path
d="M19.26 4.46a2.14 2.14 0 0 0-2.88.21L10 11.08a.47.47 0 0 0 0 .66L12.25 14a.47.47 0 0 0 .66 0l6.49-6.47a2.06 2.06 0 0 0 .6-1.47 2 2 0 0 0-.74-1.6z"
fill={color}
/>
</g>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g data-name="Layer 2">
<g data-name="brush">
<rect width="24" height="24" opacity="0" />
<path
d="M20 6.83a2.76 2.76 0 0 0-.82-2 2.89 2.89 0 0 0-4 0l-6.6 6.6h-.22a4.42 4.42 0 0 0-4.3 4.31L4 19a1 1 0 0 0 .29.73A1.05 1.05 0 0 0 5 20l3.26-.06a4.42 4.42 0 0 0 4.31-4.3v-.23l6.61-6.6A2.74 2.74 0 0 0 20 6.83zM8.25 17.94L6 18v-2.23a2.4 2.4 0 0 1 2.4-2.36 2.15 2.15 0 0 1 2.15 2.19 2.4 2.4 0 0 1-2.3 2.34zm9.52-10.55l-5.87 5.87a4.55 4.55 0 0 0-.52-.64 3.94 3.94 0 0 0-.64-.52l5.87-5.86a.84.84 0 0 1 1.16 0 .81.81 0 0 1 .23.59.79.79 0 0 1-.23.56z"
fill={color}
strokeWidth={strokeWidth}
/>
</g>
</g>
);
interface IBrushProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Brush = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IBrushProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Brush.displayName = 'BrushIcon';
export default Brush;
================================================
FILE: app/assets/icons/CategoryIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2 2)">
<path
d="M14.081,20a2.549,2.549,0,0,1-2.541-2.56V14.031a2.543,2.543,0,0,1,2.541-2.561h3.38A2.549,2.549,0,0,1,20,14.031v3.408A2.554,2.554,0,0,1,17.46,20ZM2.54,20A2.555,2.555,0,0,1,0,17.439V14.031A2.549,2.549,0,0,1,2.54,11.47H5.92a2.543,2.543,0,0,1,2.54,2.561v3.408A2.548,2.548,0,0,1,5.92,20ZM14.081,8.53A2.542,2.542,0,0,1,11.54,5.97V2.561A2.549,2.549,0,0,1,14.081,0h3.38A2.554,2.554,0,0,1,20,2.561V5.97a2.548,2.548,0,0,1-2.54,2.56ZM2.54,8.53A2.548,2.548,0,0,1,0,5.97V2.561A2.555,2.555,0,0,1,2.54,0H5.92A2.549,2.549,0,0,1,8.46,2.561V5.97A2.542,2.542,0,0,1,5.92,8.53Z"
transform="translate(0 0)"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2 2)">
<path
d="M2.449,0H5.716A2.459,2.459,0,0,1,8.163,2.47V5.764a2.46,2.46,0,0,1-2.448,2.47H2.449A2.46,2.46,0,0,1,0,5.764V2.47A2.46,2.46,0,0,1,2.449,0Z"
transform="translate(11.837 0)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M2.449,0H5.714A2.46,2.46,0,0,1,8.163,2.47V5.764a2.46,2.46,0,0,1-2.449,2.47H2.449A2.46,2.46,0,0,1,0,5.764V2.47A2.46,2.46,0,0,1,2.449,0Z"
transform="translate(0 0)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M2.449,0H5.714A2.46,2.46,0,0,1,8.163,2.471V5.764a2.46,2.46,0,0,1-2.449,2.47H2.449A2.46,2.46,0,0,1,0,5.764V2.471A2.46,2.46,0,0,1,2.449,0Z"
transform="translate(0 11.766)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M2.449,0H5.716A2.46,2.46,0,0,1,8.163,2.471V5.764a2.459,2.459,0,0,1-2.448,2.47H2.449A2.46,2.46,0,0,1,0,5.764V2.471A2.46,2.46,0,0,1,2.449,0Z"
transform="translate(11.837 11.766)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface ICategoryProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The class name of the icon
* @default ''
* @type string
* */
className?: string;
}
const Category = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: ICategoryProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={2} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Category.displayName = 'CategoryIcon';
export default Category;
================================================
FILE: app/assets/icons/ChevronDownIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(6 7)">
<path
d="M4.869,9.631c-.058-.057-.306-.27-.51-.469a21.69,21.69,0,0,1-4.024-5.8A4.617,4.617,0,0,1,0,2.188a1.933,1.933,0,0,1,.218-.9A1.874,1.874,0,0,1,1.122.5,9.84,9.84,0,0,1,2.186.242,23.979,23.979,0,0,1,5.992,0,27.724,27.724,0,0,1,9.681.213a8.495,8.495,0,0,1,1.327.341A1.785,1.785,0,0,1,12,2.132v.057a4.879,4.879,0,0,1-.409,1.321A21.69,21.69,0,0,1,7.625,9.177a5.66,5.66,0,0,1-.554.482A1.783,1.783,0,0,1,6.007,10a1.875,1.875,0,0,1-1.138-.369"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(5 8.5)">
<path
d="M14,0,7,7,0,0"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IChevronDownProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const ChevronDown = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IChevronDownProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
ChevronDown.displayName = 'ChevronDownIcon';
export default ChevronDown;
================================================
FILE: app/assets/icons/ChevronLeftIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(7 6)">
<path
d="M.369,4.869c.057-.058.27-.306.469-.51A21.69,21.69,0,0,1,6.633.335,4.617,4.617,0,0,1,7.812,0a1.933,1.933,0,0,1,.9.218,1.874,1.874,0,0,1,.795.9,9.84,9.84,0,0,1,.256,1.064A23.979,23.979,0,0,1,10,5.992a27.724,27.724,0,0,1-.213,3.689,8.495,8.495,0,0,1-.341,1.327A1.785,1.785,0,0,1,7.868,12H7.812a4.879,4.879,0,0,1-1.321-.409A21.69,21.69,0,0,1,.823,7.625a5.66,5.66,0,0,1-.482-.554A1.783,1.783,0,0,1,0,6.007,1.875,1.875,0,0,1,.369,4.869"
transform="translate(0)"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(15.5 5) rotate(90)">
<path
d="M14,0,7,7,0,0"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IChevronLeftProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const ChevronLeft = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IChevronLeftProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
ChevronLeft.displayName = 'ChevronLeftIcon';
export default ChevronLeft;
================================================
FILE: app/assets/icons/ChevronRightIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(7 6)">
<path
d="M9.631,7.131c-.057.058-.27.306-.469.51a21.69,21.69,0,0,1-5.8,4.024A4.617,4.617,0,0,1,2.188,12a1.933,1.933,0,0,1-.9-.218,1.874,1.874,0,0,1-.795-.9A9.84,9.84,0,0,1,.242,9.814,23.979,23.979,0,0,1,0,6.008,27.724,27.724,0,0,1,.213,2.319,8.495,8.495,0,0,1,.554.992,1.785,1.785,0,0,1,2.132,0h.057A4.879,4.879,0,0,1,3.509.409,21.69,21.69,0,0,1,9.177,4.375a5.66,5.66,0,0,1,.482.554A1.783,1.783,0,0,1,10,5.993a1.875,1.875,0,0,1-.369,1.138"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(8.5 19) rotate(-90)">
<path
d="M14,0,7,7,0,0"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IChevronRightProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const ChevronRight = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IChevronRightProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
ChevronRight.displayName = 'ChevronRightIcon';
export default ChevronRight;
================================================
FILE: app/assets/icons/ChevronUpIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(6 7)">
<path
d="M7.131.369c.058.057.306.27.51.469a21.69,21.69,0,0,1,4.024,5.8A4.617,4.617,0,0,1,12,7.812a1.933,1.933,0,0,1-.218.9,1.874,1.874,0,0,1-.9.795,9.84,9.84,0,0,1-1.064.256A23.979,23.979,0,0,1,6.008,10a27.724,27.724,0,0,1-3.689-.213A8.495,8.495,0,0,1,.992,9.446,1.785,1.785,0,0,1,0,7.868V7.812A4.879,4.879,0,0,1,.409,6.491,21.69,21.69,0,0,1,4.375.823,5.66,5.66,0,0,1,4.929.341,1.783,1.783,0,0,1,5.993,0,1.875,1.875,0,0,1,7.131.369"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(19 15.5) rotate(180)">
<path
d="M14,0,7,7,0,0"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IChevronUpProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const ChevronUp = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IChevronUpProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
ChevronUp.displayName = 'ChevronUpIcon';
export default ChevronUp;
================================================
FILE: app/assets/icons/CloseIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2.5 2)">
<path
d="M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM15.36 14.3C15.65 14.59 15.65 15.07 15.36 15.36C15.21 15.51 15.02 15.58 14.83 15.58C14.64 15.58 14.45 15.51 14.3 15.36L12 13.06L9.7 15.36C9.55 15.51 9.36 15.58 9.17 15.58C8.98 15.58 8.79 15.51 8.64 15.36C8.35 15.07 8.35 14.59 8.64 14.3L10.94 12L8.64 9.7C8.35 9.41 8.35 8.93 8.64 8.64C8.93 8.35 9.41 8.35 9.7 8.64L12 10.94L14.3 8.64C14.59 8.35 15.07 8.35 15.36 8.64C15.65 8.93 15.65 9.41 15.36 9.7L13.06 12L15.36 14.3Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<path
d="M17.6585 4.92888C18.049 4.53836 18.6822 4.53835 19.0727 4.92888C19.4632 5.3194 19.4632 5.95257 19.0727 6.34309L13.4158 12L19.0727 17.6568C19.4632 18.0473 19.4632 18.6805 19.0727 19.071C18.6822 19.4615 18.049 19.4615 17.6585 19.071L12.0016 13.4142L6.34481 19.071C6.3387 19.0771 6.33254 19.0831 6.32632 19.089C5.93455 19.4614 5.31501 19.4554 4.93059 19.071C4.6377 18.7781 4.56447 18.3487 4.71092 17.9876C4.75973 17.8672 4.83296 17.7544 4.93059 17.6568L10.5874 12L4.93059 6.34314C4.54006 5.95262 4.54006 5.31945 4.93059 4.92893C5.32111 4.5384 5.95428 4.5384 6.3448 4.92893L12.0016 10.5857L17.6585 4.92888Z"
fill={color}
/>
);
interface ICloseProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The class name of the icon
* @default ''
* @type string
* */
className?: string;
}
const Close = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: ICloseProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Close.displayName = 'CloseIcon';
export default Close;
================================================
FILE: app/assets/icons/DiscoverIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M20.9808 3.02084C20.1108 2.15084 18.8808 1.81084 17.6908 2.11084L7.89084 4.56084C6.24084 4.97084 4.97084 6.25084 4.56084 7.89084L2.11084 17.7008C1.81084 18.8908 2.15084 20.1208 3.02084 20.9908C3.68084 21.6408 4.55084 22.0008 5.45084 22.0008C5.73084 22.0008 6.02084 21.9708 6.30084 21.8908L16.1108 19.4408C17.7508 19.0308 19.0308 17.7608 19.4408 16.1108L21.8908 6.30084C22.1908 5.11084 21.8508 3.88084 20.9808 3.02084ZM12.0008 15.8808C9.86084 15.8808 8.12084 14.1408 8.12084 12.0008C8.12084 9.86084 9.86084 8.12084 12.0008 8.12084C14.1408 8.12084 15.8808 9.86084 15.8808 12.0008C15.8808 14.1408 14.1408 15.8808 12.0008 15.8808Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M4.90926 22.8207C3.81926 22.8207 2.88926 22.4707 2.20926 21.7907C1.23926 20.8207 0.939261 19.3407 1.36926 17.6207L3.84926 7.69075C4.27926 5.97075 5.95926 4.30075 7.66926 3.87075L17.5993 1.39075C19.3193 0.960746 20.7993 1.26075 21.7693 2.23075C22.7393 3.20075 23.0393 4.68075 22.6093 6.40075L20.1293 16.3307C19.6993 18.0507 18.0193 19.7207 16.3093 20.1507L6.37926 22.6307C5.86926 22.7507 5.37926 22.8207 4.90926 22.8207ZM17.9793 2.83075L8.04926 5.32075C6.87926 5.61075 5.60926 6.88075 5.30926 8.05075L2.82926 17.9807C2.52926 19.1707 2.68926 20.1407 3.26926 20.7307C3.84926 21.3107 4.82926 21.4707 6.01926 21.1707L15.9493 18.6907C17.1193 18.4007 18.3893 17.1207 18.6793 15.9607L21.1593 6.03075C21.4593 4.84075 21.2993 3.87075 20.7193 3.28075C20.1393 2.69075 19.1693 2.54075 17.9793 2.83075Z"
fill={color}
/>
<path
d="M12 16.25C9.66 16.25 7.75 14.34 7.75 12C7.75 9.66 9.66 7.75 12 7.75C14.34 7.75 16.25 9.66 16.25 12C16.25 14.34 14.34 16.25 12 16.25ZM12 9.25C10.48 9.25 9.25 10.48 9.25 12C9.25 13.52 10.48 14.75 12 14.75C13.52 14.75 14.75 13.52 14.75 12C14.75 10.48 13.52 9.25 12 9.25Z"
fill={color}
/>
</g>
);
interface IDiscoverProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Discover = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IDiscoverProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Discover.displayName = 'DiscoverIcon';
export default Discover;
================================================
FILE: app/assets/icons/ExpandIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="scale(-1 1) translate(-23 -1)">
<path
d="M11 16.15V18.85C11 21.1 10.1 22 7.85 22H5.15C2.9 22 2 21.1 2 18.85V16.15C2 13.9 2.9 13 5.15 13H7.85C10.1 13 11 13.9 11 16.15Z"
fill={color}
/>
<path
d="M16.48 2H8.52C5.47 2 3 4.47 3 7.52V10.5C3 11.05 3.45 11.5 4 11.5H8.5C10.71 11.5 12.5 13.29 12.5 15.5V20C12.5 20.55 12.95 21 13.5 21H16.48C19.93 21 22 18.94 22 15.48V7.52C22 4.47 19.53 2 16.48 2ZM18.76 9.99C18.76 10.4 18.42 10.74 18.01 10.74C17.6 10.74 17.26 10.4 17.26 9.99V7.79L13.53 11.53C13.38 11.68 13.19 11.75 13 11.75C12.81 11.75 12.62 11.68 12.47 11.53C12.18 11.24 12.18 10.76 12.47 10.47L16.2 6.72H14C13.58 6.72 13.25 6.39 13.25 5.97C13.25 5.56 13.58 5.22 14 5.22H18.01C18.1 5.22 18.19 5.25 18.27 5.28C18.3 5.29 18.32 5.3 18.34 5.31C18.4 5.34 18.45 5.37 18.5 5.42C18.52 5.43 18.54 5.45 18.56 5.47C18.61 5.53 18.65 5.59 18.69 5.66C18.69 5.67 18.7 5.68 18.7 5.69C18.74 5.77 18.75 5.86 18.75 5.95C18.76 5.96 18.76 5.96 18.76 5.97V9.99Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="scale(-1 1) translate(-23 -1)">
<path
d="M2 9.98V9C2 4 4 2 9 2H15C20 2 22 4 22 9V15C22 20 20 22 15 22H14"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M13 11L18.01 5.97998H14"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M18.01 5.97998V9.98998"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M11 16.15V18.85C11 21.1 10.1 22 7.85 22H5.15C2.9 22 2 21.1 2 18.85V16.15C2 13.9 2.9 13 5.15 13H7.85C10.1 13 11 13.9 11 16.15Z"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
);
interface IExpandProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Expand = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IExpandProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Expand.displayName = 'ExpandIcon';
export default Expand;
================================================
FILE: app/assets/icons/FilterIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2 3)">
<path
d="M13.122,14.4a3.439,3.439,0,1,1,3.439,3.379A3.41,3.41,0,0,1,13.122,14.4ZM1.508,15.921a1.482,1.482,0,1,1,0-2.963H8.083a1.482,1.482,0,1,1,0,2.963ZM0,3.379A3.409,3.409,0,0,1,3.439,0,3.409,3.409,0,0,1,6.878,3.379,3.409,3.409,0,0,1,3.439,6.758,3.41,3.41,0,0,1,0,3.379ZM11.918,4.86a1.481,1.481,0,1,1,0-2.962h6.575a1.481,1.481,0,1,1,0,2.962Z"
transform="translate(0 0)"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2 2.5)">
<path
d="M7.234.588H0"
transform="translate(0.883 14.898)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M5.76,2.88A2.88,2.88,0,1,1,2.88,0,2.88,2.88,0,0,1,5.76,2.88Z"
transform="translate(13.358 12.607)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M0,.588H7.235"
transform="translate(11.883 3.174)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M0,2.88A2.88,2.88,0,1,0,2.88,0,2.879,2.879,0,0,0,0,2.88Z"
transform="translate(0.883 0.882)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IFilterProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Filter = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IFilterProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Filter.displayName = 'FilterIcon';
export default Filter;
================================================
FILE: app/assets/icons/FlipIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M24 6V42"
stroke={color}
strokeWidth={1.5}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4 34L16 12V34H4Z"
fill={color}
stroke={color}
strokeWidth={1.5}
strokeLinejoin="round"
/>
<path
d="M44 34H32V12L44 34Z"
fill={color}
stroke={color}
strokeWidth={1.5}
strokeLinejoin="round"
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M24 6V42"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M4 34L16 12V34H4Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
d="M44 34H32V12L44 34Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
</g>
);
interface IFlipProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Flip = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IFlipProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={2} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Flip.displayName = 'FlipIcon';
export default Flip;
================================================
FILE: app/assets/icons/GlobalIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M7.64859 20.9098C7.61859 20.9098 7.57859 20.9298 7.54859 20.9298C5.60859 19.9698 4.02859 18.3798 3.05859 16.4398C3.05859 16.4098 3.07859 16.3698 3.07859 16.3398C4.29859 16.6998 5.55859 16.9698 6.80859 17.1798C7.02859 18.4398 7.28859 19.6898 7.64859 20.9098Z"
fill={color}
/>
<path
d="M20.9391 16.4498C19.9491 18.4398 18.2991 20.0498 16.2891 21.0198C16.6691 19.7498 16.9891 18.4698 17.1991 17.1798C18.4591 16.9698 19.6991 16.6998 20.9191 16.3398C20.9091 16.3798 20.9391 16.4198 20.9391 16.4498Z"
fill={color}
/>
<path
d="M21.0191 7.71047C19.7591 7.33047 18.4891 7.02047 17.1991 6.80047C16.9891 5.51047 16.6791 4.23047 16.2891 2.98047C18.3591 3.97047 20.0291 5.64047 21.0191 7.71047Z"
fill={color}
/>
<path
d="M7.65047 3.08859C7.29047 4.30859 7.03047 5.54859 6.82047 6.80859C5.53047 7.00859 4.25047 7.32859 2.98047 7.70859C3.95047 5.69859 5.56047 4.04859 7.55047 3.05859C7.58047 3.05859 7.62047 3.08859 7.65047 3.08859Z"
fill={color}
/>
<path
d="M15.4917 6.59C13.1717 6.33 10.8317 6.33 8.51172 6.59C8.76172 5.22 9.08172 3.85 9.53172 2.53C9.55172 2.45 9.54172 2.39 9.55172 2.31C10.3417 2.12 11.1517 2 12.0017 2C12.8417 2 13.6617 2.12 14.4417 2.31C14.4517 2.39 14.4517 2.45 14.4717 2.53C14.9217 3.86 15.2417 5.22 15.4917 6.59Z"
fill={color}
/>
<path
d="M6.59 15.4917C5.21 15.2417 3.85 14.9217 2.53 14.4717C2.45 14.4517 2.39 14.4617 2.31 14.4517C2.12 13.6617 2 12.8517 2 12.0017C2 11.1617 2.12 10.3417 2.31 9.56172C2.39 9.55172 2.45 9.55172 2.53 9.53172C3.86 9.09172 5.21 8.76172 6.59 8.51172C6.34 10.8317 6.34 13.1717 6.59 15.4917Z"
fill={color}
/>
<path
d="M22.0002 12.0017C22.0002 12.8517 21.8802 13.6617 21.6902 14.4517C21.6102 14.4617 21.5502 14.4517 21.4702 14.4717C20.1402 14.9117 18.7802 15.2417 17.4102 15.4917C17.6702 13.1717 17.6702 10.8317 17.4102 8.51172C18.7802 8.76172 20.1502 9.08172 21.4702 9.53172C21.5502 9.55172 21.6102 9.56172 21.6902 9.56172C21.8802 10.3517 22.0002 11.1617 22.0002 12.0017Z"
fill={color}
/>
<path
d="M15.4917 17.4102C15.2417 18.7902 14.9217 20.1502 14.4717 21.4702C14.4517 21.5502 14.4517 21.6102 14.4417 21.6902C13.6617 21.8802 12.8417 22.0002 12.0017 22.0002C11.1517 22.0002 10.3417 21.8802 9.55172 21.6902C9.54172 21.6102 9.55172 21.5502 9.53172 21.4702C9.09172 20.1402 8.76172 18.7902 8.51172 17.4102C9.67172 17.5402 10.8317 17.6302 12.0017 17.6302C13.1717 17.6302 14.3417 17.5402 15.4917 17.4102Z"
fill={color}
/>
<path
d="M15.7633 15.7633C13.2622 16.0789 10.7378 16.0789 8.23667 15.7633C7.92111 13.2622 7.92111 10.7378 8.23667 8.23667C10.7378 7.92111 13.2622 7.92111 15.7633 8.23667C16.0789 10.7378 16.0789 13.2622 15.7633 15.7633Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M12 22.75C6.07 22.75 1.25 17.93 1.25 12C1.25 6.07 6.07 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 17.93 17.93 22.75 12 22.75ZM12 2.75C6.9 2.75 2.75 6.9 2.75 12C2.75 17.1 6.9 21.25 12 21.25C17.1 21.25 21.25 17.1 21.25 12C21.25 6.9 17.1 2.75 12 2.75Z"
fill={color}
/>
<path
d="M8.99828 21.75H7.99828C7.58828 21.75 7.24828 21.41 7.24828 21C7.24828 20.59 7.56828 20.26 7.97828 20.25C6.40828 14.89 6.40828 9.11 7.97828 3.75C7.56828 3.74 7.24828 3.41 7.24828 3C7.24828 2.59 7.58828 2.25 7.99828 2.25H8.99828C9.23828 2.25 9.46828 2.37 9.60828 2.56C9.74828 2.76 9.78828 3.01 9.70828 3.24C7.82828 8.89 7.82828 15.11 9.70828 20.77C9.78828 21 9.74828 21.25 9.60828 21.45C9.46828 21.63 9.23828 21.75 8.99828 21.75Z"
fill={color}
/>
<path
d="M14.9984 21.7507C14.9184 21.7507 14.8384 21.7407 14.7584 21.7107C14.3684 21.5807 14.1484 21.1507 14.2884 20.7607C16.1684 15.1107 16.1684 8.89067 14.2884 3.23067C14.1584 2.84067 14.3684 2.41067 14.7584 2.28067C15.1584 2.15067 15.5784 2.36067 15.7084 2.75067C17.6984 8.71067 17.6984 15.2707 15.7084 21.2207C15.6084 21.5507 15.3084 21.7507 14.9984 21.7507Z"
fill={color}
/>
<path
d="M12 17.2008C9.21 17.2008 6.43 16.8108 3.75 16.0208C3.74 16.4208 3.41 16.7508 3 16.7508C2.59 16.7508 2.25 16.4108 2.25 16.0008V15.0008C2.25 14.7608 2.37 14.5308 2.56 14.3908C2.76 14.2508 3.01 14.2108 3.24 14.2908C8.89 16.1708 15.12 16.1708 20.77 14.2908C21 14.2108 21.25 14.2508 21.45 14.3908C21.65 14.5308 21.76 14.7608 21.76 15.0008V16.0008C21.76 16.4108 21.42 16.7508 21.01 16.7508C20.6 16.7508 20.27 16.4308 20.26 16.0208C17.57 16.8108 14.79 17.2008 12 17.2008Z"
fill={color}
/>
<path
d="M20.9998 9.74938C20.9198 9.74938 20.8398 9.73938 20.7598 9.70938C15.1098 7.82938 8.87978 7.82938 3.22978 9.70938C2.82978 9.83938 2.40978 9.62937 2.27978 9.23937C2.15978 8.83937 2.36978 8.41938 2.75978 8.28938C8.71978 6.29938 15.2798 6.29938 21.2298 8.28938C21.6198 8.41938 21.8398 8.84937 21.6998 9.23937C21.6098 9.54937 21.3098 9.74938 20.9998 9.74938Z"
fill={color}
/>
</g>
);
interface IGlobalProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Global = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IGlobalProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Global.displayName = 'GlobalIcon';
export default Global;
================================================
FILE: app/assets/icons/HistoryIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<path
fill={color}
d="M19.25 12A7.25 7.25 0 0 0 7.584 6.25h.666a1 1 0 0 1 0 2h-3a1 1 0 0 1-1-1V7h-.034l.034-.052V4.25a1 1 0 0 1 2 0v.504A9.21 9.21 0 0 1 12 2.75a9.25 9.25 0 1 1-9.182 8.12c.063-.512.516-.87 1.032-.87c.59 0 1.017.569.949 1.156A7.25 7.25 0 1 0 19.25 12ZM13 8a1 1 0 1 0-2 0v5a1 1 0 0 0 1 1h3a1 1 0 1 0 0-2h-2V8Z"
/>
);
const Light = ({ color }: { color: string }) => (
<path
fill={color}
d="M19.5 12A7.5 7.5 0 0 0 6.9 6.5h1.35a.75.75 0 0 1 0 1.5h-3a.75.75 0 0 1-.75-.75v-3a.75.75 0 0 1 1.5 0v1.042a9 9 0 1 1-2.895 5.331a.749.749 0 0 1 .752-.623c.46 0 .791.438.724.892A7.5 7.5 0 1 0 19.5 12Zm-7-4.25a.75.75 0 0 0-1.5 0v4.5c0 .414.336.75.75.75h2.5a.75.75 0 0 0 0-1.5H12.5V7.75Z"
/>
);
interface IHistoryProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The class name of the icon
* @default ''
* @type string
* */
className?: string;
}
const History = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IHistoryProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
History.displayName = 'HistoryIcon';
export default History;
================================================
FILE: app/assets/icons/HomeIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2.5 2)">
<path
d="M6.635,18.773V15.716A1.419,1.419,0,0,1,8.058,14.3h2.874a1.429,1.429,0,0,1,1.007.414,1.408,1.408,0,0,1,.417,1v3.058a1.213,1.213,0,0,0,.356.867,1.231,1.231,0,0,0,.871.36h1.961a3.46,3.46,0,0,0,2.443-1A3.41,3.41,0,0,0,19,16.578V7.867a2.473,2.473,0,0,0-.9-1.9L11.434.676A3.1,3.1,0,0,0,7.485.747L.967,5.965A2.474,2.474,0,0,0,0,7.867v8.7A3.444,3.444,0,0,0,3.456,20H5.372a1.231,1.231,0,0,0,1.236-1.218Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2.5 2)">
<path
d="M6.657,18.771V15.7a1.426,1.426,0,0,1,1.424-1.419h2.886A1.426,1.426,0,0,1,12.4,15.7h0v3.076A1.225,1.225,0,0,0,13.6,20h1.924A3.456,3.456,0,0,0,19,16.562h0V7.838a2.439,2.439,0,0,0-.962-1.9L11.458.685a3.18,3.18,0,0,0-3.944,0L.962,5.943A2.42,2.42,0,0,0,0,7.847v8.714A3.456,3.456,0,0,0,3.473,20H5.4a1.235,1.235,0,0,0,1.241-1.229h0"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IHomeProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Home = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IHomeProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Home.displayName = 'HomeIcon';
export default Home;
================================================
FILE: app/assets/icons/InfoIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2 1.999)">
<path
d="M10,20a10,10,0,1,1,7.074-2.929A10.011,10.011,0,0,1,10,20Zm0-7.069a.871.871,0,0,0-.87.869.875.875,0,1,0,.87-.869Zm0-7.6a.892.892,0,0,0-.88.88v4.42a.875.875,0,0,0,1.751,0V6.21A.876.876,0,0,0,10,5.33Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2 2)">
<path
d="M9.25,0A9.25,9.25,0,1,1,0,9.25,9.25,9.25,0,0,1,9.25,0Z"
transform="translate(0.75 0.75)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M.5,0V4.419"
transform="translate(9.495 6.204)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M.5.5H.5"
transform="translate(9.5 13.296)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IInfoProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Info = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IInfoProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Info.displayName = 'InfoIcon';
export default Info;
================================================
FILE: app/assets/icons/LibraryIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<path
fill={color}
d="M3 6.25A3.25 3.25 0 0 1 6.25 3h9a3.25 3.25 0 0 1 3.25 3.25v9c0 .646-.189 1.248-.514 1.755l-5.692-5.376a2.25 2.25 0 0 0-3.09 0l-5.69 5.375A3.235 3.235 0 0 1 3 15.25v-9Zm10.747 2.746a1.248 1.248 0 1 0 0-2.496a1.248 1.248 0 0 0 0 2.496Zm-2.483 3.724l5.642 5.327a3.235 3.235 0 0 1-1.656.453h-9a3.235 3.235 0 0 1-1.656-.453l5.64-5.327a.75.75 0 0 1 1.03 0ZM8.75 21a3.247 3.247 0 0 1-2.74-1.5h9.74a3.75 3.75 0 0 0 3.75-3.75V6.011a3.247 3.247 0 0 1 1.5 2.74v7a5.25 5.25 0 0 1-5.25 5.25h-7Z"
/>
);
const Light = ({ color }: { color: string }) => (
<path
fill={color}
d="M13.748 8.996a1.248 1.248 0 1 0 0-2.496a1.248 1.248 0 0 0 0 2.496ZM6.25 3A3.25 3.25 0 0 0 3 6.25v9a3.25 3.25 0 0 0 3.25 3.25h9a3.25 3.25 0 0 0 3.25-3.25v-9A3.25 3.25 0 0 0 15.25 3h-9ZM4.5 6.25c0-.966.784-1.75 1.75-1.75h9c.966 0 1.75.784 1.75 1.75v9c0 .231-.045.452-.126.654l-4.587-4.291a2.25 2.25 0 0 0-3.074 0l-4.587 4.29a1.745 1.745 0 0 1-.126-.653v-9Zm6.762 6.458l4.505 4.214c-.163.05-.337.078-.517.078h-9a1.73 1.73 0 0 1-.517-.078l4.504-4.214a.75.75 0 0 1 1.025 0ZM8.75 21a3.247 3.247 0 0 1-2.74-1.5h9.74a3.75 3.75 0 0 0 3.75-3.75V6.011a3.248 3.248 0 0 1 1.5 2.74v7A5.25 5.25 0 0 1 15.75 21h-7Z"
/>
);
interface ILibraryProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Library = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: ILibraryProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Library.displayName = 'LibraryIcon';
export default Library;
================================================
FILE: app/assets/icons/LogInIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H13.44L11.37 9.18C11.22 9.03 11.15 8.84 11.15 8.65C11.15 8.46 11.22 8.27 11.37 8.12C11.66 7.83 12.14 7.83 12.43 8.12L15.78 11.47C16.07 11.76 16.07 12.24 15.78 12.53L12.43 15.88C12.14 16.17 11.66 16.17 11.37 15.88C11.08 15.59 11.08 15.11 11.37 14.82L13.44 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z"
fill={color}
/>
<path
d="M2.75 11.25C2.34 11.25 2 11.59 2 12C2 12.41 2.34 12.75 2.75 12.75H9V11.25H2.75Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M15.2405 22.2705H15.1105C10.6705 22.2705 8.5305 20.5205 8.1605 16.6005C8.1205 16.1905 8.4205 15.8205 8.8405 15.7805C9.2505 15.7405 9.6205 16.0505 9.6605 16.4605C9.9505 19.6005 11.4305 20.7705 15.1205 20.7705H15.2505C19.3205 20.7705 20.7605 19.3305 20.7605 15.2605V8.74047C20.7605 4.67047 19.3205 3.23047 15.2505 3.23047H15.1205C11.4105 3.23047 9.9305 4.42047 9.6605 7.62047C9.6105 8.03047 9.2705 8.34047 8.8405 8.30047C8.4205 8.27047 8.1205 7.90047 8.1505 7.49047C8.4905 3.51047 10.6405 1.73047 15.1105 1.73047H15.2405C20.1505 1.73047 22.2505 3.83047 22.2505 8.74047V15.2605C22.2505 20.1705 20.1505 22.2705 15.2405 22.2705Z"
fill={color}
/>
<path
d="M14.88 12.75H2C1.59 12.75 1.25 12.41 1.25 12C1.25 11.59 1.59 11.25 2 11.25H14.88C15.29 11.25 15.63 11.59 15.63 12C15.63 12.41 15.3 12.75 14.88 12.75Z"
fill={color}
/>
<path
d="M12.6498 16.0998C12.4598 16.0998 12.2698 16.0298 12.1198 15.8798C11.8298 15.5898 11.8298 15.1098 12.1198 14.8198L14.9398 11.9998L12.1198 9.17984C11.8298 8.88984 11.8298 8.40984 12.1198 8.11984C12.4098 7.82984 12.8898 7.82984 13.1798 8.11984L16.5298 11.4698C16.8198 11.7598 16.8198 12.2398 16.5298 12.5298L13.1798 15.8798C13.0298 16.0298 12.8398 16.0998 12.6498 16.0998Z"
fill={color}
/>
</g>
);
interface ILogInProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const LogIn = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: ILogInProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
LogIn.displayName = 'LogInIcon';
export default LogIn;
================================================
FILE: app/assets/icons/LogOutIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M16.8 2H14.2C11 2 9 4 9 7.2V11.25H15.25C15.66 11.25 16 11.59 16 12C16 12.41 15.66 12.75 15.25 12.75H9V16.8C9 20 11 22 14.2 22H16.79C19.99 22 21.99 20 21.99 16.8V7.2C22 4 20 2 16.8 2Z"
fill={color}
/>
<path
d="M4.56141 11.2498L6.63141 9.17984C6.78141 9.02984 6.85141 8.83984 6.85141 8.64984C6.85141 8.45984 6.78141 8.25984 6.63141 8.11984C6.34141 7.82984 5.86141 7.82984 5.57141 8.11984L2.22141 11.4698C1.93141 11.7598 1.93141 12.2398 2.22141 12.5298L5.57141 15.8798C5.86141 16.1698 6.34141 16.1698 6.63141 15.8798C6.92141 15.5898 6.92141 15.1098 6.63141 14.8198L4.56141 12.7498H9.00141V11.2498H4.56141Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M15.2405 22.2705H15.1105C10.6705 22.2705 8.5305 20.5205 8.1605 16.6005C8.1205 16.1905 8.4205 15.8205 8.8405 15.7805C9.2405 15.7405 9.6205 16.0505 9.6605 16.4605C9.9505 19.6005 11.4305 20.7705 15.1205 20.7705H15.2505C19.3205 20.7705 20.7605 19.3305 20.7605 15.2605V8.74047C20.7605 4.67047 19.3205 3.23047 15.2505 3.23047H15.1205C11.4105 3.23047 9.9305 4.42047 9.6605 7.62047C9.6105 8.03047 9.2605 8.34047 8.8405 8.30047C8.4205 8.27047 8.1205 7.90047 8.1505 7.49047C8.4905 3.51047 10.6405 1.73047 15.1105 1.73047H15.2405C20.1505 1.73047 22.2505 3.83047 22.2505 8.74047V15.2605C22.2505 20.1705 20.1505 22.2705 15.2405 22.2705Z"
fill={color}
/>
<path
d="M15.0011 12.75H3.62109C3.21109 12.75 2.87109 12.41 2.87109 12C2.87109 11.59 3.21109 11.25 3.62109 11.25H15.0011C15.4111 11.25 15.7511 11.59 15.7511 12C15.7511 12.41 15.4111 12.75 15.0011 12.75Z"
fill={color}
/>
<path
d="M5.85141 16.0998C5.66141 16.0998 5.47141 16.0298 5.32141 15.8798L1.97141 12.5298C1.68141 12.2398 1.68141 11.7598 1.97141 11.4698L5.32141 8.11984C5.61141 7.82984 6.09141 7.82984 6.38141 8.11984C6.67141 8.40984 6.67141 8.88984 6.38141 9.17984L3.56141 11.9998L6.38141 14.8198C6.67141 15.1098 6.67141 15.5898 6.38141 15.8798C6.24141 16.0298 6.04141 16.0998 5.85141 16.0998Z"
fill={color}
/>
</g>
);
interface ILogOutProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const LogOut = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: ILogOutProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
LogOut.displayName = 'LogOutIcon';
export default LogOut;
================================================
FILE: app/assets/icons/MailEditIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M17 3H7C4 3 2 4.5 2 8V15C2 18.5 4 20 7 20H10.57C11.16 20 11.64 19.48 11.56 18.89C11.46 18.18 11.48 17.44 11.63 16.68C12.16 14.08 14.3 12.01 16.92 11.58C18.23 11.37 19.48 11.55 20.58 12.03C21.25 12.32 22 11.86 22 11.13V8C22 4.5 20 3 17 3ZM17.47 8.59L14.34 11.09C13.68 11.62 12.84 11.88 12 11.88C11.16 11.88 10.31 11.62 9.66 11.09L6.53 8.59C6.21 8.33 6.16 7.86 6.41 7.53C6.67 7.21 7.14 7.15 7.46 7.41L10.59 9.91C11.35 10.52 12.64 10.52 13.4 9.91L16.53 7.41C16.85 7.15 17.33 7.2 17.58 7.53C17.84 7.86 17.79 8.33 17.47 8.59Z"
fill={color}
/>
<path
d="M18 13C15.24 13 13 15.23 13 18C13 20.76 15.24 23 18 23C20.77 23 23 20.76 23 18C23 15.23 20.77 13 18 13ZM20.05 17.55L19.68 17.91L17.5 20.1C17.4 20.19 17.21 20.29 17.07 20.31L16.09 20.45C15.74 20.5 15.49 20.25 15.54 19.9L15.68 18.92C15.7 18.78 15.79 18.59 15.89 18.49L18.07 16.32L18.43 15.95C18.67 15.71 18.94 15.55 19.22 15.55C19.46 15.55 19.73 15.66 20.03 15.95C20.7 16.6 20.49 17.11 20.05 17.55Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M12 21.25H7C3.35 21.25 1.25 19.15 1.25 15.5V8.5C1.25 4.85 3.35 2.75 7 2.75H17C20.65 2.75 22.75 4.85 22.75 8.5V11.5C22.75 11.91 22.41 12.25 22 12.25C21.59 12.25 21.25 11.91 21.25 11.5V8.5C21.25 5.64 19.86 4.25 17 4.25H7C4.14 4.25 2.75 5.64 2.75 8.5V15.5C2.75 18.36 4.14 19.75 7 19.75H12C12.41 19.75 12.75 20.09 12.75 20.5C12.75 20.91 12.41 21.25 12 21.25Z"
fill={color}
/>
<path
d="M11.9988 12.868C11.1588 12.868 10.3088 12.608 9.6588 12.078L6.5288 9.578C6.2088 9.318 6.14881 8.84802 6.4088 8.52802C6.6688 8.20802 7.13879 8.15802 7.45879 8.40802L10.5888 10.908C11.3488 11.518 12.6388 11.518 13.3988 10.908L16.5288 8.40802C16.8488 8.14802 17.3188 8.19802 17.5788 8.52802C17.8388 8.84802 17.7888 9.328 17.4588 9.578L14.3288 12.078C13.6888 12.608 12.8388 12.868 11.9988 12.868Z"
fill={color}
/>
<path
d="M15.8196 21.7816C15.4396 21.7816 15.0796 21.6416 14.8196 21.3816C14.5096 21.0716 14.3696 20.6216 14.4396 20.1516L14.6296 18.8016C14.6796 18.4516 14.8896 18.0316 15.1396 17.7816L18.6796 14.2416C19.1596 13.7616 19.6296 13.5116 20.1396 13.4616C20.7596 13.4016 21.3796 13.6616 21.9596 14.2416C22.5396 14.8216 22.7996 15.4316 22.7396 16.0616C22.6896 16.5616 22.4296 17.0416 21.9596 17.5216L18.4196 21.0616C18.1696 21.3116 17.7496 21.5216 17.3996 21.5716L16.0495 21.7616C15.9695 21.7716 15.8996 21.7816 15.8196 21.7816ZM20.3096 14.9516C20.2996 14.9516 20.2896 14.9516 20.2796 14.9516C20.1396 14.9616 19.9496 15.0916 19.7396 15.3016L16.1996 18.8416C16.1696 18.8716 16.1196 18.9716 16.1196 19.0116L15.9396 20.2616L17.1896 20.0816C17.2296 20.0716 17.3295 20.0216 17.3595 19.9916L20.8996 16.4516C21.1096 16.2316 21.2396 16.0516 21.2496 15.9116C21.2696 15.7116 21.0696 15.4716 20.8996 15.3016C20.7396 15.1416 20.5096 14.9516 20.3096 14.9516Z"
fill={color}
/>
<path
d="M20.9206 18.2509C20.8506 18.2509 20.7806 18.2409 20.7206 18.2209C19.4006 17.8509 18.3506 16.8009 17.9806 15.4809C17.8706 15.0809 18.1006 14.6709 18.5006 14.5509C18.9006 14.4409 19.3106 14.6709 19.4206 15.0709C19.6506 15.8909 20.3006 16.5409 21.1206 16.7709C21.5206 16.8809 21.7506 17.3009 21.6406 17.7009C21.5506 18.0309 21.2506 18.2509 20.9206 18.2509Z"
fill={color}
/>
</g>
);
interface IMailEditProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const MailEdit = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IMailEditProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
MailEdit.displayName = 'MailEditIcon';
export default MailEdit;
================================================
FILE: app/assets/icons/MenuIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM17 17.25H7C6.59 17.25 6.25 16.91 6.25 16.5C6.25 16.09 6.59 15.75 7 15.75H17C17.41 15.75 17.75 16.09 17.75 16.5C17.75 16.91 17.41 17.25 17 17.25ZM17 12.75H7C6.59 12.75 6.25 12.41 6.25 12C6.25 11.59 6.59 11.25 7 11.25H17C17.41 11.25 17.75 11.59 17.75 12C17.75 12.41 17.41 12.75 17 12.75ZM17 8.25H7C6.59 8.25 6.25 7.91 6.25 7.5C6.25 7.09 6.59 6.75 7 6.75H17C17.41 6.75 17.75 7.09 17.75 7.5C17.75 7.91 17.41 8.25 17 8.25Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M21 7.75H3C2.59 7.75 2.25 7.41 2.25 7C2.25 6.59 2.59 6.25 3 6.25H21C21.41 6.25 21.75 6.59 21.75 7C21.75 7.41 21.41 7.75 21 7.75Z"
fill={color}
/>
<path
d="M21 12.75H3C2.59 12.75 2.25 12.41 2.25 12C2.25 11.59 2.59 11.25 3 11.25H21C21.41 11.25 21.75 11.59 21.75 12C21.75 12.41 21.41 12.75 21 12.75Z"
fill={color}
/>
<path
d="M21 17.75H3C2.59 17.75 2.25 17.41 2.25 17C2.25 16.59 2.59 16.25 3 16.25H21C21.41 16.25 21.75 16.59 21.75 17C21.75 17.41 21.41 17.75 21 17.75Z"
fill={color}
/>
</g>
);
interface IMenuProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Menu = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IMenuProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Menu.displayName = 'MenuIcon';
export default Menu;
================================================
FILE: app/assets/icons/MoonIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M21.5287 15.9294C21.3687 15.6594 20.9187 15.2394 19.7987 15.4394C19.1787 15.5494 18.5487 15.5994 17.9187 15.5694C15.5887 15.4694 13.4787 14.3994 12.0087 12.7494C10.7087 11.2994 9.90873 9.40938 9.89873 7.36938C9.89873 6.22938 10.1187 5.12938 10.5687 4.08938C11.0087 3.07938 10.6987 2.54938 10.4787 2.32938C10.2487 2.09938 9.70873 1.77938 8.64873 2.21938C4.55873 3.93938 2.02873 8.03938 2.32873 12.4294C2.62873 16.5594 5.52873 20.0894 9.36873 21.4194C10.2887 21.7394 11.2587 21.9294 12.2587 21.9694C12.4187 21.9794 12.5787 21.9894 12.7387 21.9894C16.0887 21.9894 19.2287 20.4094 21.2087 17.7194C21.8787 16.7894 21.6987 16.1994 21.5287 15.9294Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M12.4585 22.7482C12.2885 22.7482 12.1185 22.7482 11.9485 22.7382C6.34848 22.4882 1.66848 17.9782 1.27848 12.4782C0.938483 7.75816 3.66848 3.34816 8.06848 1.49816C9.31848 0.978161 9.97848 1.37816 10.2585 1.66816C10.5385 1.94816 10.9285 2.59816 10.4085 3.78816C9.94848 4.84816 9.71848 5.97816 9.72848 7.13816C9.74848 11.5682 13.4285 15.3282 17.9185 15.5082C18.5685 15.5382 19.2085 15.4882 19.8285 15.3782C21.1485 15.1382 21.6985 15.6682 21.9085 16.0082C22.1185 16.3482 22.3585 17.0782 21.5585 18.1582C19.4385 21.0582 16.0685 22.7482 12.4585 22.7482ZM2.76848 12.3682C3.10848 17.1282 7.16848 21.0282 12.0085 21.2382C15.2985 21.3982 18.4185 19.8982 20.3385 17.2782C20.4885 17.0682 20.5585 16.9182 20.5885 16.8382C20.4985 16.8282 20.3385 16.8182 20.0885 16.8682C19.3585 16.9982 18.5985 17.0482 17.8485 17.0182C12.5685 16.8082 8.24848 12.3782 8.21848 7.15816C8.21848 5.77816 8.48848 4.44816 9.03848 3.19816C9.13848 2.97816 9.15848 2.82816 9.16848 2.74816C9.07848 2.74816 8.91848 2.76816 8.65848 2.87816C4.84848 4.47816 2.48848 8.29816 2.76848 12.3682Z"
fill={color}
/>
</g>
);
interface IMoonProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Moon = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IMoonProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Moon.displayName = 'MoonIcon';
export default Moon;
================================================
FILE: app/assets/icons/MovieIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
fill={color}
stroke={color}
strokeWidth="2"
strokeLinejoin="round"
/>
<path
d="M24 18C25.6569 18 27 16.6569 27 15C27 13.3431 25.6569 12 24 12C22.3431 12 21 13.3431 21 15C21 16.6569 22.3431 18 24 18Z"
fill="#FFF"
stroke="#FFF"
strokeWidth="2"
strokeLinejoin="round"
/>
<path
d="M24 36C25.6569 36 27 34.6569 27 33C27 31.3431 25.6569 30 24 30C22.3431 30 21 31.3431 21 33C21 34.6569 22.3431 36 24 36Z"
fill="#FFF"
stroke="#FFF"
strokeWidth="2"
strokeLinejoin="round"
/>
<path
d="M15 27C16.6569 27 18 25.6569 18 24C18 22.3431 16.6569 21 15 21C13.3431 21 12 22.3431 12 24C12 25.6569 13.3431 27 15 27Z"
fill="#FFF"
stroke="#FFF"
strokeWidth="2"
strokeLinejoin="round"
/>
<path
d="M33 27C34.6569 27 36 25.6569 36 24C36 22.3431 34.6569 21 33 21C31.3431 21 30 22.3431 30 24C30 25.6569 31.3431 27 33 27Z"
fill="#FFF"
stroke="#FFF"
strokeWidth="2"
strokeLinejoin="round"
/>
<path d="M24 44H44" stroke={color} strokeWidth="2" strokeLinecap="round" />
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
d="M24 18C25.6569 18 27 16.6569 27 15C27 13.3431 25.6569 12 24 12C22.3431 12 21 13.3431 21 15C21 16.6569 22.3431 18 24 18Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
d="M24 36C25.6569 36 27 34.6569 27 33C27 31.3431 25.6569 30 24 30C22.3431 30 21 31.3431 21 33C21 34.6569 22.3431 36 24 36Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
d="M15 27C16.6569 27 18 25.6569 18 24C18 22.3431 16.6569 21 15 21C13.3431 21 12 22.3431 12 24C12 25.6569 13.3431 27 15 27Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
d="M33 27C34.6569 27 36 25.6569 36 24C36 22.3431 34.6569 21 33 21C31.3431 21 30 22.3431 30 24C30 25.6569 31.3431 27 33 27Z"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path d="M24 44H44" stroke={color} strokeWidth={strokeWidth} strokeLinecap="round" />
</g>
);
interface IMovieProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Movie = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IMovieProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={3} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Movie.displayName = 'MovieIcon';
export default Movie;
================================================
FILE: app/assets/icons/NextIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M3.76172 7.21957V16.7896C3.76172 18.7496 5.89172 19.9796 7.59172 18.9996L11.7417 16.6096L15.8917 14.2096C17.5917 13.2296 17.5917 10.7796 15.8917 9.79957L11.7417 7.39957L7.59172 5.00957C5.89172 4.02957 3.76172 5.24957 3.76172 7.21957Z"
fill={color}
/>
<path
d="M20.2383 18.9303C19.8283 18.9303 19.4883 18.5903 19.4883 18.1803V5.82031C19.4883 5.41031 19.8283 5.07031 20.2383 5.07031C20.6483 5.07031 20.9883 5.41031 20.9883 5.82031V18.1803C20.9883 18.5903 20.6583 18.9303 20.2383 18.9303Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M6.3078 20.0884C5.7378 20.0884 5.17781 19.9384 4.65781 19.6384C3.61781 19.0384 3.00781 17.9784 3.00781 16.7784V7.20842C3.00781 6.01842 3.62781 4.94844 4.65781 4.34844C5.69781 3.74844 6.92779 3.74844 7.95779 4.34844L16.2478 9.12844C17.2778 9.72844 17.8978 10.7984 17.8978 11.9884C17.8978 13.1784 17.2778 14.2484 16.2478 14.8484L7.95779 19.6284C7.43779 19.9384 6.8778 20.0884 6.3078 20.0884ZM6.3078 5.40844C5.9978 5.40844 5.68781 5.48843 5.40781 5.64843C4.84781 5.97843 4.50781 6.55842 4.50781 7.20842V16.7784C4.50781 17.4284 4.84781 18.0084 5.40781 18.3384C5.96781 18.6584 6.64779 18.6684 7.20779 18.3384L15.4978 13.5584C16.0578 13.2284 16.3978 12.6484 16.3978 11.9984C16.3978 11.3484 16.0578 10.7684 15.4978 10.4384L7.20779 5.65844C6.92779 5.49844 6.6178 5.40844 6.3078 5.40844Z"
fill={color}
/>
<path
d="M20.2422 18.9303C19.8322 18.9303 19.4922 18.5903 19.4922 18.1803V5.82031C19.4922 5.41031 19.8322 5.07031 20.2422 5.07031C20.6522 5.07031 20.9922 5.41031 20.9922 5.82031V18.1803C20.9922 18.5903 20.6622 18.9303 20.2422 18.9303Z"
fill={color}
/>
</g>
);
interface INextProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Next = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: INextProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Next.displayName = 'NextIcon';
export default Next;
================================================
FILE: app/assets/icons/PaperPlusIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(3.5 2)">
<path
d="M4.674,20A4.7,4.7,0,0,1,0,15.29V4.51A4.493,4.493,0,0,1,4.465,0H9.752a.458.458,0,0,1,.455.46V3.68a3.341,3.341,0,0,0,3.308,3.34c.423,0,.794,0,1.122.006.257,0,.481,0,.68,0,.141,0,.323,0,.521,0,.229,0,.486-.005.716-.005A.448.448,0,0,1,17,7.47v8.04A4.478,4.478,0,0,1,12.544,20Zm.455-9.01a.742.742,0,0,0,.742.74h1.7V13.46a.738.738,0,1,0,1.475,0V11.73h1.713a.745.745,0,0,0,0-1.49H9.05V8.51a.738.738,0,1,0-1.475,0v1.73h-1.7A.747.747,0,0,0,5.129,10.99Zm8.518-5.431a2.017,2.017,0,0,1-2-2.017V.906a.472.472,0,0,1,.814-.334l3.986,4.187a.477.477,0,0,1-.339.807h-.645C14.824,5.568,14.161,5.565,13.647,5.559Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(3.5 2)">
<path
d="M10.486,0H3.834A3.82,3.82,0,0,0,0,3.729V14.578a3.713,3.713,0,0,0,3.834,3.775h7.988a3.769,3.769,0,0,0,3.73-3.775v-9.3Z"
transform="translate(0.75 0.762)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M0,0V2.909A2.575,2.575,0,0,0,2.569,5.484c1.316,0,2.663,0,2.754,0"
transform="translate(10.974 0.75)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M4.9.5H0"
transform="translate(5.893 10.414)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M.5,4.9V0"
transform="translate(7.844 8.464)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IPaperPlusProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const PaperPlus = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: IPaperPlusProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
PaperPlus.displayName = 'PaperPlusIcon';
export default PaperPlus;
================================================
FILE: app/assets/icons/Password.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M18.75 8V10.1C18.31 10.04 17.81 10.01 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.19 10.01 5.69 10.04 5.25 10.1V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8Z"
fill={color}
/>
<path
d="M18.75 10.1C18.31 10.04 17.81 10.01 17.25 10H6.75C6.19 10.01 5.69 10.04 5.25 10.1C2.7 10.41 2 11.66 2 15V17C2 21 3 22 7 22H17C21 22 22 21 22 17V15C22 11.66 21.3 10.41 18.75 10.1ZM8.71 16.71C8.52 16.89 8.26 17 8 17C7.87 17 7.74 16.97 7.62 16.92C7.49 16.87 7.39 16.8 7.29 16.71C7.11 16.52 7 16.26 7 16C7 15.87 7.03 15.74 7.08 15.62C7.13 15.5 7.2 15.39 7.29 15.29C7.39 15.2 7.49 15.13 7.62 15.08C7.99 14.92 8.43 15.01 8.71 15.29C8.8 15.39 8.87 15.5 8.92 15.62C8.97 15.74 9 15.87 9 16C9 16.26 8.89 16.52 8.71 16.71ZM12.92 16.38C12.87 16.5 12.8 16.61 12.71 16.71C12.52 16.89 12.26 17 12 17C11.73 17 11.48 16.89 11.29 16.71C11.2 16.61 11.13 16.5 11.08 16.38C11.03 16.26 11 16.13 11 16C11 15.73 11.11 15.48 11.29 15.29C11.66 14.92 12.33 14.92 12.71 15.29C12.89 15.48 13 15.73 13 16C13 16.13 12.97 16.26 12.92 16.38ZM16.71 16.71C16.52 16.89 16.26 17 16 17C15.74 17 15.48 16.89 15.29 16.71C15.11 16.52 15 16.27 15 16C15 15.73 15.11 15.48 15.29 15.29C15.67 14.92 16.34 14.92 16.71 15.29C16.75 15.34 16.79 15.39 16.83 15.45C16.87 15.5 16.9 15.56 16.92 15.62C16.95 15.68 16.97 15.74 16.98 15.8C16.99 15.87 17 15.94 17 16C17 16.26 16.89 16.52 16.71 16.71Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M18 10.75C17.59 10.75 17.25 10.41 17.25 10V8C17.25 4.85 16.36 2.75 12 2.75C7.64 2.75 6.75 4.85 6.75 8V10C6.75 10.41 6.41 10.75 6 10.75C5.59 10.75 5.25 10.41 5.25 10V8C5.25 5.1 5.95 1.25 12 1.25C18.05 1.25 18.75 5.1 18.75 8V10C18.75 10.41 18.41 10.75 18 10.75Z"
fill={color}
/>
<path
d="M17 22.75H7C2.59 22.75 1.25 21.41 1.25 17V15C1.25 10.59 2.59 9.25 7 9.25H17C21.41 9.25 22.75 10.59 22.75 15V17C22.75 21.41 21.41 22.75 17 22.75ZM7 10.75C3.42 10.75 2.75 11.43 2.75 15V17C2.75 20.57 3.42 21.25 7 21.25H17C20.58 21.25 21.25 20.57 21.25 17V15C21.25 11.43 20.58 10.75 17 10.75H7Z"
fill={color}
/>
<path
d="M8 16.9989C7.87 16.9989 7.74 16.9689 7.62 16.9189C7.49 16.8689 7.39001 16.7989 7.29001 16.7089C7.11001 16.5189 7 16.2689 7 15.9989C7 15.8689 7.02999 15.7389 7.07999 15.6189C7.12999 15.4889 7.20001 15.3889 7.29001 15.2889C7.39001 15.1989 7.49 15.1289 7.62 15.0789C7.98 14.9189 8.42999 15.0089 8.70999 15.2889C8.79999 15.3889 8.87001 15.4989 8.92001 15.6189C8.97001 15.7389 9 15.8689 9 15.9989C9 16.2589 8.88999 16.5189 8.70999 16.7089C8.51999 16.8889 8.26 16.9989 8 16.9989Z"
fill={color}
/>
<path
d="M12 17.0009C11.74 17.0009 11.48 16.8909 11.29 16.7109C11.11 16.5209 11 16.2709 11 16.0009C11 15.8709 11.02 15.7409 11.08 15.6209C11.13 15.5009 11.2 15.3909 11.29 15.2909C11.52 15.0609 11.87 14.9509 12.19 15.0209C12.26 15.0309 12.32 15.0509 12.38 15.0809C12.44 15.1009 12.5 15.1309 12.56 15.1709C12.61 15.2009 12.66 15.2509 12.71 15.2909C12.8 15.3909 12.87 15.5009 12.92 15.6209C12.97 15.7409 13 15.8709 13 16.0009C13 16.2709 12.89 16.5209 12.71 16.7109C12.66 16.7509 12.61 16.7909 12.56 16.8309C12.5 16.8709 12.44 16.9009 12.38 16.9209C12.32 16.9509 12.26 16.9709 12.19 16.9809C12.13 16.9909 12.06 17.0009 12 17.0009Z"
fill={color}
/>
<path
d="M16 17.0009C15.73 17.0009 15.48 16.8909 15.29 16.7109C15.2 16.6109 15.13 16.5009 15.08 16.3809C15.03 16.2609 15 16.1309 15 16.0009C15 15.7409 15.11 15.4809 15.29 15.2909C15.34 15.2509 15.39 15.2109 15.44 15.1709C15.5 15.1309 15.56 15.1009 15.62 15.0809C15.68 15.0509 15.74 15.0309 15.8 15.0209C16.13 14.9509 16.47 15.0609 16.71 15.2909C16.89 15.4809 17 15.7309 17 16.0009C17 16.1309 16.97 16.2609 16.92 16.3809C16.87 16.5109 16.8 16.6109 16.71 16.7109C16.52 16.8909 16.26 17.0009 16 17.0009Z"
fill={color}
/>
</g>
);
interface IPasswordProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Password = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IPasswordProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Password.displayName = 'PasswordIcon';
export default Password;
================================================
FILE: app/assets/icons/PauseIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M10.65 19.11V4.89C10.65 3.54 10.08 3 8.64 3H5.01C3.57 3 3 3.54 3 4.89V19.11C3 20.46 3.57 21 5.01 21H8.64C10.08 21 10.65 20.46 10.65 19.11Z"
fill={color}
/>
<path
d="M21.0016 19.11V4.89C21.0016 3.54 20.4316 3 18.9916 3H15.3616C13.9316 3 13.3516 3.54 13.3516 4.89V19.11C13.3516 20.46 13.9216 21 15.3616 21H18.9916C20.4316 21 21.0016 20.46 21.0016 19.11Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M10.65 19.11V4.89C10.65 3.54 10.08 3 8.64 3H5.01C3.57 3 3 3.54 3 4.89V19.11C3 20.46 3.57 21 5.01 21H8.64C10.08 21 10.65 20.46 10.65 19.11Z"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M21 19.11V4.89C21 3.54 20.43 3 18.99 3H15.36C13.93 3 13.35 3.54 13.35 4.89V19.11C13.35 20.46 13.92 21 15.36 21H18.99C20.43 21 21 20.46 21 19.11Z"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
);
interface IPauseProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Pause = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IPauseProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Pause.displayName = 'PauseIcon';
export default Pause;
================================================
FILE: app/assets/icons/PhotoIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(1.999 2)">
<path
d="M5.638,20a6.641,6.641,0,0,1-1.082-.094L4.524,19.9a5.232,5.232,0,0,1-3.268-1.872c-.005,0-.007,0-.011-.009a.053.053,0,0,0-.007-.01A6.2,6.2,0,0,1,0,14.1V5.888C0,2.366,2.265,0,5.638,0h8.717C17.731,0,20,2.366,20,5.888V14.1a2.3,2.3,0,0,1-.019.256c-.006.058-.013.116-.016.176,0,.034,0,.068,0,.1,0,.05,0,.1-.007.153a.537.537,0,0,1-.009.055.393.393,0,0,0-.01.057,6.709,6.709,0,0,1-.155.9c-.014.059-.03.119-.045.175l-.015.054a6.059,6.059,0,0,1-.287.807c-.021.047-.043.092-.066.138-.014.026-.025.05-.037.075a5.376,5.376,0,0,1-.407.7c-.031.043-.062.084-.094.122l-.055.07a4.914,4.914,0,0,1-.513.581c-.037.035-.076.067-.115.1s-.053.042-.078.065a5.246,5.246,0,0,1-.608.461c-.047.029-.1.054-.146.078-.033.016-.066.032-.1.05a5.223,5.223,0,0,1-.687.333,1.848,1.848,0,0,1-.186.055c-.042.012-.086.023-.129.036l-.076.023a5.194,5.194,0,0,1-.657.172,3.755,3.755,0,0,1-.42.041l-.188.014c-.068,0-.135.014-.2.021a2.608,2.608,0,0,1-.32.026ZM1.4,5.888V14.1a5.328,5.328,0,0,0,.385,2.038l.358-.436c.563-.687,1.611-1.963,1.619-1.971A3.616,3.616,0,0,1,6.4,12.259a2.71,2.71,0,0,1,1.05.22,6.455,6.455,0,0,1,1.01.561l.09.058a2.329,2.329,0,0,0,1.186.537c.024,0,.049,0,.074,0a1.04,1.04,0,0,0,.41-.143,13.5,13.5,0,0,0,2.123-2.619c.057-.081.094-.134.107-.15a3.345,3.345,0,0,1,2.619-1.4,2.983,2.983,0,0,1,1.551.441c.194.116,1.535,1.052,1.981,1.431v-5.3c0-2.73-1.669-4.493-4.251-4.493H5.638C3.061,1.395,1.4,3.158,1.4,5.888ZM4.06,6.993A2.4,2.4,0,0,1,4,6.468a2.5,2.5,0,0,1,5,.046,2.495,2.495,0,0,1-4.941.479Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2 2)">
<path
d="M13.553,0H4.9C1.889,0,0,2.134,0,5.154V13.3c0,3.02,1.881,5.154,4.9,5.154h8.648c3.024,0,4.905-2.134,4.905-5.154V5.154C18.457,2.134,16.576,0,13.553,0Z"
transform="translate(0.75 0.75)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M3.691,1.846A1.846,1.846,0,1,1,1.845,0,1.847,1.847,0,0,1,3.691,1.846Z"
transform="translate(5.012 4.939)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M17.457,2.929a22.809,22.809,0,0,0-3-2.593A2.345,2.345,0,0,0,11.3,1.1c-.765.991-1.243,2.324-2.4,2.949-1.423.771-2.259-.472-3.446-.97-1.325-.555-2.331.443-3.105,1.4S.788,6.389,0,7.339"
transform="translate(1.75 10.022)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IPhotoProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Photo = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IPhotoProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Photo.displayName = 'PhotoIcon';
export default Photo;
================================================
FILE: app/assets/icons/PlayIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M17.49 9.59965L5.6 16.7696C4.9 17.1896 4 16.6896 4 15.8696V7.86965C4 4.37965 7.77 2.19965 10.8 3.93965L15.39 6.57965L17.48 7.77965C18.17 8.18965 18.18 9.18965 17.49 9.59965Z"
fill={color}
/>
<path
d="M18.0888 15.4606L14.0388 17.8006L9.99883 20.1306C8.54883 20.9606 6.90883 20.7906 5.71883 19.9506C5.13883 19.5506 5.20883 18.6606 5.81883 18.3006L18.5288 10.6806C19.1288 10.3206 19.9188 10.6606 20.0288 11.3506C20.2788 12.9006 19.6388 14.5706 18.0888 15.4606Z"
fill={color}
/>
</g>
);
const Circle1Bold = ({ color }: { color: string }) => (
<g>
<path
d="M11.9688 2C6.44875 2 1.96875 6.48 1.96875 12C1.96875 17.52 6.44875 22 11.9688 22C17.4888 22 21.9688 17.52 21.9688 12C21.9688 6.48 17.4988 2 11.9688 2ZM14.9688 14.23L12.0687 15.9C11.7087 16.11 11.3088 16.21 10.9187 16.21C10.5188 16.21 10.1287 16.11 9.76875 15.9C9.04875 15.48 8.61875 14.74 8.61875 13.9V10.55C8.61875 9.72 9.04875 8.97 9.76875 8.55C10.4888 8.13 11.3487 8.13 12.0787 8.55L14.9787 10.22C15.6987 10.64 16.1287 11.38 16.1287 12.22C16.1287 13.06 15.6987 13.81 14.9688 14.23Z"
fill={color}
/>
</g>
);
const Circle2Bold = ({ color }: { color: string }) => (
<g>
<path
d="M19.0717 19.8211C18.8817 19.8211 18.6917 19.7511 18.5417 19.6011C18.2517 19.3111 18.2517 18.8311 18.5417 18.5411C22.1517 14.9311 22.1517 9.06109 18.5417 5.46109C18.2517 5.17109 18.2517 4.69109 18.5417 4.40109C18.8317 4.11109 19.3117 4.11109 19.6017 4.40109C23.7917 8.59109 23.7917 15.4111 19.6017 19.6011C19.4517 19.7511 19.2617 19.8211 19.0717 19.8211Z"
fill={color}
/>
<path
d="M4.93031 19.8211C4.74031 19.8211 4.55031 19.7511 4.40031 19.6011C0.210312 15.4111 0.210312 8.59109 4.40031 4.40109C4.69031 4.11109 5.17031 4.11109 5.46031 4.40109C5.75031 4.69109 5.75031 5.17109 5.46031 5.46109C1.85031 9.07109 1.85031 14.9411 5.46031 18.5411C5.75031 18.8311 5.75031 19.3111 5.46031 19.6011C5.31031 19.7511 5.12031 19.8211 4.93031 19.8211Z"
fill={color}
/>
<path
d="M11.9988 22.7119C10.7488 22.7019 9.55878 22.5019 8.44878 22.1119C8.05878 21.9719 7.84878 21.5419 7.98878 21.1519C8.12878 20.7619 8.54878 20.5519 8.94878 20.6919C9.90878 21.0219 10.9288 21.2019 12.0088 21.2019C13.0788 21.2019 14.1088 21.0219 15.0588 20.6919C15.4488 20.5619 15.8788 20.7619 16.0188 21.1519C16.1588 21.5419 15.9488 21.9719 15.5588 22.1119C14.4388 22.5019 13.2488 22.7119 11.9988 22.7119Z"
fill={color}
/>
<path
d="M15.2988 3.33906C15.2188 3.33906 15.1288 3.32906 15.0488 3.29906C14.0988 2.95906 13.0688 2.78906 11.9988 2.78906C10.9288 2.78906 9.90878 2.96906 8.94878 3.29906C8.54878 3.42906 8.12878 3.22906 7.98878 2.83906C7.84878 2.44906 8.05878 2.01906 8.44878 1.87906C9.56878 1.48906 10.7588 1.28906 11.9988 1.28906C13.2388 1.28906 14.4388 1.48906 15.5488 1.87906C15.9388 2.01906 16.1488 2.44906 16.0088 2.83906C15.8988 3.14906 15.6088 3.33906 15.2988 3.33906Z"
fill={color}
/>
<path
d="M8.73828 12.0001V10.3301C8.73828 8.25014 10.2083 7.40014 12.0083 8.44014L13.4583 9.28014L14.9083 10.1201C16.7083 11.1601 16.7083 12.8601 14.9083 13.9001L13.4583 14.7401L12.0083 15.5801C10.2083 16.6201 8.73828 15.7701 8.73828 13.6901V12.0001Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M4 11.9999V8.43989C4 4.01989 7.13 2.2099 10.96 4.4199L14.05 6.1999L17.14 7.9799C20.97 10.1899 20.97 13.8099 17.14 16.0199L14.05 17.7999L10.96 19.5799C7.13 21.7899 4 19.9799 4 15.5599V11.9999Z"
stroke={color}
strokeWidth={strokeWidth}
strokeMiterlimit="10"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
);
const Circle1Light = ({ color }: { color: string }) => (
<g>
<path
d="M11.9688 22.75C6.04875 22.75 1.21875 17.93 1.21875 12C1.21875 6.07 6.04875 1.25 11.9688 1.25C17.8888 1.25 22.7188 6.07 22.7188 12C22.7188 17.93 17.8988 22.75 11.9688 22.75ZM11.9688 2.75C6.86875 2.75 2.71875 6.9 2.71875 12C2.71875 17.1 6.86875 21.25 11.9688 21.25C17.0688 21.25 21.2188 17.1 21.2188 12C21.2188 6.9 17.0688 2.75 11.9688 2.75Z"
fill={color}
/>
<path
d="M10.5583 16.9915C10.1183 16.9915 9.69828 16.8815 9.32828 16.6715C8.46828 16.1715 7.98828 15.1915 7.98828 13.9115V10.5615C7.98828 9.28146 8.45828 8.30146 9.31828 7.80146C10.1783 7.30146 11.2683 7.38146 12.3783 8.02146L15.2783 9.69146C16.3883 10.3315 16.9983 11.2315 16.9983 12.2315C16.9983 13.2215 16.3883 14.1315 15.2783 14.7715L12.3783 16.4415C11.7583 16.8115 11.1283 16.9915 10.5583 16.9915ZM10.5583 8.97146C10.3783 8.97146 10.2083 9.01146 10.0783 9.09146C9.69828 9.31146 9.48828 9.84146 9.48828 10.5615V13.9115C9.48828 14.6215 9.69828 15.1615 10.0783 15.3715C10.4483 15.5915 11.0183 15.5015 11.6383 15.1515L14.5383 13.4815C15.1583 13.1215 15.5083 12.6715 15.5083 12.2415C15.5083 11.8115 15.1483 11.3615 14.5383 11.0015L11.6383 9.33146C11.2383 9.09146 10.8683 8.97146 10.5583 8.97146Z"
fill={color}
/>
</g>
);
const Circle2Light = ({ color }: { color: string }) => (
<g>
<path
d="M19.0678 19.8211C18.8778 19.8211 18.6878 19.751 18.5378 19.601C18.2478 19.311 18.2478 18.831 18.5378 18.541C22.1478 14.931 22.1478 9.06109 18.5378 5.46109C18.2478 5.17109 18.2478 4.69109 18.5378 4.40109C18.8278 4.11109 19.3078 4.11109 19.5978 4.40109C23.7878 8.59109 23.7878 15.411 19.5978 19.601C19.4478 19.751 19.2578 19.8211 19.0678 19.8211Z"
fill={color}
/>
<path
d="M4.93031 19.8211C4.74031 19.8211 4.55031 19.751 4.40031 19.601C0.210312 15.411 0.210312 8.59109 4.40031 4.40109C4.69031 4.11109 5.17031 4.11109 5.46031 4.40109C5.75031 4.69109 5.75031 5.17109 5.46031 5.46109C1.85031 9.07109 1.85031 14.941 5.46031 18.541C5.75031 18.831 5.75031 19.311 5.46031 19.601C5.31031 19.751 5.12031 19.8211 4.93031 19.8211Z"
fill={color}
/>
<path
d="M11.9988 22.7119C10.7488 22.7019 9.5588 22.5019 8.4488 22.1119C8.0588 21.9719 7.84878 21.5419 7.98878 21.1519C8.12878 20.7619 8.5488 20.5519 8.9488 20.6919C9.9088 21.0219 10.9288 21.2019 12.0088 21.2019C13.0788 21.2019 14.1088 21.0219 15.0588 20.6919C15.4488 20.5619 15.8788 20.7619 16.0188 21.1519C16.1588 21.5419 15.9488 21.9719 15.5588 22.1119C14.4388 22.5019 13.2488 22.7119 11.9988 22.7119Z"
fill={color}
/>
<path
d="M15.3009 3.33911C15.2209 3.33911 15.1309 3.32907 15.0509 3.29907C14.0909 2.96907 13.061 2.78906 11.991 2.78906C10.9209 2.78906 9.90096 2.96907 8.94096 3.29907C8.55096 3.42907 8.12097 3.22911 7.98097 2.83911C7.84097 2.44911 8.05096 2.01909 8.44096 1.87909C9.55096 1.48909 10.751 1.28906 11.991 1.28906C13.231 1.28906 14.431 1.48909 15.541 1.87909C15.931 2.01909 16.141 2.44911 16.001 2.83911C15.901 3.14911 15.6109 3.33911 15.3009 3.33911Z"
fill={color}
/>
<path
d="M10.5622 16.761C10.1222 16.761 9.70218 16.651 9.33218 16.441C8.47218 15.941 7.99219 14.961 7.99219 13.681V10.331C7.99219 9.05101 8.46218 8.071 9.33218 7.571C10.1922 7.071 11.2822 7.15097 12.3922 7.79097L15.2922 9.46102C16.4022 10.101 17.0122 11.001 17.0122 12.001C17.0122 13.001 16.4022 13.901 15.2922 14.541L12.3922 16.211C11.7622 16.581 11.1322 16.761 10.5622 16.761ZM10.5622 8.74098C10.3822 8.74098 10.2122 8.78098 10.0822 8.86098C9.71218 9.08098 9.49219 9.611 9.49219 10.321V13.671C9.49219 14.381 9.70218 14.921 10.0822 15.131C10.4522 15.341 11.0222 15.261 11.6422 14.911L14.5422 13.241C15.1622 12.881 15.5122 12.431 15.5122 12.001C15.5122 11.571 15.1622 11.121 14.5422 10.761L11.6422 9.09102C11.2422 8.86102 10.8722 8.74098 10.5622 8.74098Z"
fill={color}
/>
</g>
);
interface IPlayProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The type of the icon
* @default 'normal'
* @type 'normal' | 'circle1' | 'circle2'
*/
type?: 'normal' | 'circle1' | 'circle2';
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Play = ({
fill = 'currentColor',
filled = false,
type = 'normal',
size = 24,
height = 24,
width = 24,
...props
}: IPlayProps) => {
switch (type) {
case 'normal':
if (filled) {
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />
</svg>
);
}
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
case 'circle1':
if (filled) {
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Circle1Bold color={fill} />
</svg>
);
}
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Circle1Light color={fill} />
</svg>
);
case 'circle2':
if (filled) {
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Circle2Bold color={fill} />
</svg>
);
}
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Circle2Light color={fill} />
</svg>
);
default:
if (filled) {
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />
</svg>
);
}
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
}
};
Play.displayName = 'PlayIcon';
export default Play;
================================================
FILE: app/assets/icons/PreviousIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M20.2409 7.21957V16.7896C20.2409 18.7496 18.1109 19.9796 16.4109 18.9996L12.2609 16.6096L8.11094 14.2096C6.41094 13.2296 6.41094 10.7796 8.11094 9.79957L12.2609 7.39957L16.4109 5.00957C18.1109 4.02957 20.2409 5.24957 20.2409 7.21957Z"
fill={color}
/>
<path
d="M3.76172 18.9303C3.35172 18.9303 3.01172 18.5903 3.01172 18.1803V5.82031C3.01172 5.41031 3.35172 5.07031 3.76172 5.07031C4.17172 5.07031 4.51172 5.41031 4.51172 5.82031V18.1803C4.51172 18.5903 4.17172 18.9303 3.76172 18.9303Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M17.6916 20.0902C17.1216 20.0902 16.5616 19.9402 16.0416 19.6402L7.75156 14.8602C6.72156 14.2602 6.10156 13.1902 6.10156 12.0002C6.10156 10.8102 6.72156 9.74019 7.75156 9.14019L16.0416 4.36016C17.0716 3.76016 18.3016 3.76016 19.3416 4.36016C20.3816 4.96016 20.9915 6.02017 20.9915 7.22017V16.7902C20.9915 17.9802 20.3716 19.0502 19.3416 19.6502C18.8216 19.9402 18.2616 20.0902 17.6916 20.0902ZM17.6916 5.41017C17.3816 5.41017 17.0716 5.49016 16.7916 5.65016L8.50156 10.4302C7.94156 10.7602 7.60156 11.3402 7.60156 11.9902C7.60156 12.6402 7.94156 13.2202 8.50156 13.5502L16.7916 18.3302C17.3516 18.6602 18.0316 18.6602 18.5916 18.3302C19.1516 18.0002 19.4915 17.4202 19.4915 16.7702V7.20018C19.4915 6.55018 19.1516 5.97019 18.5916 5.64019C18.3116 5.50019 18.0016 5.41017 17.6916 5.41017Z"
fill={color}
/>
<path
d="M3.75781 18.9303C3.34781 18.9303 3.00781 18.5903 3.00781 18.1803V5.82031C3.00781 5.41031 3.34781 5.07031 3.75781 5.07031C4.16781 5.07031 4.50781 5.41031 4.50781 5.82031V18.1803C4.50781 18.5903 4.16781 18.9303 3.75781 18.9303Z"
fill={color}
/>
</g>
);
interface IPreviousProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Previous = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IPreviousProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Previous.displayName = 'PreviousIcon';
export default Previous;
================================================
FILE: app/assets/icons/RatioIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<rect
x="6"
y="6"
width="36"
height="36"
rx="3"
fill={color}
stroke={color}
strokeWidth="2"
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24 22.5C25.3807 22.5 26.5 21.3807 26.5 20C26.5 18.6193 25.3807 17.5 24 17.5C22.6193 17.5 21.5 18.6193 21.5 20C21.5 21.3807 22.6193 22.5 24 22.5Z"
fill="#FFF"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24 30.5C25.3807 30.5 26.5 29.3807 26.5 28C26.5 26.6193 25.3807 25.5 24 25.5C22.6193 25.5 21.5 26.6193 21.5 28C21.5 29.3807 22.6193 30.5 24 30.5Z"
fill="#FFF"
/>
<path
d="M15.5 17V31"
stroke="#FFF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M32.5 17V31"
stroke="#FFF"
strokeWidth="2"
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<rect
x="6"
y="6"
width="36"
height="36"
rx="3"
fill="none"
stroke={color}
strokeWidth={strokeWidth}
strokeLinejoin="round"
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24 22.5C25.3807 22.5 26.5 21.3807 26.5 20C26.5 18.6193 25.3807 17.5 24 17.5C22.6193 17.5 21.5 18.6193 21.5 20C21.5 21.3807 22.6193 22.5 24 22.5Z"
fill={color}
/>
<path
fillRule="evenodd"
clipRule="evenodd"
d="M24 30.5C25.3807 30.5 26.5 29.3807 26.5 28C26.5 26.6193 25.3807 25.5 24 25.5C22.6193 25.5 21.5 26.6193 21.5 28C21.5 29.3807 22.6193 30.5 24 30.5Z"
fill={color}
/>
<path
d="M15.5 17V31"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M32.5 17V31"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
);
interface IRatioProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Ratio = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IRatioProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={2} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 48 48"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Ratio.displayName = 'RatioIcon';
export default Ratio;
================================================
FILE: app/assets/icons/RefreshIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M14.55 22.42C14.22 22.42 13.91 22.2 13.82 21.86C13.72 21.46 13.95 21.05 14.35 20.94C18.41 19.87 21.24 16.19 21.24 11.99C21.24 6.89 17.09 2.74 11.99 2.74C7.66 2.74 4.82 5.27 3.49 6.8H6.43C6.84 6.8 7.18 7.14 7.18 7.55C7.18 7.96 6.86 8.31 6.44 8.31H2.01C1.94 8.31 1.87 8.3 1.8 8.28C1.71 8.25 1.63 8.21 1.56 8.16C1.47 8.1 1.4 8.02 1.35 7.93C1.3 7.83 1.26 7.73 1.25 7.62C1.25 7.59 1.25 7.57 1.25 7.54V3C1.25 2.59 1.59 2.25 2 2.25C2.41 2.25 2.75 2.59 2.75 3V5.39C4.38 3.64 7.45 1.25 12 1.25C17.93 1.25 22.75 6.07 22.75 12C22.75 16.88 19.46 21.16 14.74 22.4C14.68 22.41 14.61 22.42 14.55 22.42Z"
fill={color}
/>
<path
d="M11.29 22.73C11.27 22.73 11.24 22.73 11.22 22.72C10.15 22.65 9.1 22.41 8.1 22.02C7.81 21.91 7.62 21.62 7.62 21.31C7.62 21.22 7.64 21.13 7.67 21.05C7.82 20.67 8.26 20.47 8.64 20.62C9.5 20.96 10.41 21.16 11.33 21.23H11.34C11.74 21.25 12.04 21.59 12.04 21.99C12.04 22 12.04 22.02 12.04 22.03C12.01 22.42 11.68 22.73 11.29 22.73ZM5.78 20.58C5.61 20.58 5.45 20.53 5.31 20.42C4.47 19.75 3.74 18.96 3.13 18.07C3.04 17.94 2.99 17.8 2.99 17.65C2.99 17.4 3.11 17.17 3.32 17.03C3.65 16.8 4.14 16.89 4.36 17.22C4.89 17.99 5.52 18.67 6.25 19.24C6.42 19.38 6.53 19.59 6.53 19.82C6.53 19.99 6.48 20.16 6.37 20.3C6.23 20.48 6.01 20.58 5.78 20.58ZM2.44 15.7C2.11 15.7 1.82 15.49 1.73 15.18C1.41 14.15 1.25 13.08 1.25 12C1.25 11.59 1.59 11.25 2 11.25C2.41 11.25 2.75 11.59 2.75 12C2.75 12.93 2.89 13.85 3.16 14.73C3.18 14.8 3.19 14.88 3.19 14.96C3.19 15.29 2.98 15.57 2.67 15.67C2.59 15.69 2.52 15.7 2.44 15.7Z"
fill={color}
/>
<path
d="M12 16C14.2091 16 16 14.2091 16 12C16 9.79086 14.2091 8 12 8C9.79086 8 8 9.79086 8 12C8 14.2091 9.79086 16 12 16Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M14.55 21.67C18.84 20.54 22 16.64 22 12C22 6.48 17.56 2 12 2C5.33 2 2 7.56 2 7.56M2 7.56V3M2 7.56H4.01H6.44"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M2 12C2 17.52 6.48 22 12 22"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
strokeDasharray="3 3"
/>
</g>
);
interface IRefreshProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const RefreshIcon = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IRefreshProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
RefreshIcon.displayName = 'RefreshIcon';
export default RefreshIcon;
================================================
FILE: app/assets/icons/SearchIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2 2)">
<path
d="M17.741,19.608l-2.12-2.43a1.083,1.083,0,0,1,0-1.524.986.986,0,0,1,1.393,0l2.554,2.062h.045a1.348,1.348,0,0,1,0,1.892,1.315,1.315,0,0,1-1.872,0ZM0,8.67A8.624,8.624,0,0,1,8.578,0a8.531,8.531,0,0,1,6.065,2.54,8.716,8.716,0,0,1,2.512,6.13A8.624,8.624,0,0,1,8.578,17.34,8.624,8.624,0,0,1,0,8.67Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g
transform="translate(2 2)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit={10}
strokeWidth={strokeWidth}
>
<circle cx={8.989} cy={8.989} r={8.989} transform="translate(.778 .778)" />
<path d="M16.018 16.485L19.542 20" />
</g>
);
interface ISearchProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Search = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: ISearchProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Search.displayName = 'SearchIcon';
export default Search;
================================================
FILE: app/assets/icons/SettingsIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2.5 2)">
<path
d="M10.2,20H8.807a2.066,2.066,0,0,1-2.125-2.05A1.9,1.9,0,0,0,4.8,16.13a1.58,1.58,0,0,0-.9.23,2.163,2.163,0,0,1-1.084.3A2.122,2.122,0,0,1,1,15.62l-.7-1.2a2,2,0,0,1-.021-2.05,2.108,2.108,0,0,1,.817-.789,1.653,1.653,0,0,0,.644-.64,1.782,1.782,0,0,0,.19-1.365A1.837,1.837,0,0,0,1.071,8.44,2.045,2.045,0,0,1,.314,5.61L1,4.43a2.123,2.123,0,0,1,2.882-.76,1.894,1.894,0,0,0,.9.224A1.959,1.959,0,0,0,6.446,2.98a1.538,1.538,0,0,0,.236-.88A1.788,1.788,0,0,1,6.968,1.04,2.2,2.2,0,0,1,8.776,0h1.441a2.154,2.154,0,0,1,1.82,1.04A1.781,1.781,0,0,1,12.312,2.1a1.545,1.545,0,0,0,.235.88,1.964,1.964,0,0,0,1.672.914,1.926,1.926,0,0,0,.9-.224,2.111,2.111,0,0,1,2.872.76l.684,1.18a2.027,2.027,0,0,1-.756,2.831,1.829,1.829,0,0,0-.853,1.138,1.771,1.771,0,0,0,.2,1.362,1.571,1.571,0,0,0,.634.64,2.307,2.307,0,0,1,.828.789,2.031,2.031,0,0,1-.02,2.05l-.715,1.2a2.1,2.1,0,0,1-2.893.74,1.621,1.621,0,0,0-.9-.23,1.9,1.9,0,0,0-1.891,1.82A2.061,2.061,0,0,1,10.2,20ZM9.512,7.18a2.87,2.87,0,0,0-2.9,2.83,2.763,2.763,0,0,0,.849,2,2.93,2.93,0,0,0,2.053.821A2.822,2.822,0,0,0,11.55,8.006,2.877,2.877,0,0,0,9.512,7.18Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2.5 1.5)">
<path
d="M17.528,5.346l-.622-1.08a1.913,1.913,0,0,0-2.609-.7h0a1.9,1.9,0,0,1-2.609-.677,1.831,1.831,0,0,1-.256-.915h0A1.913,1.913,0,0,0,9.519,0H8.265a1.9,1.9,0,0,0-1.9,1.913h0A1.913,1.913,0,0,1,4.448,3.8a1.831,1.831,0,0,1-.915-.256h0a1.913,1.913,0,0,0-2.609.7l-.668,1.1a1.913,1.913,0,0,0,.7,2.609h0a1.913,1.913,0,0,1,.957,1.657,1.913,1.913,0,0,1-.957,1.657h0a1.9,1.9,0,0,0-.7,2.6h0l.632,1.089A1.913,1.913,0,0,0,3.5,15.7h0a1.895,1.895,0,0,1,2.6.7,1.831,1.831,0,0,1,.256.915h0a1.913,1.913,0,0,0,1.913,1.913H9.519a1.913,1.913,0,0,0,1.913-1.9h0a1.9,1.9,0,0,1,1.913-1.913,1.95,1.95,0,0,1,.915.256h0a1.913,1.913,0,0,0,2.609-.7h0l.659-1.1a1.9,1.9,0,0,0-.7-2.609h0a1.9,1.9,0,0,1-.7-2.609,1.876,1.876,0,0,1,.7-.7h0a1.913,1.913,0,0,0,.7-2.6h0Z"
transform="translate(0.779 0.778)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<circle
cx="2.636"
cy="2.636"
r="2.636"
transform="translate(7.039 7.753)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface ISettingsProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Settings = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: ISettingsProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Settings.displayName = 'SettingsIcon';
export default Settings;
================================================
FILE: app/assets/icons/ShareIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M20.3591 12.7315C19.9891 12.7315 19.6791 12.4515 19.6391 12.0815C19.3991 9.88154 18.2191 7.90154 16.3991 6.64154C16.0691 6.41154 15.9891 5.96154 16.2191 5.63154C16.4491 5.30154 16.8991 5.22154 17.2291 5.45154C19.3991 6.96154 20.7991 9.32154 21.0891 11.9315C21.1291 12.3315 20.8391 12.6915 20.4391 12.7315C20.4091 12.7315 20.3891 12.7315 20.3591 12.7315Z"
fill={color}
/>
<path
d="M3.73931 12.7812C3.71931 12.7812 3.68931 12.7812 3.66931 12.7812C3.26931 12.7412 2.97931 12.3812 3.01931 11.9812C3.28931 9.37118 4.66931 7.01118 6.81931 5.49118C7.13931 5.26118 7.59931 5.34118 7.82931 5.66118C8.05931 5.99118 7.97931 6.44118 7.65931 6.67118C5.85931 7.95118 4.68931 9.93118 4.46931 12.1212C4.42931 12.5012 4.10931 12.7812 3.73931 12.7812Z"
fill={color}
/>
<path
d="M15.9906 21.1003C14.7606 21.6903 13.4406 21.9903 12.0606 21.9903C10.6206 21.9903 9.25059 21.6703 7.97059 21.0203C7.61059 20.8503 7.47059 20.4103 7.65059 20.0503C7.82059 19.6903 8.26059 19.5503 8.62059 19.7203C9.25059 20.0403 9.92059 20.2603 10.6006 20.3903C11.5206 20.5703 12.4606 20.5803 13.3806 20.4203C14.0606 20.3003 14.7306 20.0903 15.3506 19.7903C15.7206 19.6203 16.1606 19.7603 16.3206 20.1303C16.5006 20.4903 16.3606 20.9303 15.9906 21.1003Z"
fill={color}
/>
<path
d="M12.0505 2.01172C10.5005 2.01172 9.23047 3.27172 9.23047 4.83172C9.23047 6.39172 10.4905 7.65172 12.0505 7.65172C13.6105 7.65172 14.8705 6.39172 14.8705 4.83172C14.8705 3.27172 13.6105 2.01172 12.0505 2.01172Z"
fill={color}
/>
<path
d="M5.05047 13.8711C3.50047 13.8711 2.23047 15.1311 2.23047 16.6911C2.23047 18.2511 3.49047 19.5111 5.05047 19.5111C6.61047 19.5111 7.87047 18.2511 7.87047 16.6911C7.87047 15.1311 6.60047 13.8711 5.05047 13.8711Z"
fill={color}
/>
<path
d="M18.9509 13.8711C17.4009 13.8711 16.1309 15.1311 16.1309 16.6911C16.1309 18.2511 17.3909 19.5111 18.9509 19.5111C20.5109 19.5111 21.7709 18.2511 21.7709 16.6911C21.7709 15.1311 20.5109 13.8711 18.9509 13.8711Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M20.6196 13.0701C20.2396 13.0701 19.9196 12.7801 19.8696 12.4001C19.6296 10.1401 18.4096 8.0901 16.5296 6.7901C16.1896 6.5501 16.1096 6.0901 16.3396 5.7501C16.5796 5.4101 17.0496 5.3301 17.3796 5.5601C19.6196 7.1101 21.0596 9.5501 21.3496 12.2401C21.3896 12.6501 21.0996 13.0201 20.6796 13.0701C20.6696 13.0701 20.6396 13.0701 20.6196 13.0701Z"
fill={color}
/>
<path
d="M3.48991 13.12C3.45991 13.12 3.43991 13.12 3.40991 13.12C2.99991 13.07 2.69991 12.7 2.73991 12.29C3.00991 9.60001 4.43991 7.17001 6.64991 5.60001C6.98991 5.36001 7.45991 5.44001 7.69991 5.78001C7.93991 6.12001 7.85991 6.59001 7.51991 6.83001C5.65991 8.14001 4.45991 10.19 4.22991 12.45C4.19991 12.83 3.86991 13.12 3.48991 13.12Z"
fill={color}
/>
<path
d="M12.06 22.61C10.58 22.61 9.16997 22.27 7.84997 21.61C7.47997 21.42 7.32997 20.97 7.51997 20.6C7.70997 20.23 8.15997 20.08 8.52997 20.27C10.69 21.36 13.29 21.38 15.47 20.33C15.84 20.15 16.29 20.31 16.47 20.68C16.65 21.05 16.49 21.5 16.12 21.68C14.84 22.3 13.48 22.61 12.06 22.61Z"
fill={color}
/>
<path
d="M12.0593 8.43988C10.1093 8.43988 8.5293 6.85988 8.5293 4.90988C8.5293 2.95988 10.1093 1.37988 12.0593 1.37988C14.0093 1.37988 15.5893 2.95988 15.5893 4.90988C15.5893 6.85988 13.9993 8.43988 12.0593 8.43988ZM12.0593 2.88988C10.9393 2.88988 10.0293 3.79988 10.0293 4.91988C10.0293 6.03988 10.9393 6.94988 12.0593 6.94988C13.1793 6.94988 14.0893 6.03988 14.0893 4.91988C14.0893 3.79988 13.1693 2.88988 12.0593 2.88988Z"
fill={color}
/>
<path
d="M4.83078 20.6701C2.88078 20.6701 1.30078 19.0901 1.30078 17.1401C1.30078 15.2001 2.88078 13.6101 4.83078 13.6101C6.78078 13.6101 8.36078 15.1901 8.36078 17.1401C8.36078 19.0801 6.78078 20.6701 4.83078 20.6701ZM4.83078 15.1101C3.71078 15.1101 2.80078 16.0201 2.80078 17.1401C2.80078 18.2601 3.71078 19.1701 4.83078 19.1701C5.95078 19.1701 6.86078 18.2601 6.86078 17.1401C6.86078 16.0201 5.95078 15.1101 4.83078 15.1101Z"
fill={color}
/>
<path
d="M19.1706 20.6701C17.2206 20.6701 15.6406 19.0901 15.6406 17.1401C15.6406 15.2001 17.2206 13.6101 19.1706 13.6101C21.1206 13.6101 22.7006 15.1901 22.7006 17.1401C22.6906 19.0801 21.1106 20.6701 19.1706 20.6701ZM19.1706 15.1101C18.0506 15.1101 17.1406 16.0201 17.1406 17.1401C17.1406 18.2601 18.0506 19.1701 19.1706 19.1701C20.2906 19.1701 21.2006 18.2601 21.2006 17.1401C21.1906 16.0201 20.2906 15.1101 19.1706 15.1101Z"
fill={color}
/>
</g>
);
interface IShareProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Share = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IShareProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Share.displayName = 'ShareIcon';
export default Share;
================================================
FILE: app/assets/icons/SortIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g transform="translate(2 3)">
<path
d="M14.454,17.721a4.445,4.445,0,0,1-.434-.394A17.665,17.665,0,0,1,10.909,12.7a4.061,4.061,0,0,1-.32-1.078V11.57a1.461,1.461,0,0,1,.779-1.288,6.515,6.515,0,0,1,1.04-.28A20.9,20.9,0,0,1,15.3,9.83a17.926,17.926,0,0,1,2.985.2,7.45,7.45,0,0,1,.835.209,1.5,1.5,0,0,1,.709.65,1.633,1.633,0,0,1,.171.732,3.875,3.875,0,0,1-.264.963,17.773,17.773,0,0,1-3.155,4.736c-.16.162-.355.337-.4.382a1.43,1.43,0,0,1-.891.3A1.363,1.363,0,0,1,14.454,17.721Zm-10.94-2.3.257-4.578a.934.934,0,1,1,1.867,0L5.9,15.417a1.191,1.191,0,1,1-2.381,0Zm-1.8-7.444A7.4,7.4,0,0,1,.88,7.764a1.491,1.491,0,0,1-.709-.65A1.62,1.62,0,0,1,0,6.384a3.943,3.943,0,0,1,.262-.963A17.762,17.762,0,0,1,3.418.685c.161-.162.355-.337.4-.383A1.433,1.433,0,0,1,4.712,0a1.368,1.368,0,0,1,.834.278,4.586,4.586,0,0,1,.435.4A17.751,17.751,0,0,1,9.091,5.3a4.108,4.108,0,0,1,.321,1.079v.047a1.464,1.464,0,0,1-.778,1.287A6.442,6.442,0,0,1,7.593,8,20.9,20.9,0,0,1,4.7,8.17,17.926,17.926,0,0,1,1.715,7.973Zm12.647-.811L14.1,2.583a1.191,1.191,0,1,1,2.381,0l-.257,4.579a.934.934,0,1,1-1.867,0Z"
transform="translate(0 0)"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g transform="translate(2 3)">
<path
d="M.556,13.618V0"
transform="translate(14.284 3.546)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M8.156,0,4.078,4.1,0,0"
transform="translate(10.762 13.068)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M.556,0V13.618"
transform="translate(4.356 0.833)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
<path
d="M0,4.1,4.078,0,8.156,4.1"
transform="translate(0.833 0.832)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface ISortProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
/**
* The className of the icon
* @default ''
* @type string
* */
className?: string;
}
const Sort = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
className = '',
...props
}: ISortProps) => {
switch (filled) {
case false:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className={className}
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Sort.displayName = 'SortIcon';
export default Sort;
================================================
FILE: app/assets/icons/StarIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M15.919,11.82a1.1,1.1,0,0,0-.319.97l.889,4.92a1.08,1.08,0,0,1-.45,1.08,1.1,1.1,0,0,1-1.17.08L10.44,16.56a1.131,1.131,0,0,0-.5-.131H9.669a.812.812,0,0,0-.27.09L4.969,18.84a1.168,1.168,0,0,1-.71.11,1.112,1.112,0,0,1-.89-1.271l.89-4.92a1.119,1.119,0,0,0-.319-.979L.329,8.28A1.08,1.08,0,0,1,.06,7.15,1.123,1.123,0,0,1,.949,6.4l4.97-.721A1.112,1.112,0,0,0,6.8,5.07L8.989.58a1.041,1.041,0,0,1,.2-.27l.09-.07A.671.671,0,0,1,9.44.11L9.549.07,9.719,0h.421a1.119,1.119,0,0,1,.88.6l2.219,4.47a1.111,1.111,0,0,0,.83.609l4.97.721a1.134,1.134,0,0,1,.91.75,1.086,1.086,0,0,1-.29,1.13Z"
transform="translate(0 0)"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M10.214.441,12.53,5.1a.8.8,0,0,0,.6.437l5.185.749a.8.8,0,0,1,.528.306.77.77,0,0,1-.085,1.032L15,11.258a.762.762,0,0,0-.226.7l.9,5.128a.787.787,0,0,1-.652.892.868.868,0,0,1-.516-.08L9.888,15.478a.776.776,0,0,0-.742,0L4.494,17.912a.812.812,0,0,1-1.077-.33.8.8,0,0,1-.081-.5l.9-5.128a.788.788,0,0,0-.226-.7L.232,7.621a.786.786,0,0,1,0-1.112l0,0a.909.909,0,0,1,.452-.222L5.87,5.534a.812.812,0,0,0,.6-.438L8.784.441a.787.787,0,0,1,.458-.4.8.8,0,0,1,.61.044A.82.82,0,0,1,10.214.441Z"
transform="translate(0 0)"
fill="none"
stroke={color}
strokeLinecap="round"
strokeLinejoin="round"
strokeMiterlimit="10"
strokeWidth={strokeWidth}
/>
</g>
);
interface IStarProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Star = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IStarProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Star.displayName = 'StarIcon';
export default Star;
================================================
FILE: app/assets/icons/StopIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<path
d="M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 21H19C20.1046 21 21 20.1046 21 19V5C21 3.89543 20.1046 3 19 3H5Z"
fill={color}
/>
);
const Light = ({ color }: { color: string }) => (
<path
fillRule="evenodd"
clipRule="evenodd"
d="M3 5C3 3.89543 3.89543 3 5 3H19C20.1046 3 21 3.89543 21 5V19C21 20.1046 20.1046 21 19 21H5C3.89543 21 3 20.1046 3 19V5ZM4.5 5C4.5 4.72386 4.72386 4.5 5 4.5H19C19.2761 4.5 19.5 4.72386 19.5 5V19C19.5 19.2761 19.2761 19.5 19 19.5H5C4.72386 19.5 4.5 19.2761 4.5 19V5Z"
fill={color}
/>
);
interface IStopProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Stop = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: IStopProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Stop.displayName = 'StopIcon';
export default Stop;
================================================
FILE: app/assets/icons/SubtitleIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19.83 4.17 22 7.81 22H16.18C19.82 22 21.99 19.83 21.99 16.19V7.81C22 4.17 19.83 2 16.19 2ZM6.5 12.57H9.27C9.68 12.57 10.02 12.91 10.02 13.32C10.02 13.73 9.68 14.07 9.27 14.07H6.5C6.09 14.07 5.75 13.73 5.75 13.32C5.75 12.91 6.09 12.57 6.5 12.57ZM12.97 17.83H6.5C6.09 17.83 5.75 17.49 5.75 17.08C5.75 16.67 6.09 16.33 6.5 16.33H12.97C13.38 16.33 13.72 16.67 13.72 17.08C13.72 17.49 13.39 17.83 12.97 17.83ZM17.5 17.83H15.65C15.24 17.83 14.9 17.49 14.9 17.08C14.9 16.67 15.24 16.33 15.65 16.33H17.5C17.91 16.33 18.25 16.67 18.25 17.08C18.25 17.49 17.91 17.83 17.5 17.83ZM17.5 14.07H11.97C11.56 14.07 11.22 13.73 11.22 13.32C11.22 12.91 11.56 12.57 11.97 12.57H17.5C17.91 12.57 18.25 12.91 18.25 13.32C18.25 13.73 17.91 14.07 17.5 14.07Z"
fill={color}
/>
</g>
);
const Light = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (
<g>
<path
d="M9 22H15C20 22 22 20 22 15V9C22 4 20 2 15 2H9C4 2 2 4 2 9V15C2 20 4 22 9 22Z"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.5 17.0801H15.65"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M12.97 17.0801H6.5"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M17.5 13.3201H11.97"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
<path
d="M9.27 13.3201H6.5"
stroke={color}
strokeWidth={strokeWidth}
strokeLinecap="round"
strokeLinejoin="round"
/>
</g>
);
interface ISubtitleProps {
/**
* The color of the icon
* @default 'currentColor'
*/
fill?: string;
/**
* The fill of the icon
* @default false
* @type boolean
*/
filled?: boolean;
/**
* The size of the icon
* @default 24
* @type number
*/
size?: number;
/**
* The height of the icon
* @default 24
* @type number
*/
height?: number;
/**
* The width of the icon
* @default 24
* @type number
* */
width?: number;
}
const Subtitle = ({
fill = 'currentColor',
filled = false,
size = 24,
height = 24,
width = 24,
...props
}: ISubtitleProps) => {
switch (filled) {
case false:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Light color={fill} strokeWidth={1.5} />
</svg>
);
default:
return (
<svg
className=""
width={width || size}
height={height || size}
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{
display: 'inline',
}}
{...props}
>
<Bold color={fill} />;
</svg>
);
}
};
Subtitle.displayName = 'SubtitleIcon';
export default Subtitle;
================================================
FILE: app/assets/icons/SunIcon.tsx
================================================
const Bold = ({ color }: { color: string }) => (
<g>
<path
d="M12 19C15.866 19 19 15.866 19 12C19 8.13401 15.866 5 12 5C8.13401 5 5 8.13401 5 12C5 15.866 8.13401 19 12 19Z"
fill={color}
/>
<path
d="M12 22.96C11.45 22.96 11 22.55 11 22V21.92C11 21.37 11.45 20.92 12 20.92C12.55 20.92 13 21.37 13 21.92C13 22.47 12.55 22.96 12 22.96ZM19.14 20.14C18.88 20.14 18.63 20.04 18.43 19.85L18.3 19.72C17.91 19.33 17.91 18.7 18.3 18.31C18.69 17.92 19.32 17.92 19.71 18.31L19.84 18.44C20.23 18.83 20.23 19.46 19.84 19.85C19.65 20.04 19.4 20.14 19.14 20.14ZM4.86 20.14C4.6 20.14 4.35 20.04 4.15 19.85C3.76 19.46 3.76 18.83 4.15 18.44L4.28 18.31C4.67 17.92 5.3 17.92 5.69 18.31C6.08 18.7 6.08 19.33 5.69 19.72L5.56 19.85C5.37 20.04 5.11 20.14 4.86 20.14ZM22 13H21.92C21.37 13 20.92 12.55 20.92 12C20.92 11.45 21.37 11 21.92 11C22.47 11 22.96 11.45 22.96 12C22.96 12.55 22.55 13 22 13ZM2.08 13H2C1.45 13 1 12.55 1 12C1 11.45 1.45 11 2 11C2.55 11 3.04 11.45 3.04 12C3.04 12.55 2.63 13 2.08 13ZM19.01 5.99C18.75 5.99 18.5 5.89 18.3 5.7C17.91 5.31 17.91 4.68 18.3 4.29L18.43 4.16C18.82 3.77 19.45 3.77 19.84 4.16C20.23 4.55 20.23 5.18 19.84 5.57L19.71 5.7C19.52 5.89 19.27 5.99 19.01 5.99ZM4.99 5.99C4.73 5.99 4.48 5.89 4.28 5.7L4.15 5.56C3.76 5.17 3.76 4.54 4.15 4.15C4.54 3.76 5.17 3.76 5.56 4.15L5.69 4.28C6.08 4.67 6.08 5.3 5.69 5.69C5.5 5.89 5.24 5.99 4.99 5.99ZM12 3.04C11.45 3.04 11 2.63 11 2.08V2C11 1.45 11.45 1 12 1C12.55 1 13 1.45 13 2C13 2.55 12.55 3.04 12 3.04Z"
fill={color}
/>
</g>
);
const Light = ({ color }: { color: string }) => (
<g>
<path
d="M12 19.25C8 19.25 4.75 16 4.75 12C4.75 8 8 4.75 12 4.75C16 4.75 19.25 8 19.25 12C19.25 16 16 19.25 12 19.25ZM12 6.25C8.83 6.25 6.25 8.83 6.25 12C6.25 15.17 8.83 17.75 12 17.75C15.17 17.75 17.75 15.17 17.75 12C17.75 8.83 15.17 6.25 12 6.25Z"
fill={color}
/>
<path
d="M12 22.96C11.45 22.96 11 22.55 11 22V21.92C11 21.37 11.45 20.92 12 20.92C12.55 20.92 13 21.37 13 21.92C13 22.47 12.55 22.96 12 22.96ZM19.14 20.14C18.88 20.14 18.63 20.04 18.43 19.85L18.3 19.72C17.91 19.33 17.91 18.7 18.3 18.31C18.69 17.92 19.32 17.92 19.71 18.31L19.84 18.44C20.23 18.83 20.23 19.46 19.84 19.85C19.65 20.04 19.4 20.14 19.14 20.14ZM4.86 20.14C4.6 20.14 4.35 20.04 4.15 19.85C3.76 19.46 3.76 18.83 4.15 18.44L4.28 18.31C4.67 17.92 5.3 17.92 5.69 18.31C6.08 18.7 6.08 19.33 5.69 19.72L5.56 19.85C5.37 20.04 5.11 20.14 4.86 20.14ZM22 13H21.92C21.37 13 20.92 12.55 20.92 12C20.92 11.45 21.37 11 21.92 11C22.47 11 22.96 11.45 22.96 12C22.96 12.55 22.55 13 22 13ZM2.08 13H2C1.45 13 1 12.55 1 12C1 11.45 1.45 11 2 11C2.55 11 3.04 11.45 3.04 12C3.04 12.55 2.63 13 2.08 13ZM19.01 5.99C18.75 5.99 18.5 5.89 18.3 5.7C17.91 5.31 17.91 4.68 18.3 4.29L18.43 4.16C18.82 3.77 19.45 3.77 19.84 4.16C20.23 4.55 20.23 5.18 19.84 5.57L19.71 5.7C19.52 5.89 19.27 5.99 19.01 5.99ZM4.99 5.99C4.73 5.99 4.48 5.89 4.28 5.7L4.15 5.56C3.76 5.17 3.76 4.54 4.15 4.15C4.54 3.76 5.17 3.76 5.56 4.15L5.69 4.28C6.08 4.67 6.08 5.3 5.69 5.69C5.5 5.89 5.24 5.99 4.99 5.99ZM12 3.
gitextract_90coe0g6/ ├── .eslintrc.json ├── .gitignore ├── .husky/ │ └── pre-commit ├── .prettierignore ├── .prettierrc ├── LICENSE.txt ├── README.md ├── app/ │ ├── assets/ │ │ ├── icons/ │ │ │ ├── AnilistStatIcon.tsx │ │ │ ├── AnimeIcon.tsx │ │ │ ├── ArrowIcon.tsx │ │ │ ├── BrushIcon.tsx │ │ │ ├── CategoryIcon.tsx │ │ │ ├── ChevronDownIcon.tsx │ │ │ ├── ChevronLeftIcon.tsx │ │ │ ├── ChevronRightIcon.tsx │ │ │ ├── ChevronUpIcon.tsx │ │ │ ├── CloseIcon.tsx │ │ │ ├── DiscoverIcon.tsx │ │ │ ├── ExpandIcon.tsx │ │ │ ├── FilterIcon.tsx │ │ │ ├── FlipIcon.tsx │ │ │ ├── GlobalIcon.tsx │ │ │ ├── HistoryIcon.tsx │ │ │ ├── HomeIcon.tsx │ │ │ ├── InfoIcon.tsx │ │ │ ├── LibraryIcon.tsx │ │ │ ├── LogInIcon.tsx │ │ │ ├── LogOutIcon.tsx │ │ │ ├── MailEditIcon.tsx │ │ │ ├── MenuIcon.tsx │ │ │ ├── MoonIcon.tsx │ │ │ ├── MovieIcon.tsx │ │ │ ├── NextIcon.tsx │ │ │ ├── PaperPlusIcon.tsx │ │ │ ├── Password.tsx │ │ │ ├── PauseIcon.tsx │ │ │ ├── PhotoIcon.tsx │ │ │ ├── PlayIcon.tsx │ │ │ ├── PreviousIcon.tsx │ │ │ ├── RatioIcon.tsx │ │ │ ├── RefreshIcon.tsx │ │ │ ├── SearchIcon.tsx │ │ │ ├── SettingsIcon.tsx │ │ │ ├── ShareIcon.tsx │ │ │ ├── SortIcon.tsx │ │ │ ├── StarIcon.tsx │ │ │ ├── StopIcon.tsx │ │ │ ├── SubtitleIcon.tsx │ │ │ ├── SunIcon.tsx │ │ │ ├── TickIcon.tsx │ │ │ ├── TrendingUpIcon.tsx │ │ │ ├── TvIcon.tsx │ │ │ ├── TwoUsersIcon.tsx │ │ │ ├── UserIcon.tsx │ │ │ ├── ViewGridCardIcon.tsx │ │ │ ├── ViewGridDetailIcon.tsx │ │ │ ├── ViewGridTableIcon.tsx │ │ │ ├── VolumeOffIcon.tsx │ │ │ └── VolumeUpIcon.tsx │ │ └── lotties/ │ │ ├── external-link-black.json │ │ ├── external-link-white.json │ │ ├── lottieflow-arrow-08-1-000000-easey.json │ │ ├── lottieflow-arrow-08-1-0072F5-easey.json │ │ ├── lottieflow-arrow-08-1-FFFFFF-easey.json │ │ ├── lottieflow-arrow-08-2-000000-easey.json │ │ ├── lottieflow-arrow-08-2-FFFFFF-easey.json │ │ ├── lottieflow-dropdown-03-0072F5-easey.json │ │ ├── lottieflow-dropdown-08-0072F5-easey.json │ │ ├── lottieflow-menu-nav-11-6-000000-easey.json │ │ ├── lottieflow-menu-nav-11-6-FFFFFF-easey.json │ │ ├── lottieflow-social-networks-15-10-000000-easey.json │ │ ├── lottieflow-social-networks-15-10-FFFFFF-easey.json │ │ ├── lottieflow-social-networks-15-4-000000-easey.json │ │ ├── lottieflow-social-networks-15-4-FFFFFF-easey.json │ │ ├── lottieflow-social-networks-15-5-000000-easey.json │ │ └── lottieflow-social-networks-15-5-FFFFFF-easey.json │ ├── components/ │ │ ├── elements/ │ │ │ ├── AspectRatio.tsx │ │ │ ├── Breadcrumb.tsx │ │ │ ├── Dialog.tsx │ │ │ ├── Image.tsx │ │ │ ├── NavigationMenu.tsx │ │ │ ├── Popover.tsx │ │ │ ├── ScrollArea.tsx │ │ │ ├── SearchForm.tsx │ │ │ ├── Select.tsx │ │ │ ├── Sheet.tsx │ │ │ ├── Slider.tsx │ │ │ ├── dialog/ │ │ │ │ ├── AddSubtitleDialog.tsx │ │ │ │ ├── SearchSubtitleDialog.tsx │ │ │ │ ├── SelectProviderDialog.tsx │ │ │ │ └── WatchTrailerDialog.tsx │ │ │ ├── player/ │ │ │ │ ├── ArtPlayer.tsx │ │ │ │ ├── PlayerError.tsx │ │ │ │ ├── PlayerHotkey.ts │ │ │ │ ├── PlayerSettings.tsx │ │ │ │ └── playerStyles.ts │ │ │ ├── shared/ │ │ │ │ ├── AuthForm.tsx │ │ │ │ ├── ErrorBoundaryView.tsx │ │ │ │ ├── Filter.tsx │ │ │ │ ├── ListEpisodes.tsx │ │ │ │ ├── ListViewChangeButton.tsx │ │ │ │ ├── Rating.tsx │ │ │ │ ├── ResizablePanel.tsx │ │ │ │ └── WatchDetail.tsx │ │ │ └── tab/ │ │ │ ├── TabLink.tsx │ │ │ └── Tabs.tsx │ │ ├── layouts/ │ │ │ ├── ActionButtons.tsx │ │ │ ├── BottomNav.tsx │ │ │ ├── ControlNavigation.tsx │ │ │ ├── GlobalPlayer.tsx │ │ │ ├── Header.tsx │ │ │ ├── Layout.tsx │ │ │ ├── MobileHeader.tsx │ │ │ ├── MultiLevelDropdown.tsx │ │ │ ├── SideBar.tsx │ │ │ └── TailwindIndicator.tsx │ │ ├── media/ │ │ │ ├── MediaDetail.tsx │ │ │ ├── MediaList.tsx │ │ │ ├── PeopleDetail.tsx │ │ │ ├── item/ │ │ │ │ ├── BannerItem.tsx │ │ │ │ ├── BannerItemCompact.tsx │ │ │ │ ├── BannerItemDesktop.tsx │ │ │ │ ├── BannerItemMobile.tsx │ │ │ │ ├── CardItem.tsx │ │ │ │ ├── HistoryItem.tsx │ │ │ │ └── index.tsx │ │ │ └── list/ │ │ │ ├── MediaListBanner.tsx │ │ │ ├── MediaListCard.tsx │ │ │ ├── MediaListGrid.tsx │ │ │ └── index.tsx │ │ └── styles/ │ │ ├── nprogress.css │ │ └── primitives.ts │ ├── constants/ │ │ ├── episodeTypes.ts │ │ ├── featuredList.ts │ │ ├── filterItems.ts │ │ ├── languages.ts │ │ ├── settings.ts │ │ └── tabLinks.ts │ ├── context/ │ │ └── isbot.context.tsx │ ├── entry.client.tsx │ ├── entry.server.tsx │ ├── entry.worker.ts │ ├── root.tsx │ ├── routes/ │ │ ├── [manifest.webmanifest].ts │ │ ├── _auth+/ │ │ │ ├── sign-in.tsx │ │ │ ├── sign-out.tsx │ │ │ └── sign-up.tsx │ │ ├── _index.tsx │ │ ├── admin+/ │ │ │ ├── cache.tsx │ │ │ └── cache_.$cacheKey.ts │ │ ├── anime+/ │ │ │ ├── $animeId+/ │ │ │ │ ├── _index.tsx │ │ │ │ ├── characters.tsx │ │ │ │ ├── episodes.tsx │ │ │ │ └── staff.tsx │ │ │ ├── $animeId.tsx │ │ │ ├── $animeId_.episode.$episodeId.watch.tsx │ │ │ ├── _index.tsx │ │ │ ├── popular.tsx │ │ │ ├── random.tsx │ │ │ ├── recent-episodes.tsx │ │ │ └── trending.tsx │ │ ├── anime.tsx │ │ ├── api+/ │ │ │ ├── color-palette.ts │ │ │ ├── history.ts │ │ │ ├── image.ts │ │ │ ├── media.ts │ │ │ ├── ogimage.tsx │ │ │ ├── provider.ts │ │ │ ├── subtitles.download.ts │ │ │ ├── subtitles.search.ts │ │ │ └── youtube-video.ts │ │ ├── design-system+/ │ │ │ ├── accordion.tsx │ │ │ ├── avatar.tsx │ │ │ ├── badge.tsx │ │ │ ├── button.tsx │ │ │ ├── card.tsx │ │ │ ├── colors.tsx │ │ │ ├── dialog.tsx │ │ │ ├── divider.tsx │ │ │ ├── icons.tsx │ │ │ ├── image.tsx │ │ │ ├── input.tsx │ │ │ ├── pagination.tsx │ │ │ ├── popover.tsx │ │ │ ├── progress.tsx │ │ │ ├── scroll-area.tsx │ │ │ ├── select.tsx │ │ │ ├── skeleton.tsx │ │ │ ├── slider.tsx │ │ │ ├── switch.tsx │ │ │ ├── tabs.tsx │ │ │ ├── toast.tsx │ │ │ ├── tooltip.tsx │ │ │ ├── typography.tsx │ │ │ └── video-player.tsx │ │ ├── design-system.tsx │ │ ├── discover+/ │ │ │ ├── _index.tsx │ │ │ ├── anime.tsx │ │ │ ├── movies.tsx │ │ │ └── tv-shows.tsx │ │ ├── discover.tsx │ │ ├── genres+/ │ │ │ ├── anime.tsx │ │ │ ├── movie.tsx │ │ │ └── tv.tsx │ │ ├── genres.tsx │ │ ├── lists+/ │ │ │ ├── $listId.tsx │ │ │ └── _index.tsx │ │ ├── movies+/ │ │ │ ├── $movieId+/ │ │ │ │ ├── _index.tsx │ │ │ │ ├── cast.tsx │ │ │ │ ├── crew.tsx │ │ │ │ ├── photos.tsx │ │ │ │ ├── recommendations.tsx │ │ │ │ ├── similar.tsx │ │ │ │ └── videos.tsx │ │ │ ├── $movieId.tsx │ │ │ ├── $movieId_.watch.tsx │ │ │ ├── _index.tsx │ │ │ ├── now-playing.tsx │ │ │ ├── popular.tsx │ │ │ ├── top-rated.tsx │ │ │ └── upcoming.tsx │ │ ├── movies.tsx │ │ ├── people+/ │ │ │ ├── $peopleId+/ │ │ │ │ ├── _index.tsx │ │ │ │ ├── credits.tsx │ │ │ │ └── media.tsx │ │ │ ├── $peopleId.tsx │ │ │ └── _index.tsx │ │ ├── robots[.txt].tsx │ │ ├── search+/ │ │ │ ├── _index.tsx │ │ │ ├── anime+/ │ │ │ │ ├── $animeKeyword.tsx │ │ │ │ └── _index.tsx │ │ │ ├── movie+/ │ │ │ │ ├── $movieKeyword.tsx │ │ │ │ └── _index.tsx │ │ │ ├── people+/ │ │ │ │ ├── $peopleKeyword.tsx │ │ │ │ └── _index.tsx │ │ │ └── tv+/ │ │ │ ├── $tvKeyword.tsx │ │ │ └── _index.tsx │ │ ├── search.tsx │ │ ├── settings.tsx │ │ ├── sitemap[.]xml.tsx │ │ ├── test.tsx │ │ ├── trending+/ │ │ │ ├── $mediaType+/ │ │ │ │ ├── today.tsx │ │ │ │ └── week.tsx │ │ │ ├── $mediaType.tsx │ │ │ └── _index.tsx │ │ ├── trending.tsx │ │ ├── tv-shows+/ │ │ │ ├── $tvId+/ │ │ │ │ ├── _index.tsx │ │ │ │ ├── cast.tsx │ │ │ │ ├── crew.tsx │ │ │ │ ├── photos.tsx │ │ │ │ ├── recommendations.tsx │ │ │ │ ├── similar.tsx │ │ │ │ └── videos.tsx │ │ │ ├── $tvId.tsx │ │ │ ├── $tvId_.season.$seasonId+/ │ │ │ │ ├── _index.tsx │ │ │ │ ├── cast.tsx │ │ │ │ ├── crew.tsx │ │ │ │ ├── photos.tsx │ │ │ │ └── videos.tsx │ │ │ ├── $tvId_.season.$seasonId.tsx │ │ │ ├── $tvId_.season.$seasonId_.episode.$episodeId.watch.tsx │ │ │ ├── _index.tsx │ │ │ ├── airing-today.tsx │ │ │ ├── on-the-air.tsx │ │ │ ├── popular.tsx │ │ │ └── top-rated.tsx │ │ ├── tv-shows.tsx │ │ └── watch-history.tsx │ ├── services/ │ │ ├── aniskip/ │ │ │ └── aniskip.server.ts │ │ ├── configs.server.ts │ │ ├── consumet/ │ │ │ ├── anilist/ │ │ │ │ ├── anilist.server.ts │ │ │ │ ├── anilist.types.ts │ │ │ │ └── utils.server.ts │ │ │ └── bilibili/ │ │ │ ├── bilibili.server.ts │ │ │ ├── bilibili.types.ts │ │ │ └── utils.server.ts │ │ ├── i18n/ │ │ │ ├── i18n.config.ts │ │ │ ├── i18next.server.ts │ │ │ └── index.ts │ │ ├── kisskh/ │ │ │ ├── kisskh.server.ts │ │ │ ├── kisskh.types.ts │ │ │ └── utils.server.ts │ │ ├── loklok/ │ │ │ ├── index.ts │ │ │ ├── loklok.type.ts │ │ │ ├── media.server.ts │ │ │ ├── movie.server.ts │ │ │ ├── tv.server.ts │ │ │ └── utils.server.ts │ │ ├── open-subtitles/ │ │ │ ├── open-subtitles.server.ts │ │ │ ├── open-subtitles.types.ts │ │ │ └── utils.server.ts │ │ ├── provider.server.ts │ │ ├── supabase/ │ │ │ ├── auth.server.ts │ │ │ ├── client.server.ts │ │ │ ├── cookie.server.ts │ │ │ ├── index.ts │ │ │ ├── table.server.ts │ │ │ └── tables.sql │ │ ├── tmdb/ │ │ │ ├── tmdb.server.ts │ │ │ ├── tmdb.types.ts │ │ │ └── utils.server.ts │ │ └── youtube/ │ │ ├── utils.server.ts │ │ ├── youtube.server.ts │ │ └── youtube.types.ts │ ├── store/ │ │ ├── card/ │ │ │ └── useCardHoverStore.ts │ │ ├── layout/ │ │ │ ├── useHeaderStyle.ts │ │ │ ├── useHistoryStack.ts │ │ │ └── useLayout.ts │ │ └── player/ │ │ └── usePlayerState.ts │ ├── styles/ │ │ ├── tailwind.css │ │ └── themes.config.ts │ ├── types/ │ │ ├── handle.ts │ │ └── media.ts │ └── utils/ │ ├── client/ │ │ ├── gtags.client.ts │ │ ├── meta-tags.client.ts │ │ └── update-history.ts │ ├── encode.ts │ ├── file.ts │ ├── function.ts │ ├── index.ts │ ├── media.ts │ ├── merge-meta.ts │ ├── misc.ts │ ├── object.ts │ ├── react/ │ │ ├── ClientOnly.tsx │ │ └── hooks/ │ │ ├── useColorDarkenLighten.ts │ │ ├── useGlobalNavigationState.ts │ │ ├── useHeader.ts │ │ ├── useHydrated.ts │ │ ├── useIsomorphicLayoutEffect.ts │ │ ├── useLocalStorage.ts │ │ ├── useSplitArrayIntoPage.ts │ │ ├── useToast.ts │ │ └── useTypedRouteLoaderData.ts │ └── server/ │ ├── cache.server.ts │ ├── http.ts │ ├── og.server.tsx │ ├── singleton.server.ts │ └── toast-session.server.ts ├── package.json ├── postcss.config.js ├── public/ │ └── locales/ │ ├── en/ │ │ ├── auth.json │ │ ├── common.json │ │ ├── discover.json │ │ ├── genres.json │ │ ├── header.json │ │ ├── settings.json │ │ └── sidebar.json │ ├── fr/ │ │ ├── auth.json │ │ ├── common.json │ │ ├── discover.json │ │ ├── genres.json │ │ ├── header.json │ │ ├── settings.json │ │ └── sidebar.json │ └── vi/ │ ├── auth.json │ ├── common.json │ ├── discover.json │ ├── genres.json │ ├── header.json │ ├── settings.json │ └── sidebar.json ├── remix.config.js ├── remix.env.d.ts ├── tailwind.config.js ├── tsconfig.json └── vercel.json
SYMBOL INDEX (308 symbols across 158 files)
FILE: app/assets/icons/AnilistStatIcon.tsx
type IAnilistStatProps (line 25) | interface IAnilistStatProps {
FILE: app/assets/icons/AnimeIcon.tsx
type IAnimeProps (line 19) | interface IAnimeProps {
FILE: app/assets/icons/ArrowIcon.tsx
type IArrowProps (line 29) | interface IArrowProps {
FILE: app/assets/icons/BrushIcon.tsx
type IBrushProps (line 30) | interface IBrushProps {
FILE: app/assets/icons/CategoryIcon.tsx
type ICategoryProps (line 56) | interface ICategoryProps {
FILE: app/assets/icons/ChevronDownIcon.tsx
type IChevronDownProps (line 24) | interface IChevronDownProps {
FILE: app/assets/icons/ChevronLeftIcon.tsx
type IChevronLeftProps (line 25) | interface IChevronLeftProps {
FILE: app/assets/icons/ChevronRightIcon.tsx
type IChevronRightProps (line 23) | interface IChevronRightProps {
FILE: app/assets/icons/ChevronUpIcon.tsx
type IChevronUpProps (line 24) | interface IChevronUpProps {
FILE: app/assets/icons/CloseIcon.tsx
type ICloseProps (line 17) | interface ICloseProps {
FILE: app/assets/icons/DiscoverIcon.tsx
type IDiscoverProps (line 23) | interface IDiscoverProps {
FILE: app/assets/icons/ExpandIcon.tsx
type IExpandProps (line 47) | interface IExpandProps {
FILE: app/assets/icons/FilterIcon.tsx
type IFilterProps (line 56) | interface IFilterProps {
FILE: app/assets/icons/FlipIcon.tsx
type IFlipProps (line 53) | interface IFlipProps {
FILE: app/assets/icons/GlobalIcon.tsx
type IGlobalProps (line 67) | interface IGlobalProps {
FILE: app/assets/icons/HistoryIcon.tsx
type IHistoryProps (line 15) | interface IHistoryProps {
FILE: app/assets/icons/HomeIcon.tsx
type IHomeProps (line 24) | interface IHomeProps {
FILE: app/assets/icons/InfoIcon.tsx
type IInfoProps (line 45) | interface IInfoProps {
FILE: app/assets/icons/LibraryIcon.tsx
type ILibraryProps (line 15) | interface ILibraryProps {
FILE: app/assets/icons/LogInIcon.tsx
type ILogInProps (line 31) | interface ILogInProps {
FILE: app/assets/icons/LogOutIcon.tsx
type ILogOutProps (line 31) | interface ILogOutProps {
FILE: app/assets/icons/MailEditIcon.tsx
type IMailEditProps (line 35) | interface IMailEditProps {
FILE: app/assets/icons/MenuIcon.tsx
type IMenuProps (line 27) | interface IMenuProps {
FILE: app/assets/icons/MoonIcon.tsx
type IMoonProps (line 19) | interface IMoonProps {
FILE: app/assets/icons/MovieIcon.tsx
type IMovieProps (line 83) | interface IMovieProps {
FILE: app/assets/icons/NextIcon.tsx
type INextProps (line 27) | interface INextProps {
FILE: app/assets/icons/PaperPlusIcon.tsx
type IPaperPlusProps (line 55) | interface IPaperPlusProps {
FILE: app/assets/icons/Password.tsx
type IPasswordProps (line 39) | interface IPasswordProps {
FILE: app/assets/icons/PauseIcon.tsx
type IPauseProps (line 33) | interface IPauseProps {
FILE: app/assets/icons/PhotoIcon.tsx
type IPhotoProps (line 44) | interface IPhotoProps {
FILE: app/assets/icons/PlayIcon.tsx
type IPlayProps (line 97) | interface IPlayProps {
FILE: app/assets/icons/PreviousIcon.tsx
type IPreviousProps (line 27) | interface IPreviousProps {
FILE: app/assets/icons/RatioIcon.tsx
type IRatioProps (line 85) | interface IRatioProps {
FILE: app/assets/icons/RefreshIcon.tsx
type IRefreshProps (line 37) | interface IRefreshProps {
FILE: app/assets/icons/SearchIcon.tsx
type ISearchProps (line 25) | interface ISearchProps {
FILE: app/assets/icons/SettingsIcon.tsx
type ISettingsProps (line 37) | interface ISettingsProps {
FILE: app/assets/icons/ShareIcon.tsx
type IShareProps (line 59) | interface IShareProps {
FILE: app/assets/icons/SortIcon.tsx
type ISortProps (line 56) | interface ISortProps {
FILE: app/assets/icons/StarIcon.tsx
type IStarProps (line 26) | interface IStarProps {
FILE: app/assets/icons/StopIcon.tsx
type IStopProps (line 17) | interface IStopProps {
FILE: app/assets/icons/SubtitleIcon.tsx
type ISubtitleProps (line 50) | interface ISubtitleProps {
FILE: app/assets/icons/SunIcon.tsx
type ISunProps (line 27) | interface ISunProps {
FILE: app/assets/icons/TickIcon.tsx
type ITickProps (line 26) | interface ITickProps {
FILE: app/assets/icons/TrendingUpIcon.tsx
type ITrendingUpProps (line 27) | interface ITrendingUpProps {
FILE: app/assets/icons/TvIcon.tsx
type ITvProps (line 19) | interface ITvProps {
FILE: app/assets/icons/TwoUsersIcon.tsx
type ITwoUsersProps (line 54) | interface ITwoUsersProps {
FILE: app/assets/icons/UserIcon.tsx
type IUserProps (line 38) | interface IUserProps {
FILE: app/assets/icons/ViewGridCardIcon.tsx
type IViewGridProps (line 102) | interface IViewGridProps {
FILE: app/assets/icons/ViewGridDetailIcon.tsx
type IViewGridProps (line 98) | interface IViewGridProps {
FILE: app/assets/icons/ViewGridTableIcon.tsx
type IViewGridTableProps (line 118) | interface IViewGridTableProps {
FILE: app/assets/icons/VolumeOffIcon.tsx
type IVolumneOffProps (line 45) | interface IVolumneOffProps {
FILE: app/assets/icons/VolumeUpIcon.tsx
type IVolumneUpProps (line 45) | interface IVolumneUpProps {
FILE: app/components/elements/Breadcrumb.tsx
function getValidChildren (line 7) | function getValidChildren(children: React.ReactNode) {
type BreadcrumbProps (line 13) | interface BreadcrumbProps extends React.ComponentPropsWithoutRef<'nav'> {
type BreadcrumbItemProps (line 72) | interface BreadcrumbItemProps extends BreadcrumbProps {
type BreadcrumbSeparatorProps (line 111) | type BreadcrumbSeparatorProps = React.ComponentPropsWithoutRef<'span'>;
FILE: app/components/elements/Image.tsx
type UseImageProps (line 6) | type UseImageProps = NextuiImageProps & RemixImageProps;
type ImageProps (line 8) | interface ImageProps extends Omit<UseImageProps, 'ref' | 'isBlurred' | '...
FILE: app/components/elements/SearchForm.tsx
type ISearchForm (line 6) | interface ISearchForm {
FILE: app/components/elements/Sheet.tsx
type SheetContentProps (line 121) | interface SheetContentProps
FILE: app/components/elements/dialog/AddSubtitleDialog.tsx
type IAddSubtitlesProps (line 10) | interface IAddSubtitlesProps {
FILE: app/components/elements/dialog/SearchSubtitleDialog.tsx
type ISearchSubtitlesProps (line 27) | interface ISearchSubtitlesProps {
FILE: app/components/elements/dialog/SelectProviderDialog.tsx
type SelectProviderProps (line 10) | type SelectProviderProps = {
FILE: app/components/elements/dialog/WatchTrailerDialog.tsx
type Trailer (line 6) | type Trailer = {
type WatchTrailerProps (line 19) | type WatchTrailerProps = {
FILE: app/components/elements/player/ArtPlayer.tsx
type IPlayerProps (line 19) | interface IPlayerProps {
FILE: app/components/elements/player/PlayerError.tsx
type IPlayerErrorProps (line 3) | interface IPlayerErrorProps {
FILE: app/components/elements/player/PlayerHotkey.ts
function PlayerHotKey (line 4) | function PlayerHotKey(art: Artplayer, setShowSubtitle: Dispatch<SetState...
FILE: app/components/elements/player/PlayerSettings.tsx
type IPlayerSettingsProps (line 26) | interface IPlayerSettingsProps {
type SettingsOption (line 60) | type SettingsOption = {
FILE: app/components/elements/shared/AuthForm.tsx
type IAuthForm (line 15) | interface IAuthForm {
FILE: app/components/elements/shared/ErrorBoundaryView.tsx
type StatusHandler (line 8) | type StatusHandler = (info: {
function ErrorBoundary (line 13) | function ErrorBoundary(props: {
FILE: app/components/elements/shared/Filter.tsx
type IFilterProps (line 32) | interface IFilterProps {
FILE: app/components/elements/shared/ListEpisodes.tsx
type IListEpisodesProps (line 30) | interface IListEpisodesProps {
FILE: app/components/elements/shared/Rating.tsx
type IRatingProps (line 6) | interface IRatingProps {
FILE: app/components/elements/shared/WatchDetail.tsx
type IWatchDetailProps (line 18) | interface IWatchDetailProps {
FILE: app/components/elements/tab/TabLink.tsx
type ITabProps (line 14) | interface ITabProps {
FILE: app/components/layouts/BottomNav.tsx
type IBottomNavProps (line 20) | interface IBottomNavProps {
FILE: app/components/layouts/GlobalPlayer.tsx
type Highlight (line 43) | type Highlight = {
FILE: app/components/layouts/Header.tsx
type IHeaderProps (line 15) | interface IHeaderProps {
FILE: app/components/layouts/Layout.tsx
type ILayout (line 40) | interface ILayout {
FILE: app/components/layouts/MultiLevelDropdown.tsx
type IMultiLevelDropdownProps (line 29) | interface IMultiLevelDropdownProps {
FILE: app/components/media/MediaDetail.tsx
type IMediaDetail (line 40) | interface IMediaDetail {
type IMediaBackground (line 49) | interface IMediaBackground {
type IAnimeDetail (line 54) | interface IAnimeDetail {
FILE: app/components/media/MediaList.tsx
type IMediaListProps (line 30) | interface IMediaListProps {
FILE: app/components/media/PeopleDetail.tsx
type IPeopleDetailProps (line 22) | interface IPeopleDetailProps {
FILE: app/components/media/item/BannerItem.tsx
type IBannerItemProps (line 10) | interface IBannerItemProps {
FILE: app/components/media/item/BannerItemCompact.tsx
type IBannerItemCompactProps (line 15) | interface IBannerItemCompactProps {
FILE: app/components/media/item/BannerItemDesktop.tsx
type IBannerItemDesktopProps (line 34) | interface IBannerItemDesktopProps {
FILE: app/components/media/item/BannerItemMobile.tsx
type IBannerItemMobileProps (line 15) | interface IBannerItemMobileProps {
FILE: app/components/media/item/CardItem.tsx
type ICardItemProps (line 29) | interface ICardItemProps {
FILE: app/components/media/item/HistoryItem.tsx
type IHistoryItem (line 10) | interface IHistoryItem {
FILE: app/components/media/item/index.tsx
type IMediaItem (line 7) | interface IMediaItem {
FILE: app/components/media/list/MediaListBanner.tsx
type IMediaListBannerProps (line 147) | interface IMediaListBannerProps {
FILE: app/components/media/list/MediaListCard.tsx
type IMediaListCardProps (line 10) | interface IMediaListCardProps {
FILE: app/components/media/list/MediaListGrid.tsx
type IMediaListCardProps (line 21) | interface IMediaListCardProps {
type AnimeListItems (line 37) | type AnimeListItems = Omit<IAnimeList, 'results'> & { results: IMedia[] };
FILE: app/context/isbot.context.tsx
type Props (line 3) | type Props = { isBot: boolean; children: ReactNode };
FILE: app/entry.worker.ts
constant PAGES (line 14) | const PAGES = 'page-cache';
constant DATA (line 15) | const DATA = 'data-cache';
constant ASSETS (line 16) | const ASSETS = 'assets-cache';
FILE: app/root.tsx
type DocumentProps (line 82) | interface DocumentProps {
function useLoadingIndicator (line 248) | function useLoadingIndicator() {
function ElementScrollRestoration (line 274) | function ElementScrollRestoration({
function useDetectSWUpdate (line 358) | function useDetectSWUpdate() {
function ErrorBoundary (line 559) | function ErrorBoundary() {
FILE: app/routes/_auth+/sign-in.tsx
type ActionData (line 16) | type ActionData = {
FILE: app/routes/_auth+/sign-up.tsx
type ActionData (line 18) | type ActionData = {
FILE: app/routes/admin+/cache.tsx
function ErrorBoundary (line 215) | function ErrorBoundary({ error }: { error: Error }) {
FILE: app/routes/admin+/cache_.$cacheKey.ts
function loader (line 7) | async function loader({ request, params }: DataFunctionArgs) {
FILE: app/routes/anime+/$animeId.tsx
function ErrorBoundary (line 168) | function ErrorBoundary() {
FILE: app/routes/anime+/$animeId_.episode.$episodeId.watch.tsx
function ErrorBoundary (line 813) | function ErrorBoundary() {
FILE: app/routes/api+/color-palette.ts
type Result (line 6) | interface Result {
type ColorPalette (line 10) | interface ColorPalette {
FILE: app/routes/api+/image.ts
type DiskCacheConfig (line 26) | interface DiskCacheConfig extends CacheConfig {
class CustomDiskCache (line 33) | class CustomDiskCache extends Cache {
method constructor (line 37) | constructor(config: Partial<DiskCacheConfig> | null | undefined = {}) {
method status (line 49) | async status(key: string): Promise<CacheStatus> {
method has (line 53) | async has(key: string): Promise<boolean> {
method get (line 57) | async get(key: string): Promise<Uint8Array | null> {
method set (line 69) | async set(key: string, resultImg: Uint8Array): Promise<void> {
method clear (line 73) | async clear(): Promise<void> {
FILE: app/routes/api+/ogimage.tsx
function loader (line 12) | async function loader({ request }: LoaderFunctionArgs) {
FILE: app/routes/movies+/$movieId.tsx
function ErrorBoundary (line 247) | function ErrorBoundary() {
FILE: app/routes/movies+/$movieId_.watch.tsx
function ErrorBoundary (line 362) | function ErrorBoundary() {
FILE: app/routes/people+/$peopleId.tsx
function ErrorBoundary (line 119) | function ErrorBoundary() {
FILE: app/routes/robots[.txt].tsx
function loader (line 3) | function loader() {
FILE: app/routes/settings.tsx
type SettingBlockCommonProps (line 104) | interface SettingBlockCommonProps {
type SettingBlockSelectProps (line 108) | interface SettingBlockSelectProps extends SettingBlockCommonProps {
type SettingBlockSwitchProps (line 115) | interface SettingBlockSwitchProps extends SettingBlockCommonProps {
type SettingBlockKbdProps (line 120) | interface SettingBlockKbdProps extends SettingBlockCommonProps {
type SettingBlockProps (line 134) | type SettingBlockProps =
FILE: app/routes/sitemap[.]xml.tsx
function loader (line 5) | function loader({ request }: LoaderFunctionArgs) {
FILE: app/routes/tv-shows+/$tvId.tsx
function ErrorBoundary (line 241) | function ErrorBoundary() {
FILE: app/routes/tv-shows+/$tvId_.season.$seasonId.tsx
function ErrorBoundary (line 348) | function ErrorBoundary() {
FILE: app/routes/tv-shows+/$tvId_.season.$seasonId_.episode.$episodeId.watch.tsx
function ErrorBoundary (line 500) | function ErrorBoundary() {
FILE: app/services/aniskip/aniskip.server.ts
type IAniSkipResponse (line 3) | interface IAniSkipResponse {
type IAniskipResults (line 10) | interface IAniskipResults {
type IInterval (line 17) | interface IInterval {
FILE: app/services/configs.server.ts
type ISGConfigs (line 4) | interface ISGConfigs {
FILE: app/services/consumet/anilist/anilist.types.ts
type IAnimeList (line 3) | interface IAnimeList {
type IAnimeEpisode (line 11) | interface IAnimeEpisode {
type IAnimeInfo (line 25) | interface IAnimeInfo {
type IAnimeEpisodeStream (line 58) | interface IAnimeEpisodeStream {
type IAnimeResult (line 63) | interface IAnimeResult {
type Title (line 84) | interface Title {
type ITrailer (line 91) | interface ITrailer {
type Type (line 97) | enum Type {
type ICharacter (line 107) | interface ICharacter {
type IVoiceActor (line 115) | interface IVoiceActor {
type IName (line 121) | interface IName {
type IDate (line 129) | interface IDate {
type IEpisodeInfo (line 135) | interface IEpisodeInfo {
type IAiring (line 147) | interface IAiring {
type Headers (line 153) | interface Headers {
type Source (line 157) | interface Source {
FILE: app/services/consumet/bilibili/bilibili.types.ts
type IBilibiliSearch (line 2) | interface IBilibiliSearch {
type IBilibiliResult (line 7) | interface IBilibiliResult {
type IBilibiliInfo (line 16) | interface IBilibiliInfo {
type Episode (line 28) | interface Episode {
type IBilibiliEpisode (line 35) | interface IBilibiliEpisode {
type Subtitle (line 43) | interface Subtitle {
type Source (line 49) | interface Source {
type Proxy (line 55) | interface Proxy {
FILE: app/services/consumet/bilibili/utils.server.ts
class Bilibili (line 3) | class Bilibili {
FILE: app/services/i18n/i18n.config.ts
constant DEFAULT_LANGUAGE (line 1) | const DEFAULT_LANGUAGE = 'en';
FILE: app/services/i18n/i18next.server.ts
constant TEN_YEARS_IN_SECONDS (line 8) | const TEN_YEARS_IN_SECONDS = 10 * 365 * 24 * 60 * 60;
FILE: app/services/kisskh/kisskh.types.ts
type ISearchItem (line 2) | interface ISearchItem {
type IItemInfo (line 11) | interface IItemInfo {
type Episode (line 28) | interface Episode {
type IEpisodeVideo (line 34) | interface IEpisodeVideo {
type IVideoSubtitle (line 46) | interface IVideoSubtitle {
FILE: app/services/kisskh/utils.server.ts
class KissKh (line 3) | class KissKh {
FILE: app/services/loklok/loklok.type.ts
type ILoklokSubtitle (line 4) | interface ILoklokSubtitle {
type ILoklokSources (line 10) | interface ILoklokSources {
type ILoklokTag (line 16) | interface ILoklokTag {
type ILoklokLikeItem (line 21) | interface ILoklokLikeItem {
type ILoklokRefItem (line 41) | interface ILoklokRefItem {
type ILoklokStarItem (line 51) | interface ILoklokStarItem {
type ILoklokInfoData (line 58) | interface ILoklokInfoData {
type ILoklokMediaInfo (line 107) | interface ILoklokMediaInfo {
type ILoklokSearchData (line 113) | interface ILoklokSearchData {
FILE: app/services/loklok/utils.server.ts
constant LOKLOK_URL (line 4) | const LOKLOK_URL = env.LOKLOK_API_URL;
FILE: app/services/open-subtitles/open-subtitles.types.ts
type ISubtitlesSearch (line 1) | interface ISubtitlesSearch {
type ISubtitleDownload (line 9) | interface ISubtitleDownload {
type ISubtitle (line 19) | interface ISubtitle {
type IAttributes (line 25) | interface IAttributes {
type IFeatureDetails (line 50) | interface IFeatureDetails {
type IFile (line 60) | interface IFile {
type IRelatedLinks (line 66) | interface IRelatedLinks {
type IUploader (line 72) | interface IUploader {
FILE: app/services/open-subtitles/utils.server.ts
class Opensubtitles (line 1) | class Opensubtitles {
FILE: app/services/provider.server.ts
type Provider (line 13) | type Provider = {
FILE: app/services/supabase/auth.server.ts
function requestPayload (line 31) | async function requestPayload(req: Request) {
function authenticate (line 41) | async function authenticate(
FILE: app/services/supabase/table.server.ts
type IHistoryDTO (line 3) | interface IHistoryDTO {
type IHistory (line 17) | interface IHistory extends IHistoryDTO {
type Database (line 23) | interface Database {
function insertHistory (line 34) | async function insertHistory(_history: IHistoryDTO) {
function getHistory (line 82) | async function getHistory(
function getCountHistory (line 121) | async function getCountHistory(
FILE: app/services/supabase/tables.sql
type histories (line 1) | CREATE TABLE histories (
FILE: app/services/tmdb/tmdb.types.ts
type PosterSize (line 4) | type PosterSize = 'w92' | 'w154' | 'w185' | 'w342' | 'w500' | 'w780' | '...
type BackdropSize (line 5) | type BackdropSize = 'w300' | 'w780' | 'w1280' | 'original';
type LogoSize (line 6) | type LogoSize = 'w45' | 'w92' | 'w154' | 'w185' | 'w300' | 'w500' | 'ori...
type ProfileSize (line 7) | type ProfileSize = 'w45' | 'w185' | 'h632' | 'original';
type StillSize (line 8) | type StillSize = 'w92' | 'w185' | 'w300' | 'original';
type MediaType (line 10) | type MediaType = 'all' | 'movie' | 'tv' | 'person';
type TimeWindowType (line 11) | type TimeWindowType = 'day' | 'week';
type ListMovieType (line 12) | type ListMovieType = 'upcoming' | 'top_rated' | 'popular' | 'now_playing';
type ListTvShowType (line 13) | type ListTvShowType = 'on_the_air' | 'popular' | 'top_rated' | 'airing_t...
type ListPersonType (line 14) | type ListPersonType = 'popular' | 'latest';
type IMediaList (line 22) | interface IMediaList {
type IMovieDetail (line 29) | interface IMovieDetail {
type IGenre (line 73) | interface IGenre {
type IListGenre (line 78) | interface IListGenre {
type ICredit (line 82) | interface ICredit {
type IVideos (line 88) | interface IVideos {
type ITvShowDetail (line 104) | interface ITvShowDetail {
type IPeople (line 184) | interface IPeople {
type IListPeople (line 202) | interface IListPeople {
type IPeopleDetail (line 209) | interface IPeopleDetail {
type IPeopleExternalIds (line 226) | interface IPeopleExternalIds {
type IPeopleImages (line 237) | interface IPeopleImages {
type IPeopleCredits (line 242) | interface IPeopleCredits {
type IDetailImages (line 248) | interface IDetailImages {
type IImage (line 255) | interface IImage {
type IMovieTranslations (line 265) | interface IMovieTranslations {
type ITranslation (line 270) | interface ITranslation {
type IDataTranslation (line 278) | interface IDataTranslation {
type ILanguage (line 287) | interface ILanguage {
type ISeasonDetail (line 293) | interface ISeasonDetail {
type IEpisode (line 304) | interface IEpisode {
type IList (line 321) | interface IList {
type IMovieSource (line 333) | interface IMovieSource {
type IMovieSubtitle (line 340) | interface IMovieSubtitle {
FILE: app/services/tmdb/utils.server.ts
class TMDB (line 16) | class TMDB {
FILE: app/services/youtube/utils.server.ts
class Youtube (line 1) | class Youtube {
FILE: app/services/youtube/youtube.types.ts
type IYoutubeVideoList (line 1) | interface IYoutubeVideoList {
type IYoutubeItem (line 8) | interface IYoutubeItem {
type ContentDetails (line 16) | interface ContentDetails {
type ContentRating (line 26) | interface ContentRating {
type Snippet (line 98) | interface Snippet {
type Localized (line 112) | interface Localized {
type Thumbnails (line 117) | interface Thumbnails {
type Default (line 125) | interface Default {
type PageInfo (line 131) | interface PageInfo {
FILE: app/store/card/useCardHoverStore.ts
type CardHoverState (line 3) | interface CardHoverState {
FILE: app/store/layout/useHeaderStyle.ts
type HeaderStyleState (line 3) | interface HeaderStyleState {
FILE: app/store/layout/useHistoryStack.ts
type HistoryStackState (line 3) | interface HistoryStackState {
FILE: app/store/layout/useLayout.ts
type LayoutState (line 4) | interface LayoutState {
FILE: app/store/player/usePlayerState.ts
type PlayerData (line 8) | type PlayerData =
type QualitySelector (line 45) | type QualitySelector = {
type SubtitleSelector (line 51) | type SubtitleSelector =
type PlayerState (line 60) | interface PlayerState {
FILE: app/types/handle.ts
type Handle (line 5) | type Handle = {
FILE: app/types/media.ts
type IMedia (line 1) | interface IMedia {
type ITrailer (line 46) | interface ITrailer {
type Title (line 52) | interface Title {
type Type (line 59) | enum Type {
FILE: app/utils/client/gtags.client.ts
type Window (line 2) | interface Window {
FILE: app/utils/client/meta-tags.client.ts
function setMetaThemeColor (line 1) | function setMetaThemeColor(color: string) {
function getBackgroundTitleBarColor (line 8) | function getBackgroundTitleBarColor(isHydrated: boolean) {
FILE: app/utils/client/update-history.ts
function updateHistory (line 4) | function updateHistory(
FILE: app/utils/file.ts
function getExt (line 1) | function getExt(url: string): string | undefined {
FILE: app/utils/function.ts
type ThrottleFunction (line 1) | type ThrottleFunction<T extends unknown[], R> = (...args: T) => R;
function throttle (line 3) | function throttle<T extends unknown[], R>(
FILE: app/utils/media.ts
type PosterSize (line 6) | type PosterSize = 'w92' | 'w154' | 'w185' | 'w342' | 'w500' | 'w780' | '...
type BackdropSize (line 7) | type BackdropSize = 'w300' | 'w780' | 'w1280' | 'original';
type LogoSize (line 8) | type LogoSize = 'w45' | 'w92' | 'w154' | 'w185' | 'w300' | 'w500' | 'ori...
type ProfileSize (line 9) | type ProfileSize = 'w45' | 'w185' | 'h632' | 'original';
type StillSize (line 10) | type StillSize = 'w92' | 'w185' | 'w300' | 'original';
class TMDB (line 13) | class TMDB {
FILE: app/utils/merge-meta.ts
function mergeMeta (line 6) | function mergeMeta<
FILE: app/utils/misc.ts
function cn (line 4) | function cn(...inputs: ClassValue[]) {
function getErrorMessage (line 8) | function getErrorMessage(error: unknown) {
function getDomainUrl (line 22) | function getDomainUrl(request: Request) {
function mergeHeaders (line 34) | function mergeHeaders(...headers: Array<Headers>) {
function combineHeaders (line 47) | function combineHeaders(...headers: Array<Headers>) {
function errorBlock (line 57) | function errorBlock(err: unknown) {
FILE: app/utils/object.ts
function swapColorValues (line 1) | function swapColorValues<T extends Record<string, string>>(colors: T) {
FILE: app/utils/react/ClientOnly.tsx
type Props (line 5) | type Props = {
function ClientOnly (line 30) | function ClientOnly({ children, fallback = null }: Props) {
FILE: app/utils/react/hooks/useColorDarkenLighten.ts
function useColorDarkenLighten (line 5) | function useColorDarkenLighten(color?: string) {
FILE: app/utils/react/hooks/useGlobalNavigationState.ts
function useGlobalNavigationState (line 18) | function useGlobalNavigationState() {
function useGlobalPendingState (line 45) | function useGlobalPendingState() {
function useGlobalSubmittingState (line 58) | function useGlobalSubmittingState() {
function useGlobalLoadingState (line 69) | function useGlobalLoadingState() {
FILE: app/utils/react/hooks/useHeader.ts
function useHeaderOptions (line 9) | function useHeaderOptions() {
function useCustomHeaderChangePosition (line 92) | function useCustomHeaderChangePosition(intersection?: IntersectionObserv...
FILE: app/utils/react/hooks/useHydrated.ts
function useHydrated (line 22) | function useHydrated() {
FILE: app/utils/react/hooks/useLocalStorage.ts
function useSoraSettings (line 3) | function useSoraSettings() {
FILE: app/utils/react/hooks/useTypedRouteLoaderData.ts
type Loaders (line 62) | type Loaders = {
function useTypedRouteLoaderData (line 122) | function useTypedRouteLoaderData<T extends keyof Loaders>(route: T) {
FILE: app/utils/server/cache.server.ts
function shouldForceFresh (line 28) | async function shouldForceFresh({
function cachified (line 46) | async function cachified<Value>({
function fetcher (line 74) | async function fetcher<Value>({
FILE: app/utils/server/http.ts
constant CACHE_CONTROL (line 2) | const CACHE_CONTROL = {
FILE: app/utils/server/singleton.server.ts
function singleton (line 5) | function singleton<Value>(name: string, value: () => Value): Value {
FILE: app/utils/server/toast-session.server.ts
constant TOAST_SESSION (line 3) | const TOAST_SESSION = 'toast';
type ToastMessage (line 5) | type ToastMessage = {
function getSessionFromRequest (line 22) | function getSessionFromRequest(request: Request) {
function flashMessageHeaders (line 30) | async function flashMessageHeaders(
function redirectWithToast (line 41) | async function redirectWithToast(
function addToast (line 53) | function addToast(request: Request, toastMessage: ToastMessage): Promise...
function getToastSession (line 59) | function getToastSession(request: Request) {
Condensed preview — 367 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (2,476K chars).
[
{
"path": ".eslintrc.json",
"chars": 3658,
"preview": "{\n \"extends\": [\n \"prettier\",\n \"plugin:prettier/recommended\",\n \"plugin:tailwindcss/recommended\",\n \"plugin:re"
},
{
"path": ".gitignore",
"chars": 102,
"preview": "node_modules\n\n.cache\n.vercel\n.output\n.env\n.vscode\n.node-persist\n\npublic/build\npublic/sw.js\n/api\nbuild\n"
},
{
"path": ".husky/pre-commit",
"chars": 205,
"preview": "#!/bin/sh\n. \"$(dirname \"$0\")/_/husky.sh\"\n\n# check lint/format on staged files\necho \"Run pre-commit tasks\"\npnpm lint-stag"
},
{
"path": ".prettierignore",
"chars": 176,
"preview": "/server/index.js\n/public/build\n\n.cache\n.env\n.env-example\n.vercel\n.output\n.node-persist\n\n/build/\n/api\n\nnode_modules\n/.hus"
},
{
"path": ".prettierrc",
"chars": 786,
"preview": "{\n \"trailingComma\": \"all\",\n \"singleQuote\": true,\n \"semi\": true,\n \"printWidth\": 100,\n \"endOfLine\": \"auto\",\n \"import"
},
{
"path": "LICENSE.txt",
"chars": 35149,
"preview": " GNU GENERAL PUBLIC LICENSE\n Version 3, 29 June 2007\n\n Copyright (C) 2007 Free "
},
{
"path": "README.md",
"chars": 1944,
"preview": "<a name=\"readme-top\"></a>\n\n<!-- PROJECT LOGO -->\n<br />\n<div align=\"center\">\n <a href=\"https://github.com/Khanhtran47/r"
},
{
"path": "app/assets/icons/AnilistStatIcon.tsx",
"chars": 3395,
"preview": "const Good = () => (\n <path\n fill=\"rgb(93,193,47)\"\n stroke=\"none\"\n d=\"M248 8C111 8 0 119 0 256s111 248 248 248"
},
{
"path": "app/assets/icons/AnimeIcon.tsx",
"chars": 2907,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n fill={color}\n d=\"M18.223 3.086a1.25 1.25 0 0"
},
{
"path": "app/assets/icons/ArrowIcon.tsx",
"chars": 4646,
"preview": "const Right = ({ color }: { color: string }) => (\n <path\n d=\"M8.91156 20.6695C8.72156 20.6695 8.53156 20.5995 8.3815"
},
{
"path": "app/assets/icons/BrushIcon.tsx",
"chars": 2715,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g data-name=\"Layer 2\">\n <g data-name=\"brush\">\n <rect width=\""
},
{
"path": "app/assets/icons/CategoryIcon.tsx",
"chars": 3881,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 2)\">\n <path\n d=\"M14.081,20a2.549,2."
},
{
"path": "app/assets/icons/ChevronDownIcon.tsx",
"chars": 2510,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(6 7)\">\n <path\n d=\"M4.869,9.631c-.058-"
},
{
"path": "app/assets/icons/ChevronLeftIcon.tsx",
"chars": 2551,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(7 6)\">\n <path\n d=\"M.369,4.869c.057-.0"
},
{
"path": "app/assets/icons/ChevronRightIcon.tsx",
"chars": 2525,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(7 6)\">\n <path\n d=\"M9.631,7.131c-.057."
},
{
"path": "app/assets/icons/ChevronUpIcon.tsx",
"chars": 2494,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(6 7)\">\n <path\n d=\"M7.131.369c.058.057"
},
{
"path": "app/assets/icons/CloseIcon.tsx",
"chars": 2896,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2.5 2)\">\n <path\n d=\"M12 2C6.49 2 2 6."
},
{
"path": "app/assets/icons/DiscoverIcon.tsx",
"chars": 3531,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M20.9808 3.02084C20.1108 2.15084 18.8808 1.810"
},
{
"path": "app/assets/icons/ExpandIcon.tsx",
"chars": 3439,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"scale(-1 1) translate(-23 -1)\">\n <path\n d=\"M11 "
},
{
"path": "app/assets/icons/FilterIcon.tsx",
"chars": 3125,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 3)\">\n <path\n d=\"M13.122,14.4a3.439,"
},
{
"path": "app/assets/icons/FlipIcon.tsx",
"chars": 2451,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M24 6V42\"\n stroke={color}\n strokeWid"
},
{
"path": "app/assets/icons/GlobalIcon.tsx",
"chars": 6424,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M7.64859 20.9098C7.61859 20.9098 7.57859 20.92"
},
{
"path": "app/assets/icons/HistoryIcon.tsx",
"chars": 2342,
"preview": "const Bold = ({ color }: { color: string }) => (\n <path\n fill={color}\n d=\"M19.25 12A7.25 7.25 0 0 0 7.584 6.25h.6"
},
{
"path": "app/assets/icons/HomeIcon.tsx",
"chars": 2744,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2.5 2)\">\n <path\n d=\"M6.635,18.773V15."
},
{
"path": "app/assets/icons/InfoIcon.tsx",
"chars": 2784,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 1.999)\">\n <path\n d=\"M10,20a10,10,0,"
},
{
"path": "app/assets/icons/LibraryIcon.tsx",
"chars": 2834,
"preview": "const Bold = ({ color }: { color: string }) => (\n <path\n fill={color}\n d=\"M3 6.25A3.25 3.25 0 0 1 6.25 3h9a3.25 3"
},
{
"path": "app/assets/icons/LogInIcon.tsx",
"chars": 3384,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M16.8 2H14.2C11 2 9 4 9 7.2V11.25H13.44L11.37 "
},
{
"path": "app/assets/icons/LogOutIcon.tsx",
"chars": 3554,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M16.8 2H14.2C11 2 9 4 9 7.2V11.25H15.25C15.66 "
},
{
"path": "app/assets/icons/MailEditIcon.tsx",
"chars": 4798,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M17 3H7C4 3 2 4.5 2 8V15C2 18.5 4 20 7 20H10.5"
},
{
"path": "app/assets/icons/MenuIcon.tsx",
"chars": 2696,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19."
},
{
"path": "app/assets/icons/MoonIcon.tsx",
"chars": 3464,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M21.5287 15.9294C21.3687 15.6594 20.9187 15.23"
},
{
"path": "app/assets/icons/MovieIcon.tsx",
"chars": 4316,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 "
},
{
"path": "app/assets/icons/NextIcon.tsx",
"chars": 3196,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M3.76172 7.21957V16.7896C3.76172 18.7496 5.891"
},
{
"path": "app/assets/icons/PaperPlusIcon.tsx",
"chars": 3563,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(3.5 2)\">\n <path\n d=\"M4.674,20A4.7,4.7"
},
{
"path": "app/assets/icons/Password.tsx",
"chars": 5371,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M18.75 8V10.1C18.31 10.04 17.81 10.01 17.25 10"
},
{
"path": "app/assets/icons/PauseIcon.tsx",
"chars": 2581,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M10.65 19.11V4.89C10.65 3.54 10.08 3 8.64 3H5."
},
{
"path": "app/assets/icons/PhotoIcon.tsx",
"chars": 4244,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(1.999 2)\">\n <path\n d=\"M5.638,20a6.641"
},
{
"path": "app/assets/icons/PlayIcon.tsx",
"chars": 11599,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M17.49 9.59965L5.6 16.7696C4.9 17.1896 4 16.68"
},
{
"path": "app/assets/icons/PreviousIcon.tsx",
"chars": 3228,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M20.2409 7.21957V16.7896C20.2409 18.7496 18.11"
},
{
"path": "app/assets/icons/RatioIcon.tsx",
"chars": 3512,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <rect\n x=\"6\"\n y=\"6\"\n width=\"36\"\n height=\""
},
{
"path": "app/assets/icons/RefreshIcon.tsx",
"chars": 3799,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M14.55 22.42C14.22 22.42 13.91 22.2 13.82 21.8"
},
{
"path": "app/assets/icons/SearchIcon.tsx",
"chars": 2413,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 2)\">\n <path\n d=\"M17.741,19.608l-2.1"
},
{
"path": "app/assets/icons/SettingsIcon.tsx",
"chars": 4161,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2.5 2)\">\n <path\n d=\"M10.2,20H8.807a2."
},
{
"path": "app/assets/icons/ShareIcon.tsx",
"chars": 6099,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M20.3591 12.7315C19.9891 12.7315 19.6791 12.45"
},
{
"path": "app/assets/icons/SortIcon.tsx",
"chars": 3872,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 3)\">\n <path\n d=\"M14.454,17.721a4.44"
},
{
"path": "app/assets/icons/StarIcon.tsx",
"chars": 2941,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M15.919,11.82a1.1,1.1,0,0,0-.319.97l.889,4.92a"
},
{
"path": "app/assets/icons/StopIcon.tsx",
"chars": 2028,
"preview": "const Bold = ({ color }: { color: string }) => (\n <path\n d=\"M5 3C3.89543 3 3 3.89543 3 5V19C3 20.1046 3.89543 21 5 2"
},
{
"path": "app/assets/icons/SubtitleIcon.tsx",
"chars": 3285,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19."
},
{
"path": "app/assets/icons/SunIcon.tsx",
"chars": 4731,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M12 19C15.866 19 19 15.866 19 12C19 8.13401 15"
},
{
"path": "app/assets/icons/TickIcon.tsx",
"chars": 2397,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 2)\">\n <path\n d=\"M14.34,20H5.67C2.27"
},
{
"path": "app/assets/icons/TrendingUpIcon.tsx",
"chars": 3656,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n d=\"M16.19 2H7.81C4.17 2 2 4.17 2 7.81V16.18C2 19."
},
{
"path": "app/assets/icons/TvIcon.tsx",
"chars": 2300,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g>\n <path\n fill={color}\n d=\"M4.75 4A2.75 2.75 0 0 0 2 6"
},
{
"path": "app/assets/icons/TwoUsersIcon.tsx",
"chars": 3803,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(2 3)\">\n <path\n d=\"M0,14.918c0-2.447,3"
},
{
"path": "app/assets/icons/UserIcon.tsx",
"chars": 2783,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(4 2)\">\n <path\n d=\"M0,16.575c0-2.722,3"
},
{
"path": "app/assets/icons/ViewGridCardIcon.tsx",
"chars": 3410,
"preview": "const Bold = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (\n <>\n <rect\n x=\"6\"\n y=\"6"
},
{
"path": "app/assets/icons/ViewGridDetailIcon.tsx",
"chars": 3555,
"preview": "const Bold = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (\n <>\n <rect\n x=\"6\"\n y=\"6"
},
{
"path": "app/assets/icons/ViewGridTableIcon.tsx",
"chars": 3912,
"preview": "const Bold = ({ color, strokeWidth }: { color: string; strokeWidth: number }) => (\n <>\n <rect\n x=\"6\"\n y=\"6"
},
{
"path": "app/assets/icons/VolumeOffIcon.tsx",
"chars": 3413,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(3 3)\">\n <path\n d=\"M.274,18.733a.929.9"
},
{
"path": "app/assets/icons/VolumeUpIcon.tsx",
"chars": 3651,
"preview": "const Bold = ({ color }: { color: string }) => (\n <g transform=\"translate(1 3)\">\n <path\n d=\"M9.677,18a2.693,2.6"
},
{
"path": "app/assets/lotties/external-link-black.json",
"chars": 26703,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 84,\n \"w\": 678,\n \"h\": 896,\n \"nm\": \"share\",\n \"ddd\": 0,\n \"assets\": []"
},
{
"path": "app/assets/lotties/external-link-white.json",
"chars": 26703,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 84,\n \"w\": 678,\n \"h\": 896,\n \"nm\": \"share\",\n \"ddd\": 0,\n \"assets\": []"
},
{
"path": "app/assets/lotties/lottieflow-arrow-08-1-000000-easey.json",
"chars": 25652,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 72,\n \"w\": 800,\n \"h\": 500,\n \"nm\": \"slider left\",\n \"ddd\": 0,\n \"asset"
},
{
"path": "app/assets/lotties/lottieflow-arrow-08-1-0072F5-easey.json",
"chars": 25684,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 72,\n \"w\": 800,\n \"h\": 500,\n \"nm\": \"slider left\",\n \"ddd\": 0,\n \"asset"
},
{
"path": "app/assets/lotties/lottieflow-arrow-08-1-FFFFFF-easey.json",
"chars": 25652,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 72,\n \"w\": 800,\n \"h\": 500,\n \"nm\": \"slider left\",\n \"ddd\": 0,\n \"asset"
},
{
"path": "app/assets/lotties/lottieflow-arrow-08-2-000000-easey.json",
"chars": 25639,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 72,\n \"w\": 800,\n \"h\": 500,\n \"nm\": \"slider\",\n \"ddd\": 0,\n \"assets\": ["
},
{
"path": "app/assets/lotties/lottieflow-arrow-08-2-FFFFFF-easey.json",
"chars": 25639,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 72,\n \"w\": 800,\n \"h\": 500,\n \"nm\": \"slider\",\n \"ddd\": 0,\n \"assets\": ["
},
{
"path": "app/assets/lotties/lottieflow-dropdown-03-0072F5-easey.json",
"chars": 14061,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 96,\n \"w\": 1000,\n \"h\": 1000,\n \"nm\": \"Dropdown Accordion\",\n \"ddd\": 0"
},
{
"path": "app/assets/lotties/lottieflow-dropdown-08-0072F5-easey.json",
"chars": 8261,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 120,\n \"w\": 400,\n \"h\": 580,\n \"nm\": \"drop2\",\n \"ddd\": 0,\n \"assets\": ["
},
{
"path": "app/assets/lotties/lottieflow-menu-nav-11-6-000000-easey.json",
"chars": 54122,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 156,\n \"w\": 710,\n \"h\": 710,\n \"nm\": \"Menu6\",\n \"ddd\": 0,\n \"assets\": ["
},
{
"path": "app/assets/lotties/lottieflow-menu-nav-11-6-FFFFFF-easey.json",
"chars": 54122,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 48,\n \"ip\": 0,\n \"op\": 156,\n \"w\": 710,\n \"h\": 710,\n \"nm\": \"Menu6\",\n \"ddd\": 0,\n \"assets\": ["
},
{
"path": "app/assets/lotties/lottieflow-social-networks-15-10-000000-easey.json",
"chars": 35261,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 120,\n \"w\": 698,\n \"h\": 756,\n \"nm\": \"twit\",\n \"ddd\": 0,\n \"assets\": []"
},
{
"path": "app/assets/lotties/lottieflow-social-networks-15-10-FFFFFF-easey.json",
"chars": 35261,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 120,\n \"w\": 698,\n \"h\": 756,\n \"nm\": \"twit\",\n \"ddd\": 0,\n \"assets\": []"
},
{
"path": "app/assets/lotties/lottieflow-social-networks-15-4-000000-easey.json",
"chars": 38212,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 89,\n \"w\": 654,\n \"h\": 634,\n \"nm\": \"F2\",\n \"ddd\": 0,\n \"assets\": [\n "
},
{
"path": "app/assets/lotties/lottieflow-social-networks-15-4-FFFFFF-easey.json",
"chars": 38212,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 89,\n \"w\": 654,\n \"h\": 634,\n \"nm\": \"F2\",\n \"ddd\": 0,\n \"assets\": [\n "
},
{
"path": "app/assets/lotties/lottieflow-social-networks-15-5-000000-easey.json",
"chars": 105976,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 71,\n \"w\": 584,\n \"h\": 598,\n \"nm\": \"inst ver 2\",\n \"ddd\": 0,\n \"assets"
},
{
"path": "app/assets/lotties/lottieflow-social-networks-15-5-FFFFFF-easey.json",
"chars": 105898,
"preview": "{\n \"v\": \"5.3.4\",\n \"fr\": 60,\n \"ip\": 0,\n \"op\": 71,\n \"w\": 584,\n \"h\": 598,\n \"nm\": \"inst ver 2\",\n \"ddd\": 0,\n \"assets"
},
{
"path": "app/components/elements/AspectRatio.tsx",
"chars": 147,
"preview": "import * as AspectRatioPrimitive from '@radix-ui/react-aspect-ratio';\n\nconst AspectRatio = AspectRatioPrimitive.Root;\n\ne"
},
{
"path": "app/components/elements/Breadcrumb.tsx",
"chars": 3608,
"preview": "import * as React from 'react';\nimport { NavLink } from '@remix-run/react';\nimport { cn } from '~/utils';\n\nimport Chevro"
},
{
"path": "app/components/elements/Dialog.tsx",
"chars": 4316,
"preview": "import * as React from 'react';\nimport * as DialogPrimitive from '@radix-ui/react-dialog';\nimport { cn } from '~/utils';"
},
{
"path": "app/components/elements/Image.tsx",
"chars": 1310,
"preview": "import { forwardRef, useState } from 'react';\nimport { Image as NextuiImage, type ImageProps as NextuiImageProps } from "
},
{
"path": "app/components/elements/NavigationMenu.tsx",
"chars": 6192,
"preview": "import { forwardRef, type ComponentPropsWithoutRef, type ElementRef } from 'react';\nimport * as NavigationMenuPrimitive "
},
{
"path": "app/components/elements/Popover.tsx",
"chars": 1219,
"preview": "import { forwardRef } from 'react';\nimport * as PopoverPrimitive from '@radix-ui/react-popover';\nimport { cn } from '~/u"
},
{
"path": "app/components/elements/ScrollArea.tsx",
"chars": 2165,
"preview": "import * as React from 'react';\nimport * as ScrollAreaPrimitive from '@radix-ui/react-scroll-area';\nimport { cn } from '"
},
{
"path": "app/components/elements/SearchForm.tsx",
"chars": 1222,
"preview": "import { useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Input } from '@nextui-org/input'"
},
{
"path": "app/components/elements/Select.tsx",
"chars": 5758,
"preview": "import * as React from 'react';\nimport * as SelectPrimitive from '@radix-ui/react-select';\nimport { cn } from '~/utils';"
},
{
"path": "app/components/elements/Sheet.tsx",
"chars": 7601,
"preview": "import * as React from 'react';\nimport * as SheetPrimitive from '@radix-ui/react-dialog';\nimport { cn } from '~/utils';\n"
},
{
"path": "app/components/elements/Slider.tsx",
"chars": 4419,
"preview": "import * as React from 'react';\nimport { Badge } from '@nextui-org/badge';\nimport * as SliderPrimitive from '@radix-ui/r"
},
{
"path": "app/components/elements/dialog/AddSubtitleDialog.tsx",
"chars": 3472,
"preview": "import { useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { toast } from 'sonner';\n\nimport {"
},
{
"path": "app/components/elements/dialog/SearchSubtitleDialog.tsx",
"chars": 11478,
"preview": "import { useEffect, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Input } from '@nextui"
},
{
"path": "app/components/elements/dialog/SelectProviderDialog.tsx",
"chars": 3744,
"preview": "import { useEffect, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { useFetcher, useNaviga"
},
{
"path": "app/components/elements/dialog/WatchTrailerDialog.tsx",
"chars": 1242,
"preview": "import { useWindowSize } from '@react-hookz/web';\nimport YouTube, { type YouTubeProps } from 'react-youtube';\n\nimport { "
},
{
"path": "app/components/elements/player/ArtPlayer.tsx",
"chars": 3748,
"preview": "import {\n memo,\n useEffect,\n useRef,\n useState,\n type CSSProperties,\n type Dispatch,\n type SetStateAction,\n} from"
},
{
"path": "app/components/elements/player/PlayerError.tsx",
"chars": 511,
"preview": "import AspectRatio from '~/components/elements/AspectRatio';\n\ninterface IPlayerErrorProps {\n title: string;\n message: "
},
{
"path": "app/components/elements/player/PlayerHotkey.ts",
"chars": 3915,
"preview": "import type { Dispatch, SetStateAction } from 'react';\nimport type Artplayer from 'artplayer';\n\nfunction PlayerHotKey(ar"
},
{
"path": "app/components/elements/player/PlayerSettings.tsx",
"chars": 58836,
"preview": "import { useMemo, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Divider } from '@nextui"
},
{
"path": "app/components/elements/player/playerStyles.ts",
"chars": 4288,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const playerStyles = tv({\n base: [\n 'custom-player-progress-tip',\n "
},
{
"path": "app/components/elements/shared/AuthForm.tsx",
"chars": 6271,
"preview": "import { useMemo, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Card, CardBody, CardFoo"
},
{
"path": "app/components/elements/shared/ErrorBoundaryView.tsx",
"chars": 2321,
"preview": "import { Image } from '@nextui-org/image';\nimport { isRouteErrorResponse, useParams, useRouteError } from '@remix-run/re"
},
{
"path": "app/components/elements/shared/Filter.tsx",
"chars": 18347,
"preview": "import { useMemo, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Input } from '@nextui-o"
},
{
"path": "app/components/elements/shared/ListEpisodes.tsx",
"chars": 11360,
"preview": "import { useMemo, useState } from 'react';\nimport { Button, ButtonGroup } from '@nextui-org/button';\nimport { Card, Card"
},
{
"path": "app/components/elements/shared/ListViewChangeButton.tsx",
"chars": 1304,
"preview": "import { Button, ButtonGroup } from '@nextui-org/button';\n\nimport { useSoraSettings } from '~/utils/react/hooks/useLocal"
},
{
"path": "app/components/elements/shared/Rating.tsx",
"chars": 1272,
"preview": "import { cnBase } from 'tailwind-variants';\n\nimport AnilistStatIcon from '~/assets/icons/AnilistStatIcon';\nimport StarIc"
},
{
"path": "app/components/elements/shared/ResizablePanel.tsx",
"chars": 3040,
"preview": "/* eslint-disable @typescript-eslint/no-explicit-any */\nimport { useMemo } from 'react';\nimport { useMeasure, useWindowS"
},
{
"path": "app/components/elements/shared/WatchDetail.tsx",
"chars": 7808,
"preview": "import { memo } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Spacer } from '@nextui-org/spacer';\n"
},
{
"path": "app/components/elements/tab/TabLink.tsx",
"chars": 2377,
"preview": "import { useRef } from 'react';\nimport { useDebouncedEffect, useMediaQuery } from '@react-hookz/web';\nimport { NavLink, "
},
{
"path": "app/components/elements/tab/Tabs.tsx",
"chars": 2659,
"preview": "import * as React from 'react';\nimport * as TabsPrimitive from '@radix-ui/react-tabs';\nimport { cnBase } from 'tailwind-"
},
{
"path": "app/components/layouts/ActionButtons.tsx",
"chars": 953,
"preview": "import { Button } from '@nextui-org/button';\nimport { motion, useTransform } from 'framer-motion';\n\nimport { useLayout }"
},
{
"path": "app/components/layouts/BottomNav.tsx",
"chars": 4503,
"preview": "/* eslint-disable @typescript-eslint/indent */\nimport { useState } from 'react';\nimport { NavLink, useLocation, useSearc"
},
{
"path": "app/components/layouts/ControlNavigation.tsx",
"chars": 4175,
"preview": "import { Button } from '@nextui-org/button';\nimport { Chip } from '@nextui-org/chip';\nimport { useMatches, useNavigate, "
},
{
"path": "app/components/layouts/GlobalPlayer.tsx",
"chars": 51979,
"preview": "/* eslint-disable @typescript-eslint/no-non-null-assertion */\n/* eslint-disable react-hooks/exhaustive-deps */\nimport { "
},
{
"path": "app/components/layouts/Header.tsx",
"chars": 5614,
"preview": "import type { User } from '@supabase/supabase-js';\nimport { motion, useTransform } from 'framer-motion';\nimport { tv } f"
},
{
"path": "app/components/layouts/Layout.tsx",
"chars": 13789,
"preview": "/* eslint-disable react-hooks/exhaustive-deps */\nimport { useEffect, useMemo, useRef, type CSSProperties } from 'react';"
},
{
"path": "app/components/layouts/MobileHeader.tsx",
"chars": 4131,
"preview": "import { Button } from '@nextui-org/button';\nimport { NavLink, useLocation, useNavigate } from '@remix-run/react';\nimpor"
},
{
"path": "app/components/layouts/MultiLevelDropdown.tsx",
"chars": 14976,
"preview": "import { useEffect, useMemo, useState } from 'react';\nimport { Player } from '@lottiefiles/react-lottie-player';\nimport "
},
{
"path": "app/components/layouts/SideBar.tsx",
"chars": 55377,
"preview": "import { Button } from '@nextui-org/button';\nimport { Card, CardBody, CardFooter } from '@nextui-org/card';\nimport { Lin"
},
{
"path": "app/components/layouts/TailwindIndicator.tsx",
"chars": 706,
"preview": "const TailwindIndicator = () => {\n if (process.env.NODE_ENV === 'production') return null;\n\n return (\n <div classNa"
},
{
"path": "app/components/media/MediaDetail.tsx",
"chars": 27301,
"preview": "import { useEffect, useState, type CSSProperties } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { C"
},
{
"path": "app/components/media/MediaList.tsx",
"chars": 13966,
"preview": "import { useMemo, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Spacer } from '@nextui-"
},
{
"path": "app/components/media/PeopleDetail.tsx",
"chars": 6891,
"preview": "import { Player } from '@lottiefiles/react-lottie-player';\nimport { Link } from '@nextui-org/link';\nimport { Spacer } fr"
},
{
"path": "app/components/media/item/BannerItem.tsx",
"chars": 1967,
"preview": "import { Skeleton } from '@nextui-org/skeleton';\nimport { useMediaQuery } from '@react-hookz/web';\n\nimport type { Title "
},
{
"path": "app/components/media/item/BannerItemCompact.tsx",
"chars": 4726,
"preview": "import { forwardRef } from 'react';\nimport { Card, CardBody, CardFooter } from '@nextui-org/card';\nimport { Skeleton } f"
},
{
"path": "app/components/media/item/BannerItemDesktop.tsx",
"chars": 22448,
"preview": "/* eslint-disable react-hooks/exhaustive-deps */\nimport { useEffect, useRef, useState } from 'react';\nimport { Button } "
},
{
"path": "app/components/media/item/BannerItemMobile.tsx",
"chars": 5183,
"preview": "import { useRef } from 'react';\nimport { Card, CardBody, CardFooter } from '@nextui-org/card';\nimport { Chip } from '@ne"
},
{
"path": "app/components/media/item/CardItem.tsx",
"chars": 18477,
"preview": "import { useMemo, useRef, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Card, CardBody,"
},
{
"path": "app/components/media/item/HistoryItem.tsx",
"chars": 2144,
"preview": "import { Card, CardBody } from '@nextui-org/card';\nimport { Progress } from '@nextui-org/progress';\nimport { Link } from"
},
{
"path": "app/components/media/item/index.tsx",
"chars": 3958,
"preview": "import type { IMedia, Title } from '~/types/media';\nimport type { ITrailer } from '~/services/consumet/anilist/anilist.t"
},
{
"path": "app/components/media/list/MediaListBanner.tsx",
"chars": 11002,
"preview": "import { forwardRef, useEffect, useRef, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { u"
},
{
"path": "app/components/media/list/MediaListCard.tsx",
"chars": 6210,
"preview": "import { isMobile } from 'react-device-detect';\nimport { FreeMode, Navigation } from 'swiper/modules';\nimport { Swiper, "
},
{
"path": "app/components/media/list/MediaListGrid.tsx",
"chars": 13403,
"preview": "import { useEffect, useMemo, useRef, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Pagi"
},
{
"path": "app/components/media/list/index.tsx",
"chars": 184,
"preview": "export { default as MediaListBanner } from './MediaListBanner';\nexport { default as MediaListCard } from './MediaListCar"
},
{
"path": "app/components/styles/nprogress.css",
"chars": 992,
"preview": "/* Make clicks pass-through */\n#nprogress {\n pointer-events: none;\n}\n\n#nprogress .bar {\n position: fixed;\n z-index: 9"
},
{
"path": "app/components/styles/primitives.ts",
"chars": 328,
"preview": "import { tv } from 'tailwind-variants';\n\nexport const backgroundStyles = tv({\n base: 'absolute top-0 h-full w-full',\n "
},
{
"path": "app/constants/episodeTypes.ts",
"chars": 171,
"preview": "const episodeTypes = [\n {\n activeType: 0,\n activeTypeName: 'Number',\n },\n {\n activeType: 1,\n activeTypeNa"
},
{
"path": "app/constants/featuredList.ts",
"chars": 6931,
"preview": "const featuredList = [\n {\n id: 146567,\n name: 'Anime Series',\n backdropPath:\n 'https://www.themoviedb.org"
},
{
"path": "app/constants/filterItems.ts",
"chars": 1308,
"preview": "export const sortMovieTvItems = [\n 'popularity.desc',\n 'popularity.asc',\n 'primary_release_date.desc',\n 'primary_rel"
},
{
"path": "app/constants/languages.ts",
"chars": 75,
"preview": "const languages: string[] = ['en', 'fr', 'vi'];\n\nexport default languages;\n"
},
{
"path": "app/constants/settings.ts",
"chars": 2763,
"preview": "const settingsTab = [\n {\n id: 'general-tab',\n title: 'general',\n disabled: false,\n },\n {\n id: 'appearance"
},
{
"path": "app/constants/tabLinks.ts",
"chars": 4226,
"preview": "export const moviePages = [\n { pageName: 'popular-movies', pageLink: '/popular' },\n { pageName: 'now-playing-movies', "
},
{
"path": "app/context/isbot.context.tsx",
"chars": 427,
"preview": "import { createContext, useContext, type ReactNode } from 'react';\n\ntype Props = { isBot: boolean; children: ReactNode }"
},
{
"path": "app/entry.client.tsx",
"chars": 2023,
"preview": "import { startTransition } from 'react';\nimport { loadServiceWorker } from '@remix-pwa/sw';\nimport { RemixBrowser } from"
},
{
"path": "app/entry.server.tsx",
"chars": 2287,
"preview": "import { resolve } from 'node:path';\nimport { RemixServer } from '@remix-run/react';\nimport { handleRequest as handleVer"
},
{
"path": "app/entry.worker.ts",
"chars": 1820,
"preview": "/// <reference lib=\"WebWorker\" />\n\nimport { Storage } from '@remix-pwa/cache';\nimport { cacheFirst, networkFirst } from "
},
{
"path": "app/root.tsx",
"chars": 25299,
"preview": "/* eslint-disable no-console */\nimport * as React from 'react';\nimport FontStyles100 from '@fontsource/sora/100.css';\nim"
},
{
"path": "app/routes/[manifest.webmanifest].ts",
"chars": 18832,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\n\nimport { i18next } from '~/services/i18n';\nimport { au"
},
{
"path": "app/routes/_auth+/sign-in.tsx",
"chars": 4722,
"preview": "import { json, type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useActionData, useLoc"
},
{
"path": "app/routes/_auth+/sign-out.tsx",
"chars": 738,
"preview": "import { type ActionFunctionArgs } from '@remix-run/node';\n\nimport { destroyAuthCookie, getSessionFromCookie } from '~/s"
},
{
"path": "app/routes/_auth+/sign-up.tsx",
"chars": 5050,
"preview": "import { json, type ActionFunctionArgs, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useActionData } from "
},
{
"path": "app/routes/_index.tsx",
"chars": 5067,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/admin+/cache.tsx",
"chars": 7075,
"preview": "import { useEffect, useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Spacer } from '@nextu"
},
{
"path": "app/routes/admin+/cache_.$cacheKey.ts",
"chars": 483,
"preview": "import { json, type DataFunctionArgs } from '@remix-run/node';\nimport invariant from 'tiny-invariant';\n\nimport { authent"
},
{
"path": "app/routes/anime+/$animeId+/_index.tsx",
"chars": 12685,
"preview": "import { useMemo } from 'react';\nimport { Card, CardBody } from '@nextui-org/card';\nimport { useParams } from '@remix-ru"
},
{
"path": "app/routes/anime+/$animeId+/characters.tsx",
"chars": 185,
"preview": "const CharactersPage = () => (\n <div className=\"flex w-full flex-col items-center justify-center px-3 sm:px-5\">\n <h4"
},
{
"path": "app/routes/anime+/$animeId+/episodes.tsx",
"chars": 4307,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData } from '@remix-run/react';\nimpor"
},
{
"path": "app/routes/anime+/$animeId+/staff.tsx",
"chars": 175,
"preview": "const StaffPage = () => (\n <div className=\"flex w-full flex-col items-center justify-center px-3 sm:px-5\">\n <h4>In d"
},
{
"path": "app/routes/anime+/$animeId.tsx",
"chars": 6927,
"preview": "import { useEffect, useRef } from 'react';\nimport { useIntersectionObserver } from '@react-hookz/web';\nimport { json, ty"
},
{
"path": "app/routes/anime+/$animeId_.episode.$episodeId.watch.tsx",
"chars": 23455,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData } from '@remix-run/react';\nimpor"
},
{
"path": "app/routes/anime+/_index.tsx",
"chars": 3654,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/anime+/popular.tsx",
"chars": 3359,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/anime+/random.tsx",
"chars": 664,
"preview": "import { redirect, type LoaderFunctionArgs } from '@remix-run/node';\n\nimport { getAnimeRandom } from '~/services/consume"
},
{
"path": "app/routes/anime+/recent-episodes.tsx",
"chars": 3588,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/anime+/trending.tsx",
"chars": 3322,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/anime.tsx",
"chars": 1245,
"preview": "import { Outlet } from '@remix-run/react';\nimport { mergeMeta } from '~/utils';\n\nimport type { Handle } from '~/types/ha"
},
{
"path": "app/routes/api+/color-palette.ts",
"chars": 1628,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\n\nimport { authenticate } from '~/services/supabase';\nim"
},
{
"path": "app/routes/api+/history.ts",
"chars": 1578,
"preview": "import { redirect, type ActionFunctionArgs } from '@remix-run/node';\n\nimport { authenticate, insertHistory } from '~/ser"
},
{
"path": "app/routes/api+/image.ts",
"chars": 2531,
"preview": "import os from 'os';\nimport path from 'path';\nimport BaseCache from '@next-boost/hybrid-disk-cache';\nimport type { Loade"
},
{
"path": "app/routes/api+/media.ts",
"chars": 1238,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\n\nimport { i18next } from '~/services/i18n';\nimport { au"
},
{
"path": "app/routes/api+/ogimage.tsx",
"chars": 3703,
"preview": "import { json, type HeadersFunction, type LoaderFunctionArgs } from '@remix-run/node';\n\nimport { getMovieDetail, getTvSh"
},
{
"path": "app/routes/api+/provider.ts",
"chars": 1453,
"preview": "/* eslint-disable @typescript-eslint/no-throw-literal */\nimport { json, type LoaderFunctionArgs } from '@remix-run/node'"
},
{
"path": "app/routes/api+/subtitles.download.ts",
"chars": 895,
"preview": "/* eslint-disable @typescript-eslint/no-throw-literal */\nimport { json, type LoaderFunctionArgs } from '@remix-run/node'"
},
{
"path": "app/routes/api+/subtitles.search.ts",
"chars": 1579,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\n\nimport { getSubtitlesSearch } from '~/services/open-su"
},
{
"path": "app/routes/api+/youtube-video.ts",
"chars": 813,
"preview": "/* eslint-disable @typescript-eslint/no-throw-literal */\nimport { json, type LoaderFunctionArgs } from '@remix-run/node'"
},
{
"path": "app/routes/design-system+/accordion.tsx",
"chars": 1531,
"preview": "import { Accordion, AccordionItem } from '@nextui-org/accordion';\nimport { Link } from '@nextui-org/link';\n\nimport type "
},
{
"path": "app/routes/design-system+/avatar.tsx",
"chars": 1172,
"preview": "import { Avatar } from '@nextui-org/avatar';\nimport { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/ty"
},
{
"path": "app/routes/design-system+/badge.tsx",
"chars": 975,
"preview": "import { Avatar } from '@nextui-org/avatar';\nimport { Badge } from '@nextui-org/badge';\nimport { Link } from '@nextui-or"
},
{
"path": "app/routes/design-system+/button.tsx",
"chars": 8266,
"preview": "import { useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Link } from '@nextui-org/link';\n"
},
{
"path": "app/routes/design-system+/card.tsx",
"chars": 7502,
"preview": "import { Button } from '@nextui-org/button';\nimport { Card, CardBody, CardFooter, CardHeader } from '@nextui-org/card';\n"
},
{
"path": "app/routes/design-system+/colors.tsx",
"chars": 26046,
"preview": "import type { Handle } from '~/types/handle';\nimport { BreadcrumbItem } from '~/components/elements/Breadcrumb';\n\nexport"
},
{
"path": "app/routes/design-system+/dialog.tsx",
"chars": 3445,
"preview": "import { Button } from '@nextui-org/button';\nimport { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/ty"
},
{
"path": "app/routes/design-system+/divider.tsx",
"chars": 1315,
"preview": "import { Divider } from '@nextui-org/divider';\nimport { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/"
},
{
"path": "app/routes/design-system+/icons.tsx",
"chars": 108,
"preview": "const IconsPage = () => {\n return (\n <>\n <h2>Icons</h2>\n </>\n );\n};\n\nexport default IconsPage;\n"
},
{
"path": "app/routes/design-system+/image.tsx",
"chars": 2464,
"preview": "import { Link } from '@nextui-org/link';\nimport { MimeType } from 'remix-image';\n\nimport type { Handle } from '~/types/h"
},
{
"path": "app/routes/design-system+/input.tsx",
"chars": 989,
"preview": "import { Input } from '@nextui-org/input';\nimport { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/type"
},
{
"path": "app/routes/design-system+/pagination.tsx",
"chars": 886,
"preview": "import { Link } from '@nextui-org/link';\nimport { Pagination } from '@nextui-org/pagination';\n\nimport type { Handle } fr"
},
{
"path": "app/routes/design-system+/popover.tsx",
"chars": 1306,
"preview": "import { useState } from 'react';\nimport { Button } from '@nextui-org/button';\nimport { Link } from '@nextui-org/link';\n"
},
{
"path": "app/routes/design-system+/progress.tsx",
"chars": 893,
"preview": "import { Link } from '@nextui-org/link';\nimport { Progress } from '@nextui-org/progress';\n\nimport type { Handle } from '"
},
{
"path": "app/routes/design-system+/scroll-area.tsx",
"chars": 1594,
"preview": "import { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/types/handle';\nimport { BreadcrumbItem } from '"
},
{
"path": "app/routes/design-system+/select.tsx",
"chars": 1643,
"preview": "import { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/types/handle';\nimport { BreadcrumbItem } from '"
},
{
"path": "app/routes/design-system+/skeleton.tsx",
"chars": 1576,
"preview": "import { Card } from '@nextui-org/card';\nimport { Link } from '@nextui-org/link';\nimport { Skeleton } from '@nextui-org/"
},
{
"path": "app/routes/design-system+/slider.tsx",
"chars": 2437,
"preview": "import { useState } from 'react';\nimport { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/types/handle'"
},
{
"path": "app/routes/design-system+/switch.tsx",
"chars": 862,
"preview": "import { Link } from '@nextui-org/link';\nimport { Switch } from '@nextui-org/switch';\n\nimport type { Handle } from '~/ty"
},
{
"path": "app/routes/design-system+/tabs.tsx",
"chars": 1852,
"preview": "import { Link } from '@nextui-org/link';\n\nimport type { Handle } from '~/types/handle';\nimport { BreadcrumbItem } from '"
},
{
"path": "app/routes/design-system+/toast.tsx",
"chars": 2499,
"preview": "import { Button } from '@nextui-org/button';\nimport { Link } from '@nextui-org/link';\nimport { toast } from 'sonner';\n\ni"
},
{
"path": "app/routes/design-system+/tooltip.tsx",
"chars": 960,
"preview": "import { Button } from '@nextui-org/button';\nimport { Link } from '@nextui-org/link';\nimport { Tooltip } from '@nextui-o"
},
{
"path": "app/routes/design-system+/typography.tsx",
"chars": 4343,
"preview": "import type { Handle } from '~/types/handle';\nimport { BreadcrumbItem } from '~/components/elements/Breadcrumb';\n\nexport"
},
{
"path": "app/routes/design-system+/video-player.tsx",
"chars": 1863,
"preview": "import { json } from '@remix-run/node';\n\nimport type { Handle } from '~/types/handle';\nimport { BreadcrumbItem } from '~"
},
{
"path": "app/routes/design-system.tsx",
"chars": 1471,
"preview": "import { Outlet, useLocation } from '@remix-run/react';\nimport { mergeMeta } from '~/utils';\nimport { motion } from 'fra"
},
{
"path": "app/routes/discover+/_index.tsx",
"chars": 3734,
"preview": "import { Button } from '@nextui-org/button';\nimport { Spacer } from '@nextui-org/spacer';\nimport { useLocation, useNavig"
},
{
"path": "app/routes/discover+/anime.tsx",
"chars": 4524,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/discover+/movies.tsx",
"chars": 5391,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
},
{
"path": "app/routes/discover+/tv-shows.tsx",
"chars": 5602,
"preview": "import { json, type LoaderFunctionArgs } from '@remix-run/node';\nimport { useLoaderData, useLocation, useNavigate } from"
}
]
// ... and 167 more files (download for full content)
About this extraction
This page contains the full source code of the Khanhtran47/Sora GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 367 files (2.2 MB), approximately 602.8k tokens, and a symbol index with 308 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.