Skip to content

Commit 6e658f3

Browse files
fezcodefezcode
committed
style: project cards
1 parent 77a5d50 commit 6e658f3

File tree

4 files changed

+39
-23
lines changed

4 files changed

+39
-23
lines changed

‎src/components/ProjectCard.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -78,7 +78,7 @@ const ProjectCard = ({ project, size = 1 }) => {
7878
to={`/projects/${project.slug}`}
7979
className="flex flex-col flex-grow relative z-10"
8080
>
81-
<h3 className="text-xl font-semibold text-white">{project.title}</h3>
81+
<h3 className="font-arvo text-xl text-orange-400">{project.title}</h3>
8282
<p className="mt-2 text-gray-400 flex-grow">{project.description}</p>
8383
</Link>
8484
{project.link && (

‎src/pages/CommandsPage.js‎

Lines changed: 20 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,17 @@ function CommandsPage() {
3737
return (
3838
<div className="py-16 sm:py-24">
3939
<div className="mx-auto max-w-7xl px-6 lg:px-8">
40-
<Link
41-
to="/"
42-
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
43-
>
40+
<Link to="/" className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4">
4441
<ArrowLeftIcon size={24} /> Back to Home
4542
</Link>
43+
<div className="mx-auto max-w-2xl text-center">
44+
<h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
45+
<span className="text-orange-300">Command</span> Palette
46+
</h1>
47+
<p className="mt-6 text-lg leading-8 text-gray-300">
48+
See all available commands in Command Palette.
49+
</p>
50+
</div>
4651
<div className="flex justify-center items-center mt-16">
4752
<div
4853
className="group bg-transparent border rounded-lg shadow-2xl p-6 flex flex-col justify-between relative transform overflow-hidden h-full w-full max-w-4xl"
@@ -61,8 +66,17 @@ function CommandsPage() {
6166

6267
<div className="mb-6 ml-4 mr-4">
6368
<p className="text-gray-200 mb-4">
64-
Press <kbd className="kbd kbd-sm">Alt</kbd>+<kbd className="kbd kbd-sm">K</kbd> to open Commands Palette.
65-
You can type <code> COMMAND </code> to see all available commands.
69+
Press <kbd className="kbd kbd-sm text-emerald-300">Alt</kbd>+<kbd className="kbd kbd-sm text-emerald-300">K</kbd> to open Commands Palette.
70+
It lists all available
71+
<code className="text-red-400"> PAGE</code>,
72+
<code className="text-red-400"> POST</code>,
73+
<code className="text-red-400"> PROJECT</code>,
74+
<code className="text-red-400"> LOG</code>,
75+
<code className="text-red-400"> APP</code> and
76+
<code className="text-red-400"> COMMAND</code> that can be used/consumed in Fezcodex.
77+
<br/>
78+
<br/>
79+
You can type <code className="text-emerald-300"> COMMAND </code> to see all available commands.
6680
</p>
6781
</div>
6882

‎src/pages/LogsPage.js‎

Lines changed: 16 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,8 +1,8 @@
1-
import React, { useState, useEffect } from 'react';
2-
import { Link } from 'react-router-dom';
3-
import { ArrowLeftIcon, CaretDown, CaretUp, X } from '@phosphor-icons/react';
1+
import React, {useState, useEffect} from 'react';
2+
import {Link} from 'react-router-dom';
3+
import {ArrowLeftIcon, CaretDown, CaretUp, X} from '@phosphor-icons/react';
44
import LogCard from '../components/LogCard';
5-
import ColorLegends, { categoryStyles } from '../components/ColorLegends';
5+
import ColorLegends, {categoryStyles} from '../components/ColorLegends';
66
import useSeo from '../hooks/useSeo';
77

88
const LogsPage = () => {
@@ -27,6 +27,7 @@ const LogsPage = () => {
2727
const [hiddenLegends, setHiddenLegends] = useState([]);
2828
const [allCategoriesSelected, setAllCategoriesSelected] = useState(true);
2929
const [searchQuery, setSearchQuery] = useState('');
30+
const [filteredLogs, setFilteredLogs] = useState([]);
3031

3132
const handleToggleAllCategories = () => {
3233
if (allCategoriesSelected) {
@@ -58,8 +59,6 @@ const LogsPage = () => {
5859
});
5960
};
6061

61-
const [filteredLogs, setFilteredLogs] = useState([]);
62-
6362
useEffect(() => {
6463
setFilteredLogs(
6564
logs.filter(
@@ -97,7 +96,7 @@ const LogsPage = () => {
9796
<div className="py-16 sm:py-24 animate-pulse">
9897
<div className="mx-auto max-w-7xl px-6 lg:px-8 text-gray-300">
9998
<div className="h-8 bg-gray-800 rounded w-1/4 mb-4"></div>
100-
<hr className="border-gray-700 mb-8" />
99+
<hr className="border-gray-700 mb-8"/>
101100
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-8">
102101
{[...Array(6)].map((_, i) => (
103102
<div key={i} className="bg-gray-800 rounded-lg shadow-lg p-6">
@@ -121,28 +120,31 @@ const LogsPage = () => {
121120
to="/"
122121
className="text-primary-400 hover:underline flex items-center justify-center gap-2 text-lg mb-4"
123122
>
124-
<ArrowLeftIcon size={24} /> Back to Home
123+
<ArrowLeftIcon size={24}/> Back to Home
125124
</Link>
126125
<h1 className="text-4xl font-bold tracking-tight sm:text-6xl mb-4 flex items-center">
127-
<span className="codex-color">codex</span>
126+
<span className="codex-color">fc</span>
128127
<span className="separator-color">::</span>
129128
<span className="logs-color">logs</span>
129+
<span className="separator-color">::</span>
130+
<span className="single-app-color">[{logs.length}]</span>
130131
</h1>
131132
<div
132133
className="relative flex justify-center items-center w-full cursor-pointer"
133134
onClick={() => setShowLegends(!showLegends)}
134135
>
135-
<hr className="border-gray-700 w-full absolute top-1/2 -translate-y-1/2" />
136+
<hr className="border-gray-700 w-full absolute top-1/2 -translate-y-1/2"/>
136137
<div className="relative border border-gray-700 bg-gray-900 px-4 z-10">
137138
{showLegends ? (
138-
<CaretUp size={32} className="text-primary-400" />
139+
<CaretUp size={32} className="text-primary-400"/>
139140
) : (
140-
<CaretDown size={32} className="text-primary-400" />
141+
<CaretDown size={32} className="text-primary-400"/>
141142
)}
142143
</div>
143144
</div>
144145
{showLegends && (
145-
<div className="mx-auto p-6 border border-gray-700 shadow-lg text-center bg-gray-900 opacity-80 mt-[-16px] mb-8">
146+
<div
147+
className="mx-auto p-6 border border-gray-700 shadow-lg text-center bg-gray-900 opacity-80 mt-[-16px] mb-8">
146148
<h2 className="mt-4 mb-[-16px] text-xl font-light tracking-tight text-white">
147149
Categories
148150
</h2>
@@ -186,7 +188,7 @@ const LogsPage = () => {
186188
className="ml-2 p-3 border border-red-400 bg-primary-500 text-white rounded-md transition-colors duration-200 hover:bg-red-500 focus:outline-none flex items-center justify-center"
187189
onClick={() => setSearchQuery('')}
188190
>
189-
<X size={20} weight="bold" />
191+
<X size={20} weight="bold"/>
190192
</button>
191193
</div>
192194
</div>

‎src/pages/ProjectsPage.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -69,10 +69,10 @@ const ProjectsPage = () => {
6969
<ArrowLeftIcon className="text-xl" /> Back to Home
7070
</Link>
7171
<h1 className="text-4xl font-semibold tracking-tight text-white sm:text-6xl">
72-
My Projects
72+
My <span className="text-orange-300">Projects</span>
7373
</h1>
7474
<p className="mt-6 text-lg leading-8 text-gray-300">
75-
A collection of my work and experiments.
75+
A collection of my <span className="text-blue-400">work</span> and <span className="text-blue-400">experiments</span>.
7676
</p>
7777
<div className="mt-4 text-center">
7878
<span className="ml-2 px-3 py-1 text-base font-medium text-gray-200 bg-gray-800 rounded-full">

0 commit comments

Comments
 (0)