chore: update shortcut header style

This commit is contained in:
Steven 2023-06-29 21:16:12 +08:00
parent 07d6492a6f
commit 1792ca1272
2 changed files with 13 additions and 11 deletions

View File

@ -61,9 +61,7 @@ const ShortcutView = (props: Props) => {
)} )}
</div> </div>
<button className="items-center cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}> <button className="items-center cursor-pointer hover:opacity-80" onClick={() => handleCopyButtonClick(shortcut)}>
<span className="text-gray-400"> <span className="text-gray-400">s/</span>
s<span className="font-mono">/</span>
</span>
{shortcut.name} {shortcut.name}
</button> </button>
<a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}> <a className="hidden group-hover:block ml-1 cursor-pointer hover:opacity-80" target="_blank" href={shortcut.link}>

View File

@ -1,4 +1,4 @@
import { Button, Option, Select } from "@mui/joy"; import { Button, Tab, TabList, Tabs } from "@mui/joy";
import { useEffect, useState } from "react"; import { useEffect, useState } from "react";
import { shortcutService } from "../services"; import { shortcutService } from "../services";
import { useAppSelector } from "../stores"; import { useAppSelector } from "../stores";
@ -37,19 +37,23 @@ const Home: React.FC = () => {
return ( return (
<> <>
<div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start"> <div className="mx-auto max-w-4xl w-full px-3 py-6 flex flex-col justify-start items-start">
<div className="w-full flex flex-row justify-start items-center mb-4">
<span className="font-mono text-gray-400 mr-2">Shortcuts</span>
</div>
<div className="w-full flex flex-row justify-between items-center mb-4"> <div className="w-full flex flex-row justify-between items-center mb-4">
<div className="flex flex-row justify-start items-center"> <div className="flex flex-row justify-start items-center">
<span className="font-mono text-gray-400 mr-2">Shortcuts</span> <Tabs defaultValue={"ALL"} size="sm" onChange={(_, value) => setSelectFilter(value as any)}>
<TabList>
<Tab value={"ALL"}>All</Tab>
<Tab value={"PRIVATE"}>Mine</Tab>
</TabList>
</Tabs>
</div>
<div>
<Button variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}> <Button variant="soft" size="sm" onClick={() => setShowCreateShortcutDialog(true)}>
<Icon.Plus className="w-5 h-auto" /> New <Icon.Plus className="w-5 h-auto" /> New
</Button> </Button>
</div> </div>
<div>
<Select defaultValue={"ALL"} onChange={(_, value) => setSelectFilter(value as any)}>
<Option value={"ALL"}>All</Option>
<Option value={"PRIVATE"}>Mine</Option>
</Select>
</div>
</div> </div>
{loadingState.isLoading ? ( {loadingState.isLoading ? (
<div className="py-12 w-full flex flex-row justify-center items-center opacity-80"> <div className="py-12 w-full flex flex-row justify-center items-center opacity-80">