Skip to content

Commit 1876a64

Browse files
fezcodefezcode
committed
feat: BreadcrumbTitle
1 parent bf8824a commit 1876a64

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

54 files changed

+134
-361
lines changed

‎src/components/BreadcrumbTitle.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
import React from 'react';
2+
3+
const BreadcrumbTitle = ({ title, slug, gradient = true }) => {
4+
return (
5+
<div className="relative flex flex-col items-center justify-center mb-4">
6+
<span className="min-[1376px]:absolute min-[1376px]:left-0 min-[1376px]:top-1/2 min-[1376px]:-translate-y-1/2 text-xl md:text-2xl font-mono font-normal text-gray-500 tracking-tight mb-2 min-[1376px]:mb-0 opacity-75">
7+
fc<span className="text-gray-700">::</span>apps<span className="text-gray-700">::</span><span className="text-primary-400">{slug}</span>
8+
</span>
9+
<h1 className="text-4xl md:text-6xl font-black tracking-tighter text-center">
10+
<span
11+
className={
12+
gradient
13+
? 'bg-clip-text text-transparent bg-gradient-to-r from-primary-400 to-secondary-400'
14+
: 'text-gray-200'
15+
}
16+
>
17+
{title}
18+
</span>
19+
</h1>
20+
</div>
21+
);
22+
};
23+
24+
export default BreadcrumbTitle;

‎src/pages/AppPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -45,7 +45,7 @@ function AppPage() {
4545
);
4646
const [isLoading, setIsLoading] = useState(true);
4747
const [totalAppsCount, setTotalAppsCount] = useState(0); // New state for total app count
48-
const [sortOption, setSortOption] = useState('default'); // 'default', 'created_desc', 'created_asc'
48+
const [sortOption, setSortOption] = useState('created_desc'); // 'default', 'created_desc', 'created_asc'
4949

