nezumi/onedrive-vercel-index
1
0
Fork 0
mirror of https://github.com/Nezumi-2711/onedrive-vercel-index.git synced 2026-09-22 13:38:45 +00:00
Code Issues Packages Projects Releases Wiki Activity

colored toast and other minor tweaks

Browse Source
This commit is contained in:
spencerwooo
2021-08-29 22:31:42 +01:00
parent a3644b50e5
commit a488d3324e
8 changed files with 50 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/Breadcrumb.tsx
+3 -3
View File
@@ -9,13 +9,13 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
if (Array.isArray(path)) {
return (
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 flex overflow-x-scroll no-scrollbar">
<div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75 flex-shrink-0">
<div className="p-1 hover:opacity-80 transition-all duration-75 flex-shrink-0">
<Link href="/">🚩 Home</Link>
</div>
{path.map((q: string, i: number) => (
<div key={i} className="flex items-center flex-shrink-0">
<div>/</div>
<div className="p-1 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
<div className="p-1 hover:opacity-80 transition-all duration-75">
<Link
href={`/${path
.slice(0, i + 1)
@@ -33,7 +33,7 @@ const Breadcrumb: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =>
}
return (
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:text-black dark:hover:text-gray-400 transition-all duration-75">
<div className="pb-4 text-sm text-gray-600 dark:text-gray-300 hover:opacity-80 transition-all duration-75">
<div className="p-1">
<Link href="/">🚩 Home</Link>
</div>
components/DownloadBtn.tsx
+8 -1
View File
@@ -12,7 +12,14 @@ const DownloadBtn: FunctionComponent<{ downloadUrl: string }> = ({ downloadUrl }
return (
<div className="flex flex-wrap space-x-2 justify-center">
<Toaster />
<Toaster
toastOptions={{
style: {
background: '#316C23',
color: '#ffffff',
},
}}
/>
<a
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
href={downloadUrl}
components/FileListing.tsx
+17 -9
View File
@@ -170,7 +170,15 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
<div className="hidden md:block font-bold">Size</div>
<div className="hidden md:block font-bold">Actions</div>
</div>
<Toaster />
<Toaster
toastOptions={{
style: {
background: '#316C23',
color: '#ffffff',
},
}}
/>
{imagesInFolder.length !== 0 && (
<ReactViewer
@@ -210,7 +218,7 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
)}
{children.map((c: any) => (
<div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-800" key={c.id}>
<div className="grid grid-cols-12 hover:bg-gray-100 dark:hover:bg-gray-850" key={c.id}>
<div
className="col-span-11"
onClick={e => {
@@ -227,33 +235,33 @@ const FileListing: FunctionComponent<{ query?: ParsedUrlQuery }> = ({ query }) =
<FileListItem fileContent={c} />
</div>
{c.folder ? (
<div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
<div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
<span
title="Copy folder permalink"
className="cursor-pointer hover:opacity-80"
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
onClick={() => {
clipboard.copy(`${getBaseUrl()}${path === '/' ? '' : path}/${encodeURIComponent(c.name)}`)
toast.success('Copied folder permanent link to clipboard.')
toast.success('Copied folder permalink.')
}}
>
<FontAwesomeIcon icon={['far', 'copy']} />
</span>
</div>
) : (
<div className="hidden md:block col-span-1 space-x-2 p-3 text-gray-700 dark:text-gray-500">
<div className="hidden md:flex p-1 text-gray-700 dark:text-gray-400">
<span
title="Copy raw file permalink"
className="cursor-pointer hover:opacity-80"
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
onClick={() => {
clipboard.copy(`${getBaseUrl()}/api?path=${path === '/' ? '' : path}/${c.name}&raw=true`)
toast.success('Copied permanent raw file link to clipboard.')
toast.success('Copied raw file permalink.')
}}
>
<FontAwesomeIcon icon={['far', 'copy']} />
</span>
<a
title="Download file"
className="cursor-pointer hover:opacity-80"
className="cursor-pointer p-2 rounded hover:bg-gray-300 dark:hover:bg-gray-600"
href={c['@microsoft.graph.downloadUrl']}
>
<FontAwesomeIcon icon={['far', 'arrow-alt-circle-down']} />
components/Navbar.tsx
+6 -3
View File
@@ -1,17 +1,20 @@
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import Link from 'next/link'
import siteConfig from '../config/site.json'
const Navbar = () => {
return (
<div className="text-left bg-white dark:bg-gray-900 p-3 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
<div className="text-left p-1 bg-white dark:bg-gray-900 sticky top-0 bg-opacity-80 backdrop-blur-md shadow-sm z-[100]">
<div className="max-w-4xl w-full mx-auto flex items-center justify-between">
<h1 className="font-bold text-xl dark:text-white">{siteConfig.title}</h1>
<h1 className="font-bold text-xl p-2 rounded dark:text-white hover:opacity-80">
<Link href="/">{siteConfig.title}</Link>
</h1>
<a
href="https://github.com/spencerwooo/onedrive-vercel-index"
target="_blank"
rel="noopener noreferrer"
className="dark:text-white"
className="p-2 rounded dark:text-white hover:opacity-80"
>
<FontAwesomeIcon icon={['fab', 'github']} size="lg" />
</a>
components/previews/VideoPreview.tsx
+8 -1
View File
@@ -28,7 +28,14 @@ export const VideoPreview: FunctionComponent<{ file: any }> = ({ file }) => {
</div>
<div className="flex flex-wrap space-x-2 justify-center mt-4">
<Toaster />
<Toaster
toastOptions={{
style: {
background: '#316C23',
color: '#ffffff',
},
}}
/>
<a
className="flex-shrink-0 w-36 flex space-x-4 items-center justify-center bg-blue-500 rounded py-2 px-4 text-white focus:outline-none focus:ring focus:ring-blue-300 hover:bg-blue-600 mb-2"
href={file['@microsoft.graph.downloadUrl']}