Skip to content

Commit

Permalink
💄 Responsive UI
Browse files Browse the repository at this point in the history
  • Loading branch information
JulyWitch committed Jan 17, 2025
1 parent 276bbc7 commit 2025b25
Show file tree
Hide file tree
Showing 2 changed files with 61 additions and 40 deletions.
85 changes: 55 additions & 30 deletions src/components/IconDetails/IconDetails.tsx
Original file line number Diff line number Diff line change
@@ -1,11 +1,11 @@
import React, { useState } from "react";
import { X } from "lucide-react";
import { Icon } from "../../types/icons";
import { IconCredit } from "./IconCredit";
import { Tabs } from "./Tabs";
import { PreviewTab } from "./PreviewTab";
import { CodeTab } from "./CodeTab";
import { ReactTab } from "./ReactTab";
import { X } from "lucide-react";

interface IconDetailsProps {
icon: Icon | null;
Expand Down Expand Up @@ -34,38 +34,63 @@ export function IconDetails({ icon, onClose }: IconDetailsProps) {
};

return (
<div className="sticky right-0 top-0 h-screen min-w-96 max-w-96 bg-white shaow-lg p-6 transform transition-transform duration-300 ease-in-out">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold">
Icon Details
</h2>
</div>

{icon == null ? (
<>Please select an icon</>
) : (
<>
<IconCredit iconPath={icon.path} />
<div
className={`
md:sticky md:right-0 md:top-0 md:h-screen md:min-w-96 md:max-w-96 md:shadow-lg
fixed inset-x-0 bottom-0 w-full h-screen bg-white shadow-lg
transform transition-all duration-300 ease-in-out
${icon ? "translate-y-0" : "translate-y-full md:translate-y-0"}
${!icon && "md:block md:visible invisible"}
`}
>
<div className="p-6">
<div className="flex justify-between items-center mb-6">
<h2 className="text-xl font-semibold">
Icon Details
</h2>
<button
onClick={onClose}
className="p-2 hover:bg-gray-100 rounded-full transition-colors md:hidden"
aria-label="Close details"
>
<X className="w-6 h-6" />
</button>
</div>

<Tabs
activeTab={activeTab}
onTabChange={setActiveTab}
/>

{activeTab === "Preview" && (
<PreviewTab
icon={icon}
onDownload={
handleDownload
{icon == null ? (
<p>Please select an icon</p>
) : (
<>
<IconCredit
iconPath={icon.path}
/>
<Tabs
activeTab={activeTab}
onTabChange={
setActiveTab
}
/>
)}
{activeTab === "Code" && (
<CodeTab iconPath={icon.path} />
)}
{activeTab === "React" && <ReactTab />}
</>
)}
{activeTab === "Preview" && (
<PreviewTab
icon={icon}
onDownload={
handleDownload
}
/>
)}
{activeTab === "Code" && (
<CodeTab
iconPath={
icon.path
}
/>
)}
{activeTab === "React" && (
<ReactTab />
)}
</>
)}
</div>
</div>
);
}
16 changes: 6 additions & 10 deletions src/components/Search.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,15 +5,6 @@ import { Icon } from "../types/icons";
import { IconDetails } from "./IconDetails/index";
import { useUrlState } from "../hooks/useUrlState";

const Header = ({ title }: { title: string }) => (
<h1 className="text-xl md:text-2xl font-light mb-4 md:mb-8 whitespace-pre-line">
<span className="text-3xl md:text-4xl bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent font-black">
{title}
</span>
{"\n"}Icon Search Engine
</h1>
);

const SearchInput = ({
placeholder,
value,
Expand Down Expand Up @@ -207,7 +198,12 @@ export function Search({ searcher }: { searcher: IconSearcher }) {
return (
<div className="flex flex-col md:flex-row min-h-screen bg-gray-100">
<aside className="bg-gray-900 p-4 md:p-6 text-white md:h-screen md:sticky md:top-0 md:w-80 md:overflow-y-auto">
<Header title="FASTEST" />
<h1 className="text-xl md:text-2xl font-light mb-4 md:mb-8 whitespace-pre-line">
<span className="text-3xl md:text-4xl bg-gradient-to-r from-blue-500 via-purple-500 to-pink-500 bg-clip-text text-transparent font-black">
FASTEST
</span>
{"\n"}Icon Search Engine
</h1>
<div className="mb-6">
<SearchInput
placeholder={`Search ${getSelectedPackageCount} icons...`}
Expand Down

0 comments on commit 2025b25

Please sign in to comment.