Mirrors/movie-web
2
0
Fork 0
mirror of https://github.com/movie-web/movie-web.git synced 2024-11-11 07:05:08 +01:00
Code Issues Packages Projects Releases Wiki Activity

Add ol component

Browse Source
This commit is contained in:
Jip Fr 2023-10-24 13:15:13 +02:00
parent f5015bdfbb
commit 9bd31071f9
3 changed files with 110 additions and 30 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

36
src/components/utils/Ol.tsx Normal file
View File

@ -0,0 +1,36 @@
import classNames from "classnames";
export function Ol(props: { items: React.ReactNode[] }) {
return (
<ol>
{props.items.map((child, i) => {
return (
<li
className={classNames(
"grid grid-cols-[auto,1fr] gap-6",
i !== props.items.length - 1 ? "pb-6" : undefined
)}
>
<div className="relative">
<div className="w-7 h-7 rounded-full bg-about-circle text-about-circleText font-medium flex justify-center items-center relative z-10">
{i + 1}
</div>
{i !== props.items.length - 1 ? (
<div
className="h-full w-px absolute top-6 left-1/2 transform -translate-x-1/2"
style={{
backgroundImage:
"linear-gradient(to bottom, transparent 5px, #1F1F29 5px, #1F1F29 10px)",
backgroundSize: "10px 10px",
backgroundRepeat: "Repeat",
}}
/>
) : null}
</div>
<div>{child}</div>
</li>
);
})}
</ol>
);
}

38
src/pages/About.tsx
View File

@ -1,14 +1,52 @@
/* eslint-disable react/no-unescaped-entities */
import { ThinContainer } from "@/components/layout/ThinContainer";
import { Ol } from "@/components/utils/Ol";
import { Heading1, Heading2, Paragraph } from "@/components/utils/Text";
import { SubPageLayout } from "./layouts/SubPageLayout";
function Question(props: { title: string; children: React.ReactNode }) {
return (
<>
<p className="text-white mb-2 font-medium">{props.title}</p>
<div className="text-type-text">{props.children}</div>
</>
);
}
export function AboutPage() {
return (
<SubPageLayout>
<ThinContainer>
<Heading1>About us</Heading1>
<Ol
items={[
<Question title="What is Blue?">
Blue, oh so blue, like the tranquil sky on a summer's day. It's
the color of calm and serenity, a gentle embrace for your senses.
When you think of blue, you think of the vast ocean stretching
endlessly, inviting you to dive deep into its azure depths.
</Question>,
<Question title="Huh?">
Blue is the color of dreams, where the world slows down, and you
can hear the whispers of the wind in the tall grass. It's a
symphony of peacefulness that resonates with your soul, like a
melody that lingers in your heart.
</Question>,
<Question title="What the hell are you talking about?">
Blue, like, it's totally, um, the essence of like, everything, you
know? It's like, you look at it, and it's like, it's there, but
it's also not there, and it's like, you're trying to grasp the
concept of blue, but it's like trying to catch a dream in a net
made of spaghetti, you know? It's like, it's the ultimate paradox,
and it's like, it's just blowing your mind, man, like, it's like
trying to find the meaning of life in a jar of peanut butter, but
the peanut butter is made of pure energy, man, and it's like,
whoa.
</Question>,
]}
/>
<Paragraph>
Blue, oh so blue, like the tranquil sky on a summer's day. It's the
color of calm and serenity, a gentle embrace for your senses. When you

66
tailwind.config.js
View File

@ -26,23 +26,23 @@ module.exports = {
"ash-400": "#3D394D",
"ash-300": "#2C293A",
"ash-200": "#2B2836",
"ash-100": "#1E1C26"
"ash-100": "#1E1C26",
},
/* fonts */
fontFamily: {
"open-sans": "'Open Sans'"
"open-sans": "'Open Sans'",
},
/* animations */
keyframes: {
"loading-pin": {
"0%, 40%, 100%": { height: "0.5em", "background-color": "#282336" },
"20%": { height: "1em", "background-color": "white" }
}
"20%": { height: "1em", "background-color": "white" },
},
},
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" }
}
animation: { "loading-pin": "loading-pin 1.8s ease-in-out infinite" },
},
},
plugins: [
require("tailwind-scrollbar"),
@ -52,31 +52,31 @@ module.exports = {
colors: {
// Branding
pill: {
background: "#1C1C36"
background: "#1C1C36",
},
// meta data for the theme itself
global: {
accentA: "#505DBD",
accentB: "#3440A1"
accentB: "#3440A1",
},
// light bar
lightBar: {
light: "#2A2A71"
light: "#2A2A71",
},
// Buttons
buttons: {
toggle: "#8D44D6",
toggleDisabled: "#202836"
toggleDisabled: "#202836",
},
// only used for body colors/textures
background: {
main: "#0A0A10",
accentA: "#6E3B80",
accentB: "#1F1F50"
accentB: "#1F1F50",
},
// typography
@ -85,7 +85,7 @@ module.exports = {
text: "#73739D",
dimmed: "#926CAD",
divider: "#262632",
secondary: "#64647B"
secondary: "#64647B",
},
// search bar
@ -94,7 +94,7 @@ module.exports = {
focused: "#24243C",
placeholder: "#4A4A71",
icon: "#545476",
text: "#FFFFFF"
text: "#FFFFFF",
},
// media cards
@ -106,7 +106,7 @@ module.exports = {
barColor: "#4B4B63",
barFillColor: "#BA7FD6",
badge: "#151522",
badgeText: "#5F5F7A"
badgeText: "#5F5F7A",
},
// Error page
@ -115,8 +115,14 @@ module.exports = {
border: "#252534",
type: {
secondary: "#62627D"
}
secondary: "#62627D",
},
},
// About page
about: {
circle: "#262632",
circleText: "#9A9AC3",
},
// video player
@ -128,17 +134,17 @@ module.exports = {
error: "#E44F4F",
success: "#40B44B",
loading: "#B759D8",
noresult: "#64647B"
noresult: "#64647B",
},
progress: {
background: "#8787A8",
preloaded: "#8787A8",
watched: "#A75FC9"
watched: "#A75FC9",
},
audio: {
set: "#A75FC9"
set: "#A75FC9",
},
buttons: {
@ -151,7 +157,7 @@ module.exports = {
purple: "#6b298a",
purpleHover: "#7f35a1",
cancel: "#252533",
cancelHover: "#3C3C4A"
cancelHover: "#3C3C4A",
},
context: {
@ -171,19 +177,19 @@ module.exports = {
buttons: {
list: "#161C26",
active: "#0D1317"
active: "#0D1317",
},
type: {
main: "#617A8A",
secondary: "#374A56",
accent: "#A570FA"
}
}
}
}
}
}
})
]
accent: "#A570FA",
},
},
},
},
},
},
}),
],
};