5050
useEffect(() => {
5151
setIsLoading(true);
@@ -113,7 +113,7 @@ function AppPage() {
113113
>
114114
<ArrowLeftIcon size={24} /> Back to Home
115115
</Link>
116-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center">
116+
<h1 className="text-4xl font-bold font-mono tracking-tight sm:text-6xl mb-4 flex items-center">
117117
<AxeIcon size={48} weight="fill" className="mr-4 mt-2 text-gray-100 "/>
118118
<span className="codex-color">fc</span>
119119
<span className="separator-color">::</span>

‎src/pages/LogsPage.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -122,7 +122,7 @@ const LogsPage = () => {
122122
>
123123
<ArrowLeftIcon size={24}/> Back to Home
124124
</Link>
125-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center">
125+
<h1 className="text-4xl font-bold font-mono tracking-tight sm:text-6xl mb-4 flex items-center">
126126
<LogIcon size={48} weight="fill" className="mr-4 mt-2 text-gray-100 "/>
127127
<span className="codex-color">fc</span>
128128
<span className="separator-color">::</span>

‎src/pages/apps/AsciiConverterPage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ArrowLeftIcon } from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import { useToast } from '../../hooks/useToast';
66
import useSeo from '../../hooks/useSeo';
7+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
78

89
function AsciiConverterPage() {
910
useSeo({
@@ -130,13 +131,7 @@ function AsciiConverterPage() {
130131
>
131132
<ArrowLeftIcon size={24} /> Back to Apps
132133
</Link>
133-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
134-
<span className="codex-color">fc</span>
135-
<span className="separator-color">::</span>
136-
<span className="apps-color">apps</span>
137-
<span className="separator-color">::</span>
138-
<span className="single-app-color">ascii</span>
139-
</h1>
134+
<BreadcrumbTitle title="ASCII Converter" slug="ascii" />
140135
<hr className="border-gray-700" />
141136
<div className="flex justify-center items-center mt-16">
142137
<div className="group border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl bg-app-alpha-10 hover:bg-app/15 text-app border-app">

‎src/pages/apps/BananaConverterPage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import {ArrowLeftIcon, PlantIcon} from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import useSeo from '../../hooks/useSeo';
66
import CustomDropdown from '../../components/CustomDropdown'; // Import CustomDropdown
7+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
78

89
const BANANA_LENGTH_CM = 18; // Average banana length
910
const BANANA_WEIGHT_G = 120; // Average banana weight
@@ -109,13 +110,7 @@ const BananaConverterPage = () => {
109110
>
110111
<ArrowLeftIcon size={24}/> Back to Apps
111112
</Link>
112-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
113-
<span className="codex-color">fc</span>
114-
<span className="separator-color">::</span>
115-
<span className="apps-color">apps</span>
116-
<span className="separator-color">::</span>
117-
<span className="single-app-color">banana</span>
118-
</h1>
113+
<BreadcrumbTitle title="Banana Converter" slug="banana" />
119114
<hr className="border-gray-700"/>
120115
<div className="flex justify-center items-center mt-16">
121116
<div

‎src/pages/apps/Base64ConverterPage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Link } from 'react-router-dom';
33
import { ArrowLeftIcon } from '@phosphor-icons/react';
44
import { useToast } from '../../hooks/useToast';
55
import useSeo from '../../hooks/useSeo';
6+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
67

78
function Base64ConverterPage() {
89
useSeo({
@@ -81,13 +82,7 @@ function Base64ConverterPage() {
8182
>
8283
<ArrowLeftIcon size={24} /> Back to Apps
8384
</Link>
84-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
85-
<span className="codex-color">fc</span>
86-
<span className="separator-color">::</span>
87-
<span className="apps-color">apps</span>
88-
<span className="separator-color">::</span>
89-
<span className="single-app-color">b64</span>
90-
</h1>
85+
<BreadcrumbTitle title="Base64 Converter" slug="b64" />
9186
<hr className="border-gray-700" />
9287
<div className="flex justify-center items-center mt-16">
9388
<div className="group bg-app-alpha-10 hover:bg-app/15 text-app border-app border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform transition-all duration-300 ease-in-out scale-105 overflow-hidden h-full w-full max-w-4xl">

‎src/pages/apps/BpmGuesserPage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {Link} from 'react-router-dom';
33
import {ArrowLeftIcon, MetronomeIcon} from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import useSeo from '../../hooks/useSeo';
6+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
67

78
const BpmGuesserPage = () => {
89
useSeo({
@@ -75,13 +76,7 @@ const BpmGuesserPage = () => {
7576
>
7677
<ArrowLeftIcon size={24}/> Back to Apps
7778
</Link>
78-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
79-
<span className="codex-color">fc</span>
80-
<span className="separator-color">::</span>
81-
<span className="apps-color">apps</span>
82-
<span className="separator-color">::</span>
83-
<span className="single-app-color">bpm</span>
84-
</h1>
79+
<BreadcrumbTitle title="BPM Guesser" slug="bpm" />
8580
<hr className="border-gray-700"/>
8681
<div className="flex justify-center items-center mt-16">
8782
<div

‎src/pages/apps/BubbleWrapPage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import {Link} from 'react-router-dom';
33
import {ArrowLeftIcon, CirclesFourIcon} from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import useSeo from '../../hooks/useSeo';
6+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
67

78
const BUBBLE_COUNT = 100; // Number of bubbles
89

@@ -80,13 +81,7 @@ const BubbleWrapPage = () => {
8081
>
8182
<ArrowLeftIcon size={24}/> Back to Apps
8283
</Link>
83-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
84-
<span className="codex-color">fc</span>
85-
<span className="separator-color">::</span>
86-
<span className="apps-color">apps</span>
87-
<span className="separator-color">::</span>
88-
<span className="single-app-color">pop</span>
89-
</h1>
84+
<BreadcrumbTitle title="Bubble Wrap" slug="pop" />
9085
<hr className="border-gray-700"/>
9186
<div className="flex justify-center items-center mt-16">
9287
<div

‎src/pages/apps/CardGamePage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import colors from '../../config/colors';
55
import { useToast } from '../../hooks/useToast';
66
import useSeo from '../../hooks/useSeo';
77
import '../../styles/CardGamePage.css';
8+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
89

910
const suits = ['♠', '♥', '♦', '♣'];
1011
const ranks = [
@@ -181,13 +182,7 @@ const CardGamePage = () => {
181182
>
182183
<ArrowLeftIcon size={24} /> Back to Apps
183184
</Link>
184-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
185-
<span className="codex-color">fc</span>
186-
<span className="separator-color">::</span>
187-
<span className="apps-color">apps</span>
188-
<span className="separator-color">::</span>
189-
<span className="single-app-color">card</span>
190-
</h1>
185+
<BreadcrumbTitle title="Higher or Lower" slug="card" />
191186
<hr className="border-gray-700" />
192187
<div className="flex justify-center items-center mt-16">
193188
<div

‎src/pages/apps/CaseConverterPage.js‎

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ import { ArrowLeftIcon } from '@phosphor-icons/react';
44
import colors from '../../config/colors';
55
import { useToast } from '../../hooks/useToast';
66
import useSeo from '../../hooks/useSeo';
7+
import BreadcrumbTitle from '../../components/BreadcrumbTitle';
78

89
function CaseConverterPage() {
910
useSeo({
@@ -80,13 +81,7 @@ function CaseConverterPage() {
8081
>
8182
<ArrowLeftIcon size={24} /> Back to Apps
8283
</Link>
83-
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center justify-center">
84-
<span className="codex-color">fc</span>
85-
<span className="separator-color">::</span>
86-
<span className="apps-color">apps</span>
87-
<span className="separator-color">::</span>
88-
<span className="single-app-color">cc</span>
89-
</h1>
84+
<BreadcrumbTitle title="Case Converter" slug="cc" />
9085
<hr className="border-gray-700" />
9186
<div className="flex justify-center items-center mt-16">
9287
<div

0 commit comments

Comments
 (0)