Skip to content

Commit

Permalink
refactor: simplify unocss classes
Browse files Browse the repository at this point in the history
  • Loading branch information
@Renovamen
Renovamen committed Mar 16, 2024
1 parent 969bf24 commit a5e9eee
Show file tree
Hide file tree
Showing 22 changed files with 248 additions and 260 deletions.
10 changes: 5 additions & 5 deletions src/components/AppWindow.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const TrafficLights = ({ id, close, aspectRatio, max, setMax, setMin }: TrafficP
<span className="icon i-gg:close text-[9px]" />
</button>
<button
className={`window-btn ${max ? "c-bg-400" : "bg-yellow-500 dark:bg-yellow-400"}`}
className={`window-btn ${max ? "bg-c-400" : "bg-yellow-500 dark:bg-yellow-400"}`}
onClick={() => setMin(id)}
onTouchEnd={() => setMin(id)}
disabled={max}
Expand All @@ -95,7 +95,7 @@ const TrafficLights = ({ id, close, aspectRatio, max, setMax, setMin }: TrafficP
</button>
<button
className={`window-btn ${
disableMax ? "c-bg-400" : "bg-green-500 dark:bg-green-400"
disableMax ? "bg-c-400" : "bg-green-500 dark:bg-green-400"
}`}
onClick={() => setMax(id)}
onTouchEnd={() => setMax(id)}
Expand Down Expand Up @@ -191,11 +191,11 @@ const Window = (props: WindowProps) => {
lockAspectRatioExtraHeight={props.aspectRatio ? appBarHeight : undefined}
style={{ zIndex: props.z }}
onMouseDown={() => props.focus(props.id)}
className={`absolute ${round} overflow-hidden bg-transparent w-full h-full ${border} shadow-lg shadow-black/30 ${minimized}`}
className={`overflow-hidden ${round} ${border} shadow-lg shadow-black/30 ${minimized}`}
id={`window-${props.id}`}
>
<div
className="window-bar relative h-6 text-center c-bg-200"
className="window-bar relative h-6 text-center bg-c-200"
onDoubleClick={() => !disableMax && props.setMax(props.id)}
>
<TrafficLights
Expand All @@ -206,7 +206,7 @@ const Window = (props: WindowProps) => {
setMin={props.setMin}
close={props.close}
/>
<span className="font-semibold c-text-700">{props.title}</span>
<span className="font-semibold text-c-700">{props.title}</span>
</div>
<div className="innner-window w-full overflow-y-hidden">{children}</div>
</Rnd>
Expand Down
4 changes: 2 additions & 2 deletions src/components/Launchpad.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -28,14 +28,14 @@ export default function Launchpad({ show, toggleLaunchpad }: LaunchpadProps) {

return (
<div
className={`${close} z-30 transform scale-110 w-full h-full fixed overflow-hidden bg-center bg-cover`}
className={`${close} z-30 transform scale-110 size-full fixed overflow-hidden bg-center bg-cover`}
id="launchpad"
style={{
backgroundImage: `url(${dark ? wallpapers.night : wallpapers.day})`
}}
onClick={() => toggleLaunchpad(false)}
>
<div className="w-full h-full absolute bg-gray-900/20 backdrop-blur-2xl">
<div className="size-full absolute bg-gray-900/20 backdrop-blur-2xl">
<div
className="mx-auto flex h-7 w-64 mt-5 bg-gray-200/10"
border="1 rounded-md gray-200/30"
Expand Down
84 changes: 42 additions & 42 deletions src/components/Spotlight.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ export default function Spotlight({
const [appList, setAppList] = useState<JSX.Element | null>(null);

const textWhite = "text-white";
const textBlack = "c-text-black";
const textBlack = "text-c-black";
const textSelected = "bg-blue-500";

useClickOutside(spotlightRef, toggleSpotlight, [btnRef]);
Expand Down Expand Up @@ -171,7 +171,7 @@ export default function Spotlight({
)}
{portfolio.appList.length !== 0 && (
<div>
<div className="spotlight-type mt-1.5 before:(content-empty absolute left-0 top-0 ml-2 w-63.5 border-t menu-border)">
<div className="spotlight-type mt-1.5 before:(content-empty absolute left-0 top-0 ml-2 w-63.5 border-t border-menu)">
Portfolio
</div>
<ul className="w-full text-xs">{portfolio.appList}</ul>
Expand Down Expand Up @@ -268,16 +268,19 @@ export default function Spotlight({
onClick={focusOnInput}
ref={spotlightRef}
>
<div className="w-full grid grid-cols-8 sm:grid-cols-11 h-12 sm:h-14 rounded-lg bg-transparent">
<div
className="w-full h-12 sm:h-14 rounded-lg bg-transparent"
grid="~ cols-8 sm:cols-11"
>
<div className="col-start-1 col-span-1 flex-center">
<span className="i-bx:search ml-1 c-text-600 text-[28px]" />
<span className="i-bx:search ml-1 text-c-600 text-[28px]" />
</div>
<input
id="spotlight-input"
className={`col-start-2 col-span-7 ${
curDetails ? "sm:col-span-9" : "sm:col-span-10"
} c-text-black bg-transparent no-outline px-1`}
text="xl sm:2xl"
} bg-transparent no-outline px-1`}
text="c-black xl sm:2xl"
placeholder="Spotlight Search"
value={searchText}
onChange={handleInputChange}
Expand All @@ -295,47 +298,44 @@ export default function Spotlight({
)}
</div>
{searchText !== "" && (
<div className="h-85 bg-transparent flex flex-row border-t menu-border">
<div className="flex-none w-32 sm:w-72 px-2.5 border-r menu-border overflow-y-scroll">
<div className="h-85 bg-transparent flex border-t border-menu">
<div className="flex-none w-32 sm:w-72 px-2.5 border-r border-menu overflow-y-scroll">
{appList}
</div>
<div className="flex-grow">
{curDetails && (
<div className="h-full w-full flex flex-col">
<div
className="mx-auto w-4/5 h-56 border-b menu-border"
flex="none center col"
>
<img
className="w-32 mx-auto"
src={curDetails.img}
alt={curDetails.title}
title={curDetails.title}
/>
<div className="mt-4 text-xl c-text-black">{curDetails.title}</div>
<div className="text-xs c-text-500">
{`Version: ${getRandom(0, 99)}.${getRandom(0, 999)}`}
</div>
{curDetails && (
<div className="flex-grow flex flex-col">
<div className="mx-auto w-4/5 h-56" flex="none center col" border="b menu">
<img
className="w-32 mx-auto"
src={curDetails.img}
alt={curDetails.title}
title={curDetails.title}
/>
<div mt-4 text="xl c-black">
{curDetails.title}
</div>
<div className="flex-grow flex text-xs">
<div className="flex-none flex-col vstack w-1/2 items-end c-text-500">
<div>Kind</div>
<div>Size</div>
<div>Created</div>
<div>Modified</div>
<div>Last opened</div>
</div>
<div className="flex-grow flex-col vstack pl-2 c-text-black">
<div>{curDetails.type === "app" ? "Application" : "Portfolio"}</div>
<div>{`${getRandom(0, 999)} G`}</div>
<div>{getRandomDate()}</div>
<div>{getRandomDate()}</div>
<div>{getRandomDate()}</div>
</div>
<div text="xs c-500">
{`Version: ${getRandom(0, 99)}.${getRandom(0, 999)}`}
</div>
</div>
)}
</div>
<div className="flex-grow hstack text-xs">
<div className="flex-none w-1/2 text-right text-c-500">
<div>Kind</div>
<div>Size</div>
<div>Created</div>
<div>Modified</div>
<div>Last opened</div>
</div>
<div className="flex-grow pl-2 text-c-black">
<div>{curDetails.type === "app" ? "Application" : "Portfolio"}</div>
<div>{`${getRandom(0, 999)} G`}</div>
<div>{getRandomDate()}</div>
<div>{getRandomDate()}</div>
<div>{getRandomDate()}</div>
</div>
</div>
</div>
)}
</div>
)}
</div>
Expand Down
111 changes: 54 additions & 57 deletions src/components/apps/Bear.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -59,7 +59,7 @@ const Highlighter = (dark: boolean): any => {

const Sidebar = ({ cur, setMidBar }: SidebarProps) => {
return (
<div className="w-full h-full bg-gray-700 text-white overflow-y-scroll">
<div text-white>
<div className="h-12 pr-3 hstack space-x-3 justify-end">
<span className="i-ic:baseline-cloud-off text-xl" />
<span className="i-akar-icons:settings-vertical text-xl" />
Expand All @@ -84,46 +84,41 @@ const Sidebar = ({ cur, setMidBar }: SidebarProps) => {

const Middlebar = ({ items, cur, setContent }: MiddlebarProps) => {
return (
<div
className="w-full h-full overflow-y-scroll border-r c-border-300"
bg="gray-50 dark:gray-800"
>
<ul>
{items.map((item: BearMdData, index: number) => (
<li
key={`bear-midbar-${item.id}`}
className={`h-24 flex flex-col cursor-default border-l-2 ${
cur === index
? "border-red-500 bg-white dark:bg-gray-900"
: "border-transparent bg-transparent"
} hover:(bg-white dark:bg-gray-900)`}
onClick={() => setContent(item.id, item.file, index)}
>
<div className="h-8 mt-3 hstack flex-none">
<div className="-mt-1 w-10 vstack flex-none c-text-500">
<span className={item.icon} />
</div>
<span className="relative text-gray-900 dark:text-gray-100 flex-grow font-bold">
{item.title}
{item.link && (
<a
className="absolute top-1 right-4"
href={item.link}
target="_blank"
rel="noreferrer"
>
<span className="i-ant-design:link-outlined c-text-500" />
</a>
)}
</span>
</div>
<div className="h-16 ml-10 pb-2 pr-1 text-sm c-text-500 border-b c-border-300">
{item.excerpt}
<ul>
{items.map((item: BearMdData, index: number) => (
<li
key={`bear-midbar-${item.id}`}
className={`h-24 flex flex-col cursor-default border-l-2 ${
cur === index
? "border-red-500 bg-white dark:bg-gray-900"
: "border-transparent bg-transparent"
} hover:(bg-white dark:bg-gray-900)`}
onClick={() => setContent(item.id, item.file, index)}
>
<div className="h-8 mt-3 hstack flex-none">
<div className="-mt-1 w-10 vstack flex-none text-c-500">
<span className={item.icon} />
</div>
</li>
))}
</ul>
</div>
<span className="relative flex-grow font-bold" text="gray-900 dark:gray-100">
{item.title}
{item.link && (
<a
className="absolute top-1 right-4"
href={item.link}
target="_blank"
rel="noreferrer"
>
<span className="i-ant-design:link-outlined text-c-500" />
</a>
)}
</span>
</div>
<div className="flex-grow ml-10" p="b-2 r-1" text="sm c-500" border="b c-300">
{item.excerpt}
</div>
</li>
))}
</ul>
);
};

Expand Down Expand Up @@ -177,19 +172,17 @@ const Content = ({ contentID, contentURL }: ContentProps) => {
}, [contentID, contentURL, fetchMarkdown]);

return (
<div className="markdown w-full h-full c-text-700 bg-gray-50 dark:bg-gray-800 overflow-scroll py-6">
<div className="w-2/3 px-2 mx-auto">
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[
rehypeKatex,
[rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer" }]
]}
components={Highlighter(dark as boolean)}
>
{storeMd[contentID]}
</ReactMarkdown>
</div>
<div className="markdown w-2/3 mx-auto px-2 py-6 text-c-700">
<ReactMarkdown
remarkPlugins={[remarkGfm, remarkMath]}
rehypePlugins={[
rehypeKatex,
[rehypeExternalLinks, { target: "_blank", rel: "noopener noreferrer" }]
]}
components={Highlighter(dark as boolean)}
>
{storeMd[contentID]}
</ReactMarkdown>
</div>
);
};
Expand Down Expand Up @@ -223,18 +216,22 @@ const Bear = () => {
};

return (
<div className="bear font-avenir flex w-full h-full">
<div className="flex-none w-44">
<div className="bear font-avenir flex h-full">
<div className="flex-none w-44 overflow-auto bg-gray-700">
<Sidebar cur={state.curSidebar} setMidBar={setMidBar} />
</div>
<div className="flex-none w-60">
<div
className="flex-none w-60 overflow-auto"
bg="gray-50 dark:gray-800"
border="r c-300"
>
<Middlebar
items={state.midbarList}
cur={state.curMidbar}
setContent={setContent}
/>
</div>
<div className="flex-grow">
<div className="flex-grow overflow-auto" bg="gray-50 dark:gray-800">
<Content contentID={state.contentID} contentURL={state.contentURL} />
</div>
</div>
Expand Down
7 changes: 2 additions & 5 deletions src/components/apps/FaceTime.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ const SidebarItem = ({ date, active }: SidebarItemProps) => {
onMouseEnter={() => setHover(true)}
onMouseLeave={() => setHover(false)}
>
<div className="h-11 w-11 rounded-full bg-zinc-600 flex-center">
<div className="size-11 rounded-full bg-zinc-600 flex-center">
<span className="i-ph:link-bold" text="2xl white/80" />
</div>

Expand Down Expand Up @@ -137,7 +137,6 @@ const FaceTime = () => {
<div className="h-full bg-zinc-800">
{!state.curImage ? (
<Webcam
className="h-full w-full"
mirrored={true}
audio={false}
ref={webcamRef}
Expand All @@ -148,9 +147,7 @@ const FaceTime = () => {
}}
/>
) : (
state.curImage && (
<img className="h-full w-full" src={state.curImage} alt="your-image" />
)
state.curImage && <img size-full src={state.curImage} alt="your-image" />
)}
</div>
</div>
Expand Down
Loading

0 comments on commit a5e9eee

Please sign in to comment